CSS全称为“cascading style sheet”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。本篇文章总结CSS的一些常用基础。
1、CSS注释
使用/*注释语句*/完成注释
2、CSS样式的位置
行内样式
<p style = “color = red;”>
文字内容
</p>内嵌式
<style type = “text/css”>
p{color: red;}
</style>链接式（外部式）
将CSS代码写在另外的单独的外部文件中，以.css为扩展名，在<head>标签中使用<link>标签实现链接。
<link href=”x.css” rel=”stylesheet” type=”text/css”/>
其中rel=”stylesheet” type=”text/css”为固定写法，不可更改；<link>一般位于<head>标签中。
注意：三种方式的优先级
遵循就近原则，即行内样式>内嵌式>链接式
3、CSS选择器
每一条css样式声明由两部分组成，如下：
选择器{
样式；
}
选择器指明了{}中的“样式”的作用对象。选择器有很多种，下面一一介绍。
标签选择器
标签选择器其实就是html代码中的标签。比如<html><head><body><p><h1><img>等等。
语法：标签名{css样式；}
实例：p{color: red;}类选择器
类选择器在css中是最常用的。
语法：. 类选择器名{css样式；}
实例：. class1{color: red;}ID选择器
ID选择器具有唯一性，只能在文档中使用一次，而类选择器可以使用多次。
语法：#ID名{css样式；}
实例：#header{color: red;}子选择器
还有一个比较有用的选择器—子选择器，即大于符号(>)，用于选择指定标签元素的第一代子元素。
语法：选择器1>选择器2{css样式；}
实例：. class>span{color: red;}
会使得class名为span下的子元素文字变成红色。
注意：子选择器仅作用于第一代后代。继承选择器
语法：选择器1 选择器2{css样式；}
实例：. class span{color: red;}
注意：继承选择器作用于元素的所有后代。全局选择器（通用选择器）
语法： *{css样式；}
实例：*{color: red;}
字体全部被设置为红色。伪类选择器
为标签元素的鼠标滑过的状态设置属性。
实例： a : hover{color: red;}
则在<a></a>标签中的文字在鼠标划过时就会显示红色。
关于伪选择符：关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
它就相当于：
h1{color:red;}
span{color:red;}
4、CSS的一些特性
继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。有一些css样式是不具有继承性的。如border:1px solid red;特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢? 浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值规则：
标签选择器 1
类选择器 10
ID选择器 100
组合选择器在此基础之上叠加。层叠
我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？层叠可以帮你解决这个问题。层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。重要性
使用！important为某些样式设置最高权值。
实例：p{color:red!important;}颜色
名称、百分比颜色（10%，20%，30%）、数字颜色（255,255,255）、十六进制颜色（color: #ff0000;）长度
绝对单位： 英寸（in）、厘米、毫米、磅（pt）
相对单位：px、em（当前字体大小）
扫一扫
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
