关于css:CSS简介与选择器

1.CSS3

• 什么是 CSS

  CSS (Cascading Style Sheets) 层叠样式表，是一个用于润饰文档（能够是标记语言 HTML，也能够是 XML 或者 SVN）的语言，能够将文档以更优雅的模式出现给用户。

• HTML 和 CSS 之间的关系？

  HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，能够蕴含文字、图片、视频等。CSS 款式是体现。就像网页的外衣。比方，题目字体、色彩变动，或为题目退出背景图片、边框等。所有这些用来扭转内容外观的货色称之为体现。HTML 就像是一个人，而 CSS 就像是衣服和化妆品，用来装璜 HTML。

• 通过标签来批改款式的毛病:

  须要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有成果。当需要变更时咱们须要批改大量的代码能力满足现有的需要。HTML 只有一个作用就是用来增加语义。

• 通过 CSS 来批改款式有什么益处?

  不必记忆哪些属性属于哪个标签。当需要变更时咱们不须要批改大量的代码就能够满足需要。在前端开发中 CSS 只有一个作用, 就是用来批改款式。

2. 语法

2.1.CSS 申明（CSS declarations）

​ CSS 语言的外围性能就是为特定的属性设定特定的值，CSS 引擎通过计算出申明的每个属性来显示元素。CSS 的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都实用于同一个属性，不同的属性有一系列不同的值。

2.2.CSS 申明块（CSS declaration blocks）

将多个 CSS 申明写在一起，每个 CSS 申明通过“;”分隔开，最初一个 css 申明无需应用“;”分隔开。应用“{”“}”将多个 CSS 申明括起来，这样就形成了一个 CSS 申明块。

2.3.CSS 规定集

选择器（Selector）HTML 元素的名称位于规定集开始。它抉择了一个或多个须要增加款式的元素（在这个例子中就是 p 元素）。要给不同元素增加款式只须要更改选择器就行了。

申明（Declaration）一个独自的规定，如 color: red; 用来指定增加款式元素的属性。

属性（Properties）扭转 HTML 元素款式的路径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定批改哪个属性以扭转规定。

属性的值（Property value）在属性的左边，冒号前面即属性的值，它从指定属性的泛滥外观中抉择一个值（咱们除了 red 之外还有很多属性值能够用于 color）。

留神其余重要的语法：每个规定集（除了选择器的局部）都应该蕴含在成对的大括号里（{}）。在每个申明里要用冒号（:）将属性与属性值分隔开。在每个规定集里要用分号（;）将各个申明分隔开。

2.4.CSS 可读性

空白（White space）

空白意味着理论空格、制表符和新行，能够增加空白使样式表更加可读。

正文（Comments）

/ 这里就是 CSS 的正文 /

速记写法（Shorthand）

相似于 font，background，padding，border，margin 这些都被称为速记属性。

这些属性容许在一行中写多个属性值。速记属性能够节省时间，使代码整洁。

例如：

border:1px solid red;

background-color:red;

padding: 10px 15px 15px 5px; 等价于 padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;

3.CSS 的引入形式

– 内联款式(行内款式)

毛病：款式与构造冗余

长处：优先级较高

内联样式表就是把 css 代码间接写在现有的 HTML 标签中，具体的应用办法如上面所示：

<div style="color:red"> 设置文字的色彩为红色 </div>

这里要留神：款式的内容写在元素的开始标签里，并且 css 款式代码要写在 style=”” 双引号中，如果有多条 css 款式代码设置能够写在一起，两头用分号隔开。多个 css 款式写在一起的成果如上面所示：

<div style="color:red;font-size:14px">
    设置字体色彩为红色，并且字体大小为 14px
</div>

这种款式只会对以后标签起作用，在测试的时候能够应用，不能对款式进行复用，不不便前期保护，不举荐应用

– 外部样式表

毛病：款式的复用率较低

长处：款式与构造拆散

将样式表编写到 head 中的 style 标签中

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

应用外部样式表，进一步将体现和构造拆散，能够同时为多个元素设置款式，不便前期的保护
留神点:

-style 标签要写在 head 标签的开始标签和完结标签之间(也就是和 title 标签是兄弟关系)

​ -style 标签中的 type 属性其实能够不必写, 默认就是 type=”text/css”

​ - 设置款式时必须依照固定的格局来设置. key: value; 其中: 不能省略, 分号大多数状况下也不能省略

