今天我们简单的聊聊CSS3（1）

今天我们来简单说说前端的3架马车之一的CSS。

• CSS全称Cascading Style Sheets<层叠样式表>

如果说HTML是来给房子打地基的话，CSS就是初步装修。

也可以说是HTML决定了我们网页页面的结构，那CSS就是来定义HTML的样式，使页面更好看。

 

如何使我们HTML代码中引入CSS呢？

这里列举2种，不过推荐第一种

• 外部样式表引用CSS         《推荐用外部样式表》

在head标签内写  <link rel="stylesheet" href="">
href=''''内填入CSS的文件地址 
特点：便于代码复用
           便于程序员跟搜索引擎阅读

• 内部样式表引用CSS        

在head标签内写   <style></style>
在内填入你想用的样式 
特点：不便于代码复用
           不便于程序员跟搜索引擎阅读

• CSS术语

CSS是由CSS的注释与CSS规则组成.

• CSS注释        书写格式：/* 注释内容 */          注释快捷键  ctrl+?

-注释主要描述代码功能，使浏览器解析CSS代码时会忽略注释内容,方便我们开发者跟维护者观看

• CSS规则        是选择器+声明块组成

每个规则制定了：对那些元素应用什么样式

• CSS选择器

元素选择器：标记名   {    声明块    }

类选择器：.类名    {     声明块     }

适用范围：选中所有class属性值相同的标签

id选择器:  #id  {       声明块       }     （不推荐使用）

在所有HTML文档中，元素得id值必须唯一

组合选择器：元素 ,  元素           （并集选择器）

表示两元素都用一个声明块（相当于两个元素的缩写）

比较特殊性时要分开计算

层级选择器

1. 子级选择器：父元素A>子元素B     {    声明块      }
2. 后代选择器：祖先元素   空格   后代元素      {      声明块       }
3. 兄弟选择器：兄弟元素A+兄弟元素B   {         声明块        }  （AB两个元素之间没有任何标签，B元素必须在A元素后边）
4. 通用选择器：兄弟元素A~兄弟元素B   {         声明块        }  （AB两个元素之间没有任何标签，B元素必须在A元素后边，可以选择多个）

• 伪类选择器

结构伪类选择器

选中第N个元素            书写格式：元素名:nth-of-type(选中元素的位置第几个)

适用场景：所有兄弟元素可以不是相同的标签名

选中最后一个元素         书写格式：元素名：nth-last-of-type(位置号码)

选中偶数项元素             书写格式：元素名：nth-last-of-type(2n或者even)

选中奇数项元素             书写格式：元素名：nth-last-of-type(2n+1或者odd)

选中前n个元素               书写格式：元素名：nth-last-of-type(-n+个数)

否定伪类选择器              书写格式：元素名：not(否定的内容)（除去否定的元素，其他的全选）

否定伪类选择器              书写格式： 元素名：not（否定的元素1）：not (否定的元素2)

动态伪类选择器               

未访问                             书写格式：      :link

已访问                              书写格式：     :visited

鼠标悬停                          书写格式：     :hover

点击时                               书写格式：    ：active

书写顺写1：：link/:visited/:hover/:active
书写顺写2：:visited/：link/:hover/:active

属性选择器
书写格式：元素名 [ 属性 ]
书写格式：元素名 [属性名^=”部分属性值” ]
表示以###开头的属性值
p[name^="F"]{
    color:red;
}

书写格式：元素名 [属性名$=”部分属性值” ]
表示以###结尾的属性值