CSS指层叠样式表(Cascading Style Sheets),定义如何显示html元素,如文字大小、颜色、字体加粗等。样式表允许以多种方式规定样式信息,可以在单个html元素中,也可以在html页的头部,或者以外部文件的形式引入。
语法
主要两个部分构成:选择器和声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的HTML元素。声明由属性和值组成,属性就是你需要改变的样式属性。多个声明由分号(;
),一般最后一条声明后也会加上分号。
注释
css中注释很简单,不用多说。/*注释语句*/
css样式设置方式
- 内联式
- 嵌入式
- 外部式
内联式
直接写在html标签style属性中。
<p style="color:red">这里文字是红色。</p>
嵌入式
css样式代码写在页面的<style type="text/css"></style>
标签之间。一般嵌入式css写在<head></head>
之间。
<style type="text/css">
span{
color:red;
}
</style>
外部式
css样式写在一个单独的文件中,扩展名.css
,一般在head标签内使用link标签将文件链接到html文件内。
<link href="base.css" rel="stylesheet" type="text/css" />
优先级
一般来说:内联式 > 嵌入式 > 外部式。 就近原则(离被设置元素越近优先级别越高)
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要写在分号的前面,设置某些样式具有最高权值。