– 内部样式表

长处：款式与构造拆散，解耦；款式的复用率高（框架: 例如 bootstrap），共用，定义好的 css 文件能够利用到多个页面中。

1. 将样式表编写到内部的 CSS 文件中，而后通过 link 标签将内部文件引入

<link rel="stylesheet" type="text/css" href="文件的门路"/>

将款式编写到内部样式表中，能够在不同的页面中应用同一个样式表，齐全将体现和构造拆散，不便前期的保护，举荐应用的形式

2.@import url()，还可通过 import 形式导入 CSS 文件

@import 引入形式会先加载 html，再加载 css；当网络环境较差时，会出导致页面成果较差的景象，所以该形式不倡议应用；

<style>
    /* 要写在 style 标签的最后面，否则不会失效 或者间接在内部 css 文件中间接应用 */
  @import url('./style.css');
</style>

– 引入形式的优先级

行内款式 > 内联款式 / 内部引入

就近准则：哪一种设置形式间隔元素最近，谁的优先级更高；

– CSS 怎么学?

CSS 的学习一共分为两大部分, 一个是 CSS 的选择器, 另一个是 CSS 的属性.

4.CSS 选择器

– 标签选择器

​ 作用: 依据指定的标签名称, 在以后界面中找到所有该名称的标签, 而后设置属性
​ 格局:
​ 标签名称{
​ 属性: 值;
​ }
​ 留神点:
​ 1. 标签选择器选中的是以后界面中所有的标签, 而不能独自选中某一个标签
​ 2. 标签选择器无论标签藏得多深都能选中
​ 3. 只有是 HTML 中的标签就能够作为标签选择器(h/a/img/ul/ol/dl/input….)

– id 选择器

​ 作用: 依据指定的 id 名称找到对应的标签, 而后设置属性
​ 格局:
​ #id 名称{
​ 属性: 值;
​ }
​ 留神点:
​ 1. 每个 HTML 标签都有一个属性叫做 id, 也就是说每个标签都能够设置 id
​ 2. 在同一个界面中 id 的名称是不能够反复的
​ 3. 在编写 id 选择器时肯定要在 id 名称后面加上 #
​ 4.id 的名称是有肯定的标准的
​ 4.1 id 的名称只能由字母 / 数字 / 下划线，a-z 0-9 _
​ 4.2 id 名称不能以数字结尾
​ 4.3 id 名称不能是 HTML 标签的名称，不能是 a h1 img input …
​ 5. 在企业开发中个别状况下如果仅仅是为了设置款式, 咱们不会应用 id , 因为 id 是留给 js 应用的

– 类选择器

​ 作用: 依据指定的类名称找到对应的标签, 而后设置属性
​ 格局:
​ . 类名{
​ 属性: 值;
​ }

​ 留神点:
​ 1. 每个 HTML 标签都有一个属性叫做 class, 也就是说每个标签都能够设置类名

        2. 在同一个界面中 class 的名称是能够反复的

​ 3. 在编写 class 选择器时肯定要在 class 名称后面加上.
​ 4. 类名的命名标准和 id 名称的命名标准一样

        5. 类名就是专门用来给 CSS 设置款式的

​ 6. 在 HTML 中每个标签能够同时绑定多个类名
​ 格局:
​ < 标签名称 class=” 类名 1 类名 2 …”>
​ 谬误的写法:

       <p class="para1" class="para2">

​ 7.id 和 class 的区别?
​ 7.1 id 相当于人的身份证不能够反复
​ class 相当于人的名称能够反复

​ 7.2 一个 HTML 标签只能绑定一个 id 名称
​ 一个 HTML 标签能够绑定多个 class 名称

​ 8.id 选择器和 class 选择器区别?
​ id 选择器是以 #结尾
​ class 选择器是以. 结尾

​ 9. 在企业开发中到底用 id 选择器还是用 class 选择器?
​ id 个别状况下是给 js 应用的, 所以除非非凡状况, 否则不要应用 id 去设置款式

​ 10. 在企业开发中一个开发人员对类的应用能够看出这个开发人员的技术水平
​ 个别状况下在企业开发中要重视冗余代码的抽取, 能够将一些公共的代码抽取到一个类选择器中, 而后 让标签和这个类选择器绑定即可

– 后辈选择器

