4.1 CSS的三种引入方式

行内样式

写在html文档之中，如下所示：

  1. <p style="font-size: 18px;font-weight: 700;color: blue;">
  2.   这是一个p标签，和第三个p标签样式一样
  3. </p>
  4. <p>这是一个中立的p标签</p>
  5. <p style="font-size: 18px;font-weight: 700;color: blue;">
  6.   这是一个p标签，和第一个p标签样式一样
  7. </p>

内部样式

将每一段中的CSS抽离出来放在head中。
格式入下：

  1. <style>
  2. p {
  3.   font-size: 16px;
  4.   color: #ffffff;
  5. }
  6. </style>

外部样式

  • 新建一个 index.css文件
  • 将html代码头部中的style标签内的样式全部拷贝过来;
  • 将复制的CSS样式粘贴进index.css文件中;
  • 建立HTML和css 文件的联系，即用link标签引入css文件

link标签

  1. <link rel="stylesheet" type="text/css" href="index.css" />
  1. rel属性：rel属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet值被所有浏览器支持，也就是说你只要记住一个值即可。

stylesheet的意思就是文档的外部样式表。

  1. type属性：type属性规定了被链接文档的MIME(多用途互联网邮件扩展类型)类型，type属性对应的最常见的值就是text/css，该类型描述样式表。
  2. href属性：href属性后跟的是要引入的链接地址。

CSS注释：
1.内部样式:

  1. <style>
  2. /* 写CSS的基础样式 */
  3. .base{
  4.   /* 基础字体大小 */
  5.   font-size: 14px;
  6.   /* 基础字体颜色 */
  7.   color:#000000;
  8. }
  9. </style>

2.外部样式：

  1. /* 写CSS的基础样式 */
  2. .base {
  3.   /* 基础字体大小 */
  4.   font-size: 14px;
  5.   /* 基础字体颜色 */
  6.   color: #000000;
  7. }

注释的快捷键为：选中要注释的内容，再同时按Ctrl+？。

4.2 常用选择器

标签选择器

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <title>标签选择器</title>
  4.     <style>
  5.       h3 {
  6.         font-size: 25px;
  7.         color: #330867;
  8.       }
  9.       p {
  10.         font-size: 14px;
  11.         line-height: 28px;
  12.         color: #4a5252;
  13.       }
  14.     </style>
  15.   </head>

选择器的层叠性

  1. h3 {
  2.   font-size: 25px;
  3.   color: #330867;
  4. }
  5. }
  6. h3 {
  7.   /*font-weight属性在之前的h3标签里没有写，那么这里就会添加新的效果*/
  8.   font-weight: 700;
  9.   /*color这个属性前面已经定义了，这里再写，就会覆盖前面的字体颜色*/
  10.   color: red;
  11. }

类选择器

定义：

  1. <p class="article">
  2.   class是定义类的关键字，article是类名，类名可以任意，但是要符合规范
  3. </p>

使用：

  1. .article {
  2.   color: red;
  3.   font-size: 14px;
  4. }

类选择器可以使用多个，例如。

  1. <p class="common color font-size">
  2.   common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小
  3. </p>

类选择器写在前面的类具有优先级。

ID选择器

定义：

  1. <p id="p-item">这是一段文字</p>

使用：

  1. #p-item {
  2.   font-size: 24px;
  3.   font-weight: 400;
  4. }

1.id选择器只能在文档里出现一次。 2.一个标签上不能定义多个id名。

4.3 高级选择器

1.后代选择器

  1. /* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */
  2. #password .box p{}
  3. /* 选择所有p标签内部的所有span标签 */
  4. p span{}
  5. /* 选择所有p标签内部的所有类名为spanItem的标签 */
  6. p .spanItem{}

2. 交集选择器

例子：

  1. <ul>
  2.     <li><a href="" class="special">电子产品</a></li>
  3.     <li><a href="">家居服饰</a></li>
  4.     <li><a href="">电竞手办</a></li>
  5.     <li><a href="" class="special">家装服务</a></li>
  6.     <li><a href="">房屋出租</a></li>
  7. </ul>
  1. ul li {
  2.     list-style: none;
  3.     font-size: 22px;
  4. }
  5. ul li a {
  6.     /* 去除a标签的下划线 */
  7.     text-decoration: none;
  8.     /* 这里的颜色一定要在a标签上设置，因为a标签默认会去设置字体颜色，会层叠掉默认的黑色 */
  9.     color: black;
  10. }
  11. ul li a.special {
  12.     color: orangered;
  13. }

3. 子选择器

  1. <p>
  2.     <span>Span 1. 在p标签内
  3.         <span>Span 2. 在p标签的span标签内</span>
  4.     </span>
  5. </p>
  6. <span>Span 3. 与p标签相邻</span>

使用后代选择器：

  1. span {
  2.     color: black;
  3. }
  4. p span {
  5.     color: orangered;
  6. }

p标签中所有span标签都使用p span样式。

使用子选择器：

  1. span {
  2.     color: black;
  3. }
  4. p>span {
  5.     color: orangered;
  6. }

p标签中仅第一层span标签使用p span样式。

4.并集选择器

给不同标签或者类名添加相同的样式，此时就用并集选择器。
例如：

  1. .box,p,h3,.phone{
  2.   color:red;
  3.   front-size:24px;
  4. }

4.4 选择器的优先级

单个选择器的优先级：

id选择器>类选择器>标签选择器
例子：
主体代码

  1. <p class="poem" id="ch-poem">百川东到海，何时复西归？</p>

CSS

  1. p {
  2.   color: blue;
  3. }
  4. //.poem {
  5.   color: red;
  6. } 
  7. //step1
  8. //#ch-poem {
  9.   color: purple;
  10. }
  11. //step2

一开始文字颜色是蓝色，增加step1之后文字颜色变为红色，再增加step2之后文字颜色变成粉色。

文字属性的继承性

子标签会继承父标签的属性

高级选择器的优先级

使用权重计算方法（不重要）

选择器 权重
标签选择器 1
类选择器 10
id选择器 100

例子1：
主体代码：

  1. <ul class="ul-item">
  2.   <li>
  3.     <p>文字的颜色到底是什么颜色？</p>
  4.   </li>
  5. </ul>

CSS：

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

此时的文字颜色是蓝色。 考虑权重是需要CSS代码进行选中才考虑，未选中时不考虑权重。以下代码为例。

主体代码：

  1. <ul class="ul-item">
  2.   <li>
  3.     <p>文字的颜色到底是什么颜色？</p>
  4.   </li>
  5. </ul>

CSS：

  1. .ul-item li {
  2.   color: blue;
  3. }
  4. p {
  5.   color: red;
  6. }

此时的字体颜色是红色。