css初识
CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。css提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
css三种引入方式
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
我们把style标签一般位于head标签中title标签之后；type="text/CSS"，type表示“类型”，text就是“纯文本”，css也是纯文本。
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
css选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
基础选择器
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
css选择器的语法，是key-value的形式；标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。标签选择器 可以把某一类标签全部选择出来；所有的标签都可以是选择器。
ID选择器
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
我们强调，id属性值应该是唯一的，所以id选择器只能选中一个标签。
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
类选择器可以针对你想要的所有标签，添加该类使用，非常灵活，其语法如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 。
另外，同一个标签可以使用多个类选择器，中间用空格隔开，如：
<div class="class-one class-two">测试</div>
类的命名，我们建议：
- 长名称或词组可以使用中横线来为选择器命名。
- 不建议使用“_”下划线来命名CSS选择器。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。
- 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关
我们在使用类选择器时，不要去试图用一个类型，把某个标签的所有样式写完，这个标签可以多携带几个类，共同完成这个标签的样式，使用类选择器，类内容尽量不要太大，要有“公共”的概念，能够让更多的标签使用。
怎么选择类和id选择器
我们一般在css上选择class选择器，id在特殊情况下使用在样式上，因为我们认为，id属性尽可能的交给js去使用，来控制html的行为。
总结：
- 标签选择器针对的是页面上的一类标签。
- ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。
- 类选择器可以被多种标签使用。直接在标签应用类选择器即可
通配符选择器
通配符 选择器用“*”号表示，能匹配页面中所有的元素。
通配符选择器，将匹配任何标签。其基本语法如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
css复合选择器
下面，我们来说一下css中的复合选择器
复合选择器包括：后代选择器，子代选择器，交集选择器，并集选择器和伪类选择器。
后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
后代选择器，描述的是一种祖先结构,也并不是一定紧挨着的，但他们保持着一种后代关系。
后代选择器.png
子代选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
如，
.demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
通俗一点来说，子代选择器，只选择自己的儿子
子代选择器.png
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，或者id选择器，两个选择器之间不能有空格，所谓交集选择器就是并且的意思
如， p.one 选择的是： 类名为 .one 的 段落标签。 如果后一个选择器id选择器则，如p#one，取交集的意思，选择的元素要求同时满足两个条件：必须是p标签，然后必须是one的标签
并集选择器
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。如， .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素
链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素
伪类选择器分为静态伪类和动态伪类。
（1）静态伪类：
:link 超链接点击之前
:visited 链接被访问过之后
（2）动态伪类：针对所有标签都适用的样式。
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
针对超链接，常用的四种伪类：
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
网友评论