​ 作用: 找到指定标签的所有特定的后辈标签, 设置属性
​ 格局:
​ 标签名称 1 标签名称 2{
​ 属性: 值;
​ }
​ 先找到所有名称叫做 ” 标签名称 1 ″ 的标签, 而后再在这个标签上面去查找所有名称叫做 ” 标签名称 2 ″ 的标签, 而后在设置属性
​ 例如：div p{}

​ 留神点:
​ 1. 后辈选择器必须用空格隔开
​ 2. 后辈不仅仅是儿子, 也包含孙子 / 重孙子, 只有最终是放到指定标签中的都是后辈
​ 3. 后辈选择器不仅仅能够应用标签名称, 还能够应用其它选择器
​ 4. 后辈选择器能够通过空格始终延续下去

– 子元素选择器

​ 作用: 找到指定标签中所有特定的间接子元素, 而后设置属性
​ 格局:
​ 标签名称 1 > 标签名称 2{
​ 属性: 值;
​ }

​ 留神点:
​ 1. 子元素选择器只会查找儿子, 不会查找其余被嵌套的标签
​ 2. 子元素选择器之间须要用 > 符号连贯, 并且不能有空格
​ 3. 子元素选择器不仅仅能够应用标签名称, 还能够应用其它选择器
​ 4. 子元素选择器能够通过 > 符号始终延续下去

​ 5. 后辈选择器和子元素选择器之间的区别?
​ - 后辈选择器应用空格作为连贯符号
​ 子元素选择器应用 > 作为连贯符号
​ - 后辈选择器会选中指定标签中, 所有的特定后辈标签, 也就是会选中儿子 / 孙子 …, 只有是被放到指定标 签中的特 定标签都会被选中
​ 子元素选择器只会选中指定标签中, 所有的特定的间接标签, 也就是只会选中特定的儿子标签

​ 6. 后辈选择器和子元素选择器之间的共同点
​ - 后辈选择器和子元素选择器都能够应用标签名称 /id 名称 /class 名称来作为选择器
​ - 后辈选择器和子元素选择器都能够通过各自的连贯符号始终延续下去
​ 选择器 1 > 选择器 2 > 选择器 3 > 选择器 4{}
​ 7. 在企业开发中如何抉择
​ 如果想选中指定标签中的所有特定的标签, 那么就应用后辈选择器
​ 如果只想选中指定标签中的所有特定儿子标签, 那么就应用子元素选择器

– 交加选择器

​ 作用: 给所有选择器选中的标签中, 相交的那局部标签设置属性
​ 格局:
​ 选择器 1 选择器 2{
​ 属性: 值;
​ }
​ 留神点:
​ 1. 选择器和选择器之间没有任何的连贯符号
​ 2. 选择器能够应用标签名称 /id 名称 /class 名称
​ 3. 交加选择器仅仅作为理解, 企业开发中用的并不多

– 并集选择器

​ 作用: 给所有选择器选中的标签设置属性
​ 格局:
​ 选择器 1, 选择器 2{
​ 属性: 值;
​ }
​ 留神点:
​ 1. 并集选择器必须应用, 来连贯
​ 2. 选择器能够应用标签名称 /id 名称 /class 名称

– 兄弟选择器

​ 1. 相邻兄弟选择器 CSS2
​ 作用: 给指定选择器前面紧跟的那个选择器选中的标签设置属性
​ 格局:
​ 选择器 1 + 选择器 2{
​ 属性: 值;
​ }
​ 留神点:
​ 1. 相邻兄弟选择器必须通过 + 连贯
​ 2. 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

​ 2. 通用兄弟选择器 CSS3
​ 作用: 给指定选择器前面的所有选择器选中的所有标签设置属性
​ 格局:
​ 选择器 1~ 选择器 2{
​ 属性: 值;
​ }

    留神点:

​ 1. 通用兄弟选择器必须用~ 连贯
​ 2. 通用兄弟选择器选中的是指定选择器前面某个选择器选中的所有标签, 无论有没有被隔开都能够选中

– 伪类选择器

​ 伪类以 ”:” 结尾，用在选择器后，用于指明元素在某种非凡的状态下能力被选中

– 序选择器（构造伪类选择器）

