CSS简介

CSS 全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义 HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

CSS引用:
在 HTML 中引入 CSS 共有 3 种方式:

外部样式表;

内部样式表;

内联样式表;

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

2.内部样式表:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
     </style>
</head>

3.内联样式表:

要使用内联样式，你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

本例展示如何改变段落的颜色和左外边距:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢?

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1.浏览器缺省设置

2.外部样式表
3.内部样式表(位于 <head> 标签内部)

4.内联样式(在 HTML 元素内部)

因此，内联样式(在 HTML 元素内部)拥有最高的优先权，这意味着它将优先于以下的样式声明:
内联样式 > 标签中的样式声明 > 外部样式表中的样式声明(或者浏览器中的样式声明(缺省值))

提示:如果你使用了外部文件的样式在 <head>中也定义了该样式，则内部样式表会取代外部文件的样式。

其实总结来说，就是--就近原则(离被设置元素越近优先级别越高)。

CSS选择器

标签选择器

标签选择器其实就是 html 代码中的标签。例如下面代码:

 p {
    font-size:12px;
    line-height:1.6em;
   }

类选择器

类选择器在 css 样式编码中是最常用到的。

语法:
.类选器名称{css 样式代码;}

ID 选择器

在很多方面，ID 选择器都类似于类选择符，但也有一些重要的区别:

1、为标签设置 id="ID 名称"，而不是 class="类名称"。
2、ID 选择符的前面是井号(#)号，而不是英文圆点(.)。

通用选择器

通用选择器是功能最强大的选择器，它使用一个(*)号指定，它的作用是匹配 html 中所有标签元素，如下使用下面代码使用 html 中任意标签元素字体颜色全部设置为红色:

 * {color:red;}

属性选择器

实例展示:

<a href="xxx.pdf" class="icon" title="我的 title 是 more">我链接的是 PDF 文件</a>

<a href="#">我类名是 icon</a>

<a href="#">我的 title 是 more</a>

css 代码

a[class=^=icon]{
   background: green;
   '
color:#fff;
{

a[href$=pdf]{

    background: orange;

    color: #fff;
 }

 a[title*=more]{

     background: blue;

     color: #fff;

  }

伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。又叫伪类选择符，它允许给 html 不存在的标签(标签的某种状态)设置样式，比如说我们给 html 中一个标签元素的鼠标滑过的状态来设置字体颜色:

 a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。

a:active 向被激活的元素添加样式。

a:focus 向拥有键盘输入焦点的元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。

结构伪类选择器

是针对 HTML 层次“结构”的伪类选择器。例如我们想要某一个父元素下面的第 n 个子元素。

总结:“:first-child”是选择父元素下的第 1 个子元素(不区分元素类型)，而“:first-of-type”是选择父元素下某个元素类型的第 1 个子元素(区分元素类型)。

例子

<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

(1):first-child
h1:first-child:选择的是h1元素，因为h1元素是div的第1个子元素。

p:first-child:选择不到任何元素，因为p并不是div的第1个子元 素，而是div的第2个子元素。

span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素;

(2):first-of-type
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素;
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素;
span: first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。

“:nth-child(n)”选择器

用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值 \(1,2,3,4\)，也可以是表达式\(2n+1、-n+5\)和关键词\(odd、even\)，但参数 n 的起始值始终是 1，而不是 0。也就是说，参数 n 的值为 0 时，选择器将选择不到任何匹配的元素。

nth-last-child(n)

 “:nth-last-child\(n\)”选择器和前面的“:nth-child\(n\)”选择器非常的相似，只是这里 多了一个“last”，所起的作用和“:nth-child\(n\)”选择器有所区别，从某父元素的最后 一个子元素开始计算，来选择特定的元素。

:target选择器

用于选取页面中的某个 target 元素。
:target 选择器称为目标选择器，用来匹配文档(页面)的 url 的某个标志符的目标元素。常用于。

<style type="text/css">
        :target h3
        { color:red;}
</style>
</head>
<body>
<div>
    <a href="#music">推荐音乐</a>
    <br />
</div>
......
<div id="music">
    <h3>推荐音乐</h3>
    <ul>
        <li>林俊杰-被风吹过的下图</li> 
        <li>曲婉婷-在我的歌声里</li> 
        <li>许嵩-灰色头像</li>
    </ul> 
</div>

UI 元素状态伪类选择器

UI，是用户界面(User Interface)的意思。所谓的 UI 设计是指对软件的人机交互、操作逻辑、界面美观的综合设计。
UI 元素状态包括:可用、不可用、选中、未选中、获取焦点、失去焦点等。这些选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。UI 元素状态伪类选择器大多数都是针对表单元素来使用的。

                CSS3 UI 元素状态伪类选择器

:focus 选择器

:focus 选择器被用来指定“表单元素”获得光标焦点时使用的样式，主要在单行文本框 text、多行文本框 textarea 等表单元素获得焦点并输入文本时使用。

:checked 选择器

在表单元素中，单选按钮 radio 和复选框 checkbox 都具有“选中”和“未选中”状态。在 CSS3 中，我们可以通过使用:checked 选择器来定义选中时的 CSS 样式。
暂时只有 Opera 浏览器支持:checked 选择器。

::selection 选择器

在 CSS3 中，我们可以使用“::selection 选择器”来改变被选择的网页文本的显示效果。注意，“::selection 选择器”是双冒号。其实双冒号往往都是“伪元素”，而单冒号往往都是“伪类”。

:enabled 与:disabled 选择器

在 Web 表单中，有些表单元素(如输入框、密码框、复选框等)有“可用”和“不可用”这 2 种状态。默认情况下，这些表单元素都处在可用状态。
在 CSS3 中，我们可以使用:enabled 选择器和:disabled 选择器来分别设置表单元素的可用与不可用这两种状态的 CSS 样式。

:read-write 与:read-only 选择器

在 Web 表单中，有些表单元素(如输入框、文本域等)有“可读写”和“只读”这 2 种状态。默认情况下，这些表单元素都处在“可读写”状态。
在 CSS3 中，我们可以使用:read-write 选择器和:read-only 选择器来分别设置表单元素:read-only 选择器支持 Chrome, Safari 和 Opera。Firefox 和 Internet Explorer 不支持 :read-only 选择器。Firefox 支持 :-moz-read-only 选择器作为替代方案。的“可读写”与“只读”这两种状态的 CSS 样式。

::before 和::after 选择器

在 CSS3 中，我们可以使用::before 和::after 这两个选择器在元素前面或后面添加内容。这两个选择器常和"content 属性"配合使用，使用的场景最多的就是清除浮动和创建小图标。

CSS 伪元素选择器

用于向某些选择器设置特殊效果。

CSS 组合选择器

子选择器

即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

.food > li{
    border:1px solid red;
}

这行代码会使 class 名为 food 下的子元素 li 加入红色实线边框。

包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

.first span{color:red;}

子选择器(child selector)仅是指它的直接后代或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素

代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代，空格作用于元素的所有后代。

相邻选择器

相邻选择器只会命中符合条件的相邻的兄弟元素，使用“+”号。

如:

p+p{color:#f00;}

即设置与 p 元素相邻的 p 元素的颜色。

兄弟选择器

兄弟选择器会命中所有符合条件的兄弟元素，而不强制是紧邻的元素，使用“~”符号

p~p{color:#f00;}

群组选择器

群组选择器，就是同时对几个选择器进行相同的操作。语法:

h3,div,p,span{color:red;}

CSS继承

继承是一种规则，它允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。比如下面代码:如某种颜色应用于 p 标签，这个颜色设置不仅应用 p 标签，还应用于 p 标签中的所有子元素文本，这里子元素为 span 标签。

 p{color:red;}


 <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

有一些 css 样式是不具有继承性的。如 border:1px solid red;

CSS 优先级(特殊性)

CSS 的优先级也可以称为 CSS 的特殊性(specificity)或权值:对于每个样式表规则,浏览器都会计算选择器的特殊性,从而使元素属性声明在有冲突的情况下能够正确显示.

有的时候我们为同一个元素设置了不同的 CSS 样式代码，那么元素会启用哪一个 CSS 样式呢? 我们来看一下面的代码:

p{color:red;}

.first{color:green;}


<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p 和.first 都匹配到了 p 这个标签上，那么会显示哪种颜色呢?green 是正确的颜色，那么为什么呢?是因为浏览器是根据权值来判断使用哪种 css 样式的，权值高的就使用哪种 css 样式。
下面是权值的规则:

标签的权值为1,类选择符的权值为10，ID选择符的权值最高为100。

例如下面的代码:

CSS 层叠

层叠就是在 html 文件中对于同一个元素可以有多个 css 样式存在，当有相同权重的样式存在时，会根据这些 css 样式的前后顺序来决定，处于最后面的 css 样式会被应用。

最后 p 中的文本会设置为 green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

前面的 css 样式优先级就不难理解了: 内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部文件中)。

重要性(!important)

这时 p 段落中的文本会显示的 red 红色。
注意:!important 要写在分号的前面这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为:
浏览器默认的样式<网页制作者样式<用户自己设置的样式
但记住!important 优先级样式是个例外，权值高于用户自己设置的样式。

选择器