前端与 CSS（1） | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第2天。

本堂课重点内容：

CSS 代码构成及使用方法
CSS 选择器
CSS 选择器的特异度、继承、求值过程

一、CSS的使用

CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素

由两个主要的部分构成：选择器（需要改变样式的 HTML 元素），以及一条或多条声明

 p{
     color:red;
     text-align:center;
 }

插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)

优先级：就近原则

外部样式表

使用标签链接到样式表。标签在（文档的）头部：

 <head>
     <link rel="stylesheet" href="./css/style.css">
 </head>

内部样式表

可以使用标签在文档头部定义内部样式表：

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

内联样式

在相关的标签内使用style属性。style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

 <p style="color:sienna;margin-left:20px">这是一个段落。</p>

二、选择器Selector

找出页面中的元素，以便给他们设置样式，使用多种方式选择元素
- 按照标签名、类名或 id
- 按照属性
- 按照DOM树中的位置

通配选择器

使用*为所有元素加上样式

 <h1>This is heading</h1>
 <p>this is some paragraph.</p>
 
 <style>
 * {
   color: red;
   font-size: 20px;
 }
 </style>

标签选择器

标签选择器会选择到页面上所有的该标签元素

为所有h1标签添加以下效果

 h1{
     color: red;    /*字体颜色为红色*/
     background-color: aqua;   /*背景颜色为湖绿色*/
     border-radius: 10px;   /*边框圆角*/
 }

class选择器

class 选择器用于描述一类元素的样式

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 .号显示

为所有 center 类的 HTML 元素设置居中

 .center{
     text-align:center;
 }

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定样式

HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。

 #app{
     text-align:center;
     color:red;
 }

如果有很多具有相同样式的元素，可以使用分组选择器，每个选择器用逗号分隔

 h1,h2,p{
     color:green;
 }

伪类(pseudo-classes)

不基于标签和属性定位元素，几种伪类：
- 状态伪类
- 状态伪类

anchor伪类

不同状态都可以以不同的方式显示

 a:link {color:#FF0000;}     /* 未访问的链接 */
 a:visited {color:#00FF00;}  /* 已访问的链接 */
 a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
 a:active {color:#0000FF;}   /* 已选中的链接 */

first-child 伪类

可以使用:first-child伪类来选择父元素的第一个子元素。

 /*选择器匹配作为任何元素的第一个子元素的<p>元素*/
 p:first-child{
     color:blue;
 }
 /*选择相匹配的所有<p>元素的第一个<i>元素*/
 p > i:first-child{
     color:blue;
 }
 /*选择器匹配所有作为元素的第一个子元素的<p>元素中的所有<i>元素*/
 p:first-child i{
     color:blue;
 }

nth-child伪类

可以使用:nth-child(n)来选择所有某一元素的父元素的第n个子元素

 /*选择所有 p 元素的父元素的第二个子元素*/
 p:nth-child(2){
     color:blue;
 }

其他

三、特异度、继承、求值过程

此部分参考了 blog.csdn.net/LAinKH/arti…

特异度

特异度对优先级产生影响

上部分：id 选择器有1个（#nav），类与伪类共有2个（.list 与 :link）,元素与伪元素共有 2个（li 与 a）

所以特异度为 122

下部分：id 选择器有0个，类与伪类共有2个（.hd 与 .links），元素与伪元素共有 2个（ul 与 a）

所以特异度为 22。

上部分特异度（122）大于下部分的特异度（22）。所以，在 2 中的选择器的优先级更高。

继承

某些属性会继承⽗元素的计算值，除⾮显式指定⼀个值

一般文字、字体相关属性都可以继承，盒模型宽度、高度、边距等都不可以继承

1、显式继承

如果一个属性不可继承，我们可以使用 inherit 这个关键字让它能从父级继承。

 // box-sizing 这个属性是不可以继承的。这样设置之后，这个属性就要从父级开始读取。
 
 * {
   box-sizing: inherit;
   }
 
 // 如果元素不单独设置 box-sizing 这个属性，那么所有元素都继承 html 的 box-sizing 属性。
 html {
   box-sizing: border-box;
 }

2、初始值

在 CSS 中，每一个属性都有一个初始值。例如：

 // background-color 的初始值为 transparent
 background-color: transparent;
 
 // margin-left 的初始值为 0
 margin-left: 0;

我们也可以使用 initial 这个关键字显式重置为初始值。

 background-color: initial
 // 此时的 background-color 为 transparent;