​ CSS3 中新增的选择器最具代表性的就是序选择器
​ 1. 同级别中的第几个
​ :first-child 选中同级别中的第一个标签
​ :last-child 选中同级别中的最初一个标签
​ :nth-child(n) 选中同级别中的第 n 个标签
​ :nth-child(odd) 选中同级别中的所有奇数
​ :nth-child(even) 选中同级别中的所有偶数
​ :nth-child(xn+y) x 和 y 是用户自定义的, 而 n 是一个计数器, 从 0 开始递增

​ 例如 (3n+1) 别离对应 1,4,7…..
​ :nth-last-child(n) 选中同级别中的倒数第 n 个标签
​ :only-child 选中父元素仅有的一个子元素 E。仅有一个子元素时失效
​ 留神点: 不辨别类型
​
​ 2. 同级别同类型中的第几个
​ :first-of-type 选中同级别中同类型的第一个标签
​ :last-of-type 选中同级别中同类型的最初一个标签
​ :nth-of-type(n) 选中同级别中同类型的第 n 个标签
​ :nth-last-of-type(n) 选中同级别中同类型的倒数第 n 个标签
​ :only-of-type 选中父元素的特定类型的惟一子元素

– 动静伪类选择器

​ E:link（链接伪类选择器）：抉择匹配的 E 元素，而且匹配元素被定义了超链接并未被拜访过。罕用于链接 描点上
​ E:visited（链接伪类选择器）：抉择匹配的 E 元素，而且匹配元素被定义了超链接并已被拜访过。罕用于 链接描点上
​ E:active（用户行为选择器）：抉择匹配的 E 元素，且匹配元素被激活。罕用于链接描点和按钮上
​ E:hover（用户行为选择器）：抉择匹配的 E 元素，且用户鼠标停留在元素 E 上。IE6 及以下浏览器仅反对 a:hover

– a 标签的伪类选择器

​ 1. 通过咱们的察看发现 a 标签存在肯定的状态
​ 1.1 默认状态, 从未被拜访过
​ 1.2 被拜访过的状态
​ 1.3 鼠标长按状态
​ 1.4 鼠标悬停在 a 标签上状态
​ 2. 格局
​ :link 批改从未被拜访过状态下的款式
​ :visited 批改被拜访过的状态下的款式
​ :hover 批改鼠标悬停在 a 标签上状态下的款式
​ :active 批改鼠标长按状态下的款式
​ 3. 留神点
​ 3.1 a 标签的伪类选择器能够独自呈现也能够一起呈现
​ 3.2 a 标签的伪类选择器如果一起呈现, 那么有严格的程序要求
​ 默认状态:link-> 被拜访状态:visited-> 鼠标悬停状态:hover-> 鼠标长按状态:active
​ 编写的程序必须要恪守爱恨准则 love hate
​ 3.3 如果默认状态的款式和被拜访过状态的款式一样, 那么能够缩写

/* 简写格局 */
a{color: green;}
/* link: 和 :visited 款式一样，能够写成以上的简写格局，代码量减少，开发效率进步 */
/*a:link{*/
    /*color: green;*/
/*}*/
/*a:visited{*/
    /*color: green;*/
/*}*/

– 否定伪类

​ 作用：能够从已选中的元素中剔除出某些元素
​ 语法：
​ :not(选择器)
​ 例如:
​ p:not(.hello){
​ background-color: yellow;
​ }

– 伪元素选择器

​ 应用伪元素来示意元素中的一些非凡的地位
​ ::after
​ 示意元素的最初边的局部
​ 个别须要联合 content 这个款式一起应用，
​ 通过 content 能够向 after 的地位增加一些内容

    ::before

​ 示意元素最前边的局部
​ 个别须要联合 content 这个款式一起应用，
​ 通过 content 能够向 before 的地位增加一些内容
​ ::first-letter
​ 为第一个字符来设置一个款式
​ ::first-line
​ 为第一行设置一个款式

– 属性选择器

​ 作用: 依据指定的属性名称找到对应的标签, 而后设置属性
​ 格局:
​ [attribute]

​ [attribute=value]
​ 作用: 找到有指定属性, 并且属性的取值等于 value 的标签, 而后设置属性
​ 最常见的利用场景, 就是用于辨别 input 属性

input[type=password]{}
<input type="text" name=""id="">
<input type="password" name=""id="">

