CSS样式表总结

CSS显示

css 是 web 标准中的表现标准，专门用来对网页标签进行布局和设置样式的一门语言，目前使用css3，css 又名层叠样式表.

CSS代码的位置

1.内联样式

将样式表写在标签的 style 的属性中

2.内部样式

将样式表也在 head 中的 style 中的标签中，只可用于当前的 html 文件

3.外部样式

在外面新建一个 css 后缀的样式文件，并通过 link 引入到 html 文件中，可用于所有的 html 文件中

link标签：
作用：导入外部文件
用法：

	rel：说明属性的功能
	type：设置导入文件的类型
	href：导入的 css 文件的位置

CSS基本语法

选择器{属性:属性值:属性:属性值:多个属性}
说明：
选择器：用来选中/确定需要设置样式的标签
属性与属性值之间用冒号连接；属性与属性之间用分号隔开

• 注释：/* 用来解释代码，但不执行 */
• 颜色表示
  • 颜色的英文单词
  • ‘#’ + 颜色的十六进制值
  • rgb(r, g, b)或者 rgba (r, g, b, alpha); r/g/b 的范围(0,255),alpha 范围(0,1)
• 常用的属性

CSS选择器

作用：选中需要添加样式的标签
内联样式优先级最高
优先级1：越详细的选择器，定位越准确的选择器，优先级越高；如果详细程度一样，就看就近原则
优先级2：权重值越大，优先级越高
权重：元素选择器（1）、id 选择器（4）、类选择器（2）、群组选择器（看单独一个）、父子选择器（所有选择器权重之和）、为类选择器（1）

• 元素选择器
  • 注解：将标签名作为选择器，选中所有指定的标签
  • 用法：标签名{样式}
• id选择器
  • 注解：通过标签的 id 属性，来定位到某一个特定的标签，或者所有相同 id 的标签，并设置样式
  • 用法：#id{样式}
• class选择器
  • 注解：将标签的类属性作为定位的标准，将所有带有这个类的标签选出来，并设置样式
  • 用法： 点类选择器{样式}
• 群组选择器
  • 注解：多个选择器之间用逗号隔开作为一个选择器，同时选中所有的选择器对应的标签
  • 用法：#id，p,div{样式}
• 后代选择器
  • 注解：又名包含选择器/父子选择器，可以多类选择器进行组合
  • 用法：用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
• 子选择器
  • 注解：请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。
  • 用法：后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

• 伪类选择器

  • 注解：选中某个标签的不同状态，可以给不同状态设置不同的样式
  • 用法：
    • a:Link 表示链接在没有被点击时的样式,选中所有 a 标签的初始状态,并设置标签原来的样式
    • ‘#’a:Visited 表示链接已经被访问后的样式，选中所有 id 为 a 的标签，并设置访问后的样式
    • .b:Hover 表示当鼠标悬停在链接上面时的样式,选中所有的类属性为 b 的标签，并设置鼠标悬停时的样式
    • a:active 表示链接被激活即鼠标按下不放时的状态，选中所有 a 标签，并设置鼠标按下不放时的样式
• 通用选择器
  • 注解：通用选择器用（*）来表示。
  • 用法：*{样式}
• 兄弟选择器
  • 注解：选取相邻间的标签
  • 用法：+和_{的区别：类似上面一个，两者都表示兄弟关系，但是+必须是“大哥+二哥”，}还能是“大哥_{三弟”、“二哥}四妹”
• 属性选择器

  • 注解：属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0；当然，也可以同时匹配多个属性；

  • 用法:

    attr=val {margin-right: 10px}
    //选择属性 title 的值等于 this 的所有元素
    attr^=val {margin-left: 15px}
    //选择属性title的值以this开头的所有元素