CSS(层叠样式表,Cascading Style Sheets)是一种用于描述HTML或XML(包括各种XML方言,如SVG、MathML或XHTML)文档呈现的样式的语言,CSS描述了在屏幕、纸质、音频等媒体上元素应该如何被渲染的问题,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大提高了网页的显示效率。
CSS样式可以通过以下三种方式将样式规则应用到相应的网页元素:
1、内联样式:直接在HTML元素中使用"style"属性定义样式,这种方式的缺点是,如果页面中有很多元素需要应用相同的样式,那么就需要重复编写很多代码,而且难以维护和修改。
2、内部样式表:在HTML文档头部的head标签之间区域使用"style"标签定义样式,这种方式的优点是可以将样式规则集中在一个地方,便于管理和修改,如果多个页面需要应用相同的样式,那么还是需要重复编写代码。
3、外部样式表:将所有的样式规则写在一个单独的.css文件中,然后在HTML文档头部的head标签之间区域使用"link"标签链接这个.css文件,这种方式的优点是可以实现代码的复用,如果多个页面需要应用相同的样式,只需要在.css文件中编写一次即可。
CSS的基本语法如下:
1、CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。
2、选择器通常是你要改变样式的HTML元素。
3、每条声明由一个属性和一个值组成。
4、属性(property)是你想要改变的样式的名称,每个属性有一个值,属性和值被冒号分为两部分。
5、多条声明被分为一组,用大括号包围,组之间用分号分隔。
CSS的选择器可以分为以下几种类型:
1、元素选择器:选择HTML中的某个元素,例如p、h1、div等。
2、类选择器:选择HTML中的某个类,class1、.class2等。
3、ID选择器:选择HTML中的某个ID,id1、#id2等。
4、后代选择器:选择某个元素的后代元素,例如div p、ul li等。
5、子元素选择器:选择某个元素的直接子元素,例如div > p、ul > li等。
6、相邻兄弟选择器:选择紧接在另一个元素后的元素,例如h1 + p、div + p等。
7、通用兄弟选择器:选择相同父元素的任意一个元素,例如h1 ~ p、div ~ p等。
8、属性选择器:根据元素的属性及属性值来选择元素,attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute^=value]、[attribute$=value]等。
9、伪类选择器:根据元素的特定状态来选择元素,hover、:active、:focus、:first-child、:last-child、:nth-child等。
10、伪元素选择器:根据元素的特定位置来选择元素,:before、::after、::first-letter等。
CSS的声明可以分为以下几种类型:
1、字体属性:font-family、font-size、font-weight、font-style、font-variant、font-stretch、font-size-adjust等。
2、文本属性:color、background-color、text-align、text-decoration、line-height、letter-spacing、word-spacing、white-space、vertical-align等。
3、边框属性:border-width、border-style、border-color、border-top、border-right、border-bottom、border-left等。
4、背景属性:background-image、background-repeat、background-attachment、background-position等。
5、尺寸属性:width、height、min-width、max-width、min-height、max-height等。
6、位置属性:position、top、right、bottom、left、z-index等。
7、浮动属性:float、clear等。
8、显示属性:display、visibility、opacity等。
9、其他属性:margin、padding、overflow、cursor等。
CSS还支持一些高级功能,例如动画(animation)、过渡(transition)、阴影(box-shadow)、溢出(overflow)、定位(position)、弹性布局(flexbox)、网格布局(grid)、媒体查询(media query)等。
CSS是一种非常强大的工具,可以帮助我们更好地控制网页的布局和样式,提高网页的美观性和用户体验。