​ - 属性的取值是以什么结尾的
​ [attribute|=value] CSS2
​ [attribute^=value] CSS3
​ 两者之间的区别:
​ CSS2 中的只能找到 value 结尾, 并且 value 是被 - 和其它内容隔开的
​ CSS3 中的只有是以 value 结尾的都能够找到, 无论有没有被 - 隔开

​ - 属性的取值是以什么结尾的
​ [attribute$=value] CSS3

​ - 属性的取值是否蕴含某个特定的值得
​ [attribute~=value] CSS2
​ [attribute*=value] CSS3
​ 两者之间的区别:
​ CSS2 中的只能找到独立的单词, 也就是蕴含 value, 并且 value 是被空格隔开的
​ CSS3 中的只有蕴含 value 就能够找到

– 通配符选择器

​ 作用: 给以后界面上所有的标签设置属性
​ 格局:
​ *{
​ 属性: 值;
​ }
​ 留神点:
​ 因为通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果以后界面上 的标签比拟多, 那么性能就会比拟差, 所以在企业开发中个别不会应用通配符选择器

– 组合选择器

​ 多个选择器组合应用。例如 “div.one” 示意 class 为 one 的 div 元素

5.CSS 三大个性

– 继承性

​ 作用: 给父元素设置一些属性, 子元素也能够应用, 这个咱们就称之为继承性
​ 留神点:
​ 1. 并不是所有的属性都能够继承, 只有以 color/font-/text-/line- 结尾的属性才能够继承
​ 2. 在 CSS 的继承中不仅仅是儿子能够继承, 只有是后辈都能够继承
​ 3. 继承性中的特殊性
​ 3.1 a 标签的文字色彩和下划线是不能继承的
​ 3.2 h 标签的文字大小是不能继承的

​ 利用场景:
​ 个别用于设置网页上的一些共性信息, 例如网页的文字色彩, 字体, 文字大小等内容

– 层叠性

​ 作用: 层叠性就是 CSS 解决抵触的一种能力
​ 留神点:

        层叠性只有在多个选择器选中 "同一个标签", 而后又设置了 "雷同的属性", 才会产生层叠性

– 优先级

​ 作用: 当多个选择器选中同一个标签, 并且给同一个标签设置雷同的属性时, 如何层叠就由优先级来确定

– 优先级判断的三种形式

​ - 间接选中就是指继承
​ 如果是间接选中, 那么就是谁离指标标签比拟近就听谁的

​ - 雷同选择器(间接选中)
​ 如果都是间接选中, 并且都是同类型的选择器, 那么就是谁写在前面就听谁的

​ - 不同选择器(间接选中)
​ 如果都是间接选中, 并且不是雷同类型的选择器, 那么就会依照选择器的优先级来层叠
​ id> 类 > 标签 > 通配符 > 继承 > 浏览器默认

- 优先级之!important

​ 作用: 用于晋升某个间接选中标签的选择器中的某个属性的优先级的, 能够将被指定的属性的优先级晋升 为最高

​ 留神点:
​ 1.!important 只能用于间接选中, 不能用于间接选中
​ 2. 通配符选择器选中的标签也是间接选中的
​ 3.!important 只能晋升被指定的属性的优先级, 其它的属性的优先级不会被晋升
​ 4.!important 必须写在属性值得分号后面
​ 5.!important 后面的感叹号不能省略
​ 6. 然而个别倡议不应用 ”!important”, 因为它会扭转级联的工作形式，使得调试变得艰难。

– 优先级权重

​ 作用: 当多个选择器混合在一起应用时, 咱们能够通过计算权重来判断谁的优先级最高

​ - 权重的计算规定
​ 内联款式，如: style=”…”，权值为 1000。
​ ID 选择器，如：#content，权值为 0100。
​ 类，伪类、属性选择器，如.content，权值为 0010。
​ 标签选择器、伪元素选择器，如 div p，权值为 0001。
​ 通配符、复合选择器（+、>、~ 等）、否定伪类（：not）没有影响，权值为 0000。
​ 继承的款式没有权值

​ - 首先先计算选择器中有多少个 id, id 多的选择器优先级最高
​ - 如果 id 的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
​ - 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
​ - 如果 id 个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会持续往下计算了, 那么此时谁写 在前面听谁的

​ 也就是说优先级如果一样, 那么谁写在前面听谁的

​ 留神点:
​ 1. 只有选择器是间接选中标签的才须要计算权重, 否则肯定会听间接选中的选择器的