CSS指层叠样式表(Cascading Style Sheets),定义如何显示html元素,如文字大小、颜色、字体加粗等。样式表允许以多种方式规定样式信息,可以在单个html元素中,也可以在html页的头部,或者以外部文件的形式引入。
语法
主要两个部分构成:选择器和声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的HTML元素。声明由属性和值组成,属性就是你需要改变的样式属性。多个声明由分号(;),一般最后一条声明后也会加上分号。
示意图 来源w3school
注释
css中注释很简单,不用多说。/*注释语句*/
css样式设置方式
内联式
嵌入式
外部式
内联式
直接写在html标签style属性中。
这里文字是红色。
嵌入式
css样式代码写在页面的标签之间。一般嵌入式css写在
之间。span{
color:red;
}
外部式
css样式写在一个单独的文件中,扩展名.css,一般在head标签内使用link标签将文件链接到html文件内。
优先级
一般来说:内联式 > 嵌入式 > 外部式。 就近原则(离被设置元素越近优先级别越高)
css选择器
标签选择器 p{font-size:12px;}
类选择器
/* .类选器名称{css样式代码;} */
.main{font-size:14px;}
ID选择器
/* #类选器名称{css样式代码;} */
#main{font-size:14px;}
子选择器> 用于选择指定标签元素的第一代子元素 .food>li{border:1px solid red;}
后代选择器 用于选择指定标签元素下的后辈元素 .first span{color:red;}
通用选择器* 匹配html中所有标签元素 * {color:red;}
伪类选择符 常用的也就这一个a:hover{color:red;}
分组选择符,
h1,span{color:red;}
/* 等价于 */
h1{color:red;}
span{color:red;}
类和ID选择器的区别
类选择器和ID选择器都可以应用于任何元素,但是他们有一些不同的地方。ID选择器只能使用一次,一个元素只能设置一个ID属性,而类选择器则可以使用多次,多个不同的元素使用,而且一个元素也可以同时设多个样式,在class属性中以空格分割设置多个类选择器名。
继承
继承是css的一种规则,它允许样式不仅应用于某个特定的html标签元素,而且应用于其后代。根据CSS,子元素可以从父元素继承属性。
权值
当为同一个元素设置了多个不同的css样式代码时,最终启用哪一个css样式,就取决于权值,使用权值最高的。据了解标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100,继承也有权值但特别低,可以理解是最低的。
层叠
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。(就近原则)
!important
!important要写在分号的前面,设置某些样式具有最高权值。