CSS(1)

现在的互联网前端三层：

HTML 超文本标记语言 从语义的角度描述页面结构。

CSS 层叠式样式表 从审美的角度负责页面样式。

JS JavaScript 从交互的角度描述页面行为。

CSS整体感知

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。

1<style type="text/css">
2   p{
3       color:red;
4       font-size: 30px;
5       text-decoration: underline;
6       font-weight: bold;
7       text-align: center;
8       font-style: italic;
9   }
10  h1{
11      color:blue;
12      font-size: 50px;
13      font-weight: bold;
14      background-color: pink;
15  }
16</style>

我们写css的地方是style标签，就是“样式”的意思，写在head里面。
css也可以写在单独的文件里面，现在我们先写在style标签里面

<style type=”text/css”>
</style>

type表示“类型” ， text就是“纯文本”。css也是纯文本的。
css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

1   选择器{
2       k:v;
3       k:v;
4       k:v;
5       k:v;
6   }
7   选择器{
8       k:v;
9       k:v;
10      k:v;
11      k:v;
12  }

一些常见的属性

字符颜色

color:red;
color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制，不要着急，后几天讲。
sublime中的快捷键是c，然后tab

字号大小

font-size:40px;
font就是“字体”，size就是“尺寸”。px是“像素”。
单位必须加，不加不行。
sublime中的快捷键是fos，然后tab

背景颜色

background-color: blue;
background就是“背景”。
sublime中的快捷键是bgc，然后tab

加粗

font-weight: bold;
font是“字体” weight是“重量”的意思，bold粗。
sublime中的快捷键是fwb，然后tab

不加粗

font-weight: normal;
normal就是正常的意思
sublime中的快捷键是fwn，然后tab

斜体

font-style: italic;
italic就是“斜体”
sublime中的快捷键是fsi，然后tab

不斜体

font-style: normal;
sublime中的快捷键是fsn，然后tab

下划线

text-decoration: underline;
decoration就是“装饰”的意思。
sublime中的快捷键是tdu，然后tab

没有下划线

text-decoration:none;
sublime中的快捷键是tdn，然后tab

基础选择器

css写在head标签里面，容器style标签。
先写选择器，然后写大括号，大括号里面是样式。

1） 选择器，怎么选；
2） 属性，样式是什么；

标签选择器

注意的是：
1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input,
2） 无论这个标签藏的多深，一定能够被选择上,
3） 选择的所有，而不是一个。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。

id选择器

<p>我是段落1</p>
<p id="para2">我是段落2</p>
<p>我是段落3</p>

css：

<style type="text/css">
    #para2{
        color:red;
    }
</style>

id选择器的选择符是“#”。
任何的HTML标签都可以有id属性。表示这个标签的名字。

这个标签的名字，可以任取，但是：
1） 只能有字母、数字、下划线
2） 必须以字母开头
3） 不能和标签同名。比如id不能叫做body、img、a

一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。

一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义

类选择器

.就是类的符号。类的英语叫做class。

所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。

class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：

<h3>我是一个h3啊</h3>
<h3 class="teshu">我是一个h3啊</h3>
<h3>我是一个h3啊</h3>
<p>我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>

css里面用.来表示类：

.teshu{
    color: red;
}

同一个标签，可能同时属于多个类，用空格隔开：

<h3 class="teshu zhongyao">我是一个h3啊</h3>

这样，这个h3 就同时属于teshu类，也同时属于zhongyao类。

初学者常见的错误，就是写成了两个class：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

所以要总结两条：
1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2） 同一个标签可以同时携带多个类。

类的使用，能够决定一个人的css水平。
1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

到底用id还是用class？
答案：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

就是一个标签，可以同时被多种选择器选择，标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签，从而影响样式，这就是css的cascading“层叠式”的第一层含义。

css高级选择器

后代选择器

<style type="text/css">
    .div1 p{
        color:red;
    }
</style>

空格就表示后代，.div1 p就是.div1的后代所有的p。
强调一下，选择的是后代，不一定是儿子。

比如：

1       <div class="div1">
2           <ul>
3               <li>
4                   <p>段落</p>
5                   <p>段落</p>
6                   <p>段落</p>
7               </li>
8           </ul>
9       </div>

能够被下面的选择器选择上：

.div1 p{
    color:red;
}

所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。

空格可以多次出现。

.div1 .li2 p{
    color:red;
}

就是.div1里面的后代.li2里面的p。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
后代选择器，描述的是祖先结构。

交集选择器

h3.special{
    color:red;  
}

选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
交集选择器没有空格。
所以有没有空格不是一个意思。
div.red 和 div .red

交集选择器可以连续交（一般不要这么写）

1   h3.special.zhongyao{
2       color:red;
3   }

交集选择器，一般都是以标签名开头，比如div.haha 比如p.special.

并集选择器（分组选择器）

h3,li{
    color:red;
}

用逗号就表示并集。

通配符*

*就表示所有元素。

*{
    color:red;
}

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

一些CSS3选择器

兼容问题介绍

介绍一下浏览器：

IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。

windows xp 操作系统安装的IE6
windows vista 操作系统安装的IE7
windows 7 操作系统安装的IE8
windows 8 操作系统安装的IE9
windows10 操作系统安装的edge

浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。

浏览器市场份额

HTML5浏览器打分网站：
http://html5test.com/results/desktop.html

儿子选择器>

IE7开始兼容，IE6不兼容。

div>p{
    color:red;
}

div的儿子p。和div的后代p的截然不同。
能够选择：

<div>
    <p>我是div的儿子</p>
</div>

不能选择：

<div>
    <ul>
        <li>
            <p>我是div的重孙子</p>
        </li>
    </ul>
</div>

序选择器

IE8开始兼容；IE6、7都不兼容
选择第1个li：

<style type="text/css">
    ul li:first-child{
        color:red;
    }
</style>

选择最后一个1i：

ul li:last-child{
    color:blue;
}

由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：

1       <ul>
2           <li class="first">项目</li>
3           <li>项目</li>
4           <li>项目</li>
5           <li>项目</li>
6           <li>项目</li>
7           <li>项目</li>
8           <li>项目</li>
9           <li>项目</li>
10          <li>项目</li>
11          <li class="last">项目</li>
12      </ul>

用类选择器来选择第一个或者最后一个：

1           ul li.first{
2               color:red;
3           }
4   
5           ul li.last{
6               color:blue;
7           }

下一个兄弟选择器

IE7开始兼容，IE6不兼容。
+表示选择下一个兄弟

1       <style type="text/css">
2           h3+p{
3               color:red;
4           }
5       </style>

选择上的是h3元素后面紧挨着的第一个兄弟。

CSS的继承性和层叠性

继承性

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
哪些属性能继承？
color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：

1   body{
2       color:gray;
3       font-size:14px;
4   }

继承性是从自己开始，直到最小的元素。

层叠性

层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

CSS像艺术家一样优雅，像工程师一样严谨。

当选择器，选择上了某个元素的时候，那么要这么统计权重：
id的数量，类的数量，标签的数量
不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！

如果权重一样，那么以后出现的为准。

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

权重问题大总结：

1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。

2）如果没有选中，那么权重是0。如果大家都是0，就近原则。如果一样近，则又来比较权重，谁大听谁的，如果一样，听后写的为准。