CSS样式表总结

CSS显示

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

CSS代码的位置

1.内联样式

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

2.内部样式

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

3.外部样式

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

link标签：
作用：导入外部文件
用法：
<link rel="stylesheet" type="text/css" href="theme.css">
	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开头的所有元素