CSS学习（未成稿）

本文是基于笔者在优课达学习的笔记，方便自己以及他人进行学习，如有错误敬请指正。
再次感谢每一个可以看到此文的人。
如果本本对你产生了帮助，请不要吝啬你点赞的小手哦~

CSS-美化文档

HTML内部添加样式

1. 在标签中添加声明

声明的关键字是style后面接等号（=）再接引号（""），即style=""

具体声明如下

<input type="text" placeholder="手机号码" style=""> 

• 声明位置不分先后 也就是代码块里面的绿字可以随意交换位置
• 与其他关键字之间用空格隔开

2. 在引号之间添加样式

<p style="font-size:14px;color:white"></p>

这段代码的意思就是：设置p标签中的字体大小为14px，颜色为白色。

在 CSS 中，样式是由属性和值组成，中间用冒号（:）隔开，用分号（;）收尾，其中属性可以理解为身高、体重，值可以理解为 1.8 米、60kg，在现实生活中我们用这样一对组合来描述人或者物，在 CSS 中，我们用这样一对组合来描述文字的粗细、大小、颜色等等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0YSkWQn-1613033817971)(!%5Bimage-20210208204447954%5D%28C:%5CUsers%5C17418%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210208204447954.png%29#pic_center)]

字体大小/字体粗细

1. 字体大小

​ 设置格式：font-size:36px;

font-size --> 字体的大小

36px --> 字体大小的尺寸

2. 字体加粗

​ 设置格式：font-weight:100;

设置文字粗细的时候，其值可以是 100，200，300，400，500，600，700，800，900 中的任何一个,或者可以用英文代替，normal（正常粗细），lighter(细)，bold（粗），bolder（更粗）

字体颜色/文字对齐方式

1. 颜色

1. 英文字母形式
   

2. 十六进制颜色

   十六进制颜色由#开头，后面跟三个数字，每个数字的范围为 00 ～ FF，每个数字代表一种颜色，最终的颜色由这三种颜色调和而成；

   

3. rgb 形式

   rgb 形式和十六进制的原理相同，其最终的颜色由三种颜色的深浅决定，即 r(red)，g(green)，b(blue)，每种颜色的范围为 0 ～ 255，代表这每种颜色的深浅，值越大越深；

4. rgba 形式

   rgba 形式相比 rgb 形式，多了一个 a，这里的 a 代表的是 Alpha(透明度)，a 的值在 0 ～ 1 之间，为了简化书写，也可以直接省略 0，写成.4，等同于 0.4。

   注意：以上四种表达式：

   1. 多数情况下建议使用十六进制表达方式；
   2. 调试的时候可以用英文字母形式，初期的调试就是随便设置一个颜色，查看区块是否存在，区块大小等，在盒模型中我们会遇到 gi；
   3. 如果要设置文字透明度或者背景透明度，就要用到rgba形式，在第八章我们会遇到。

2.文字对齐方式

text-align: center; 文字居中对齐 
text-align: left; 文字左对齐 
text-align: right; 文字右对齐

文字行高/字间距/字体

1. 行高

行高的设置格式：

line-height: 30px;

主要作用：使文字上下居中

使用方式：将文字的行高设置为与文字外面的举行高度大小一致即可

2. 字间距

字间距就是文字之间的间距，但是中文和英文的字间距是不一样的

• 英文的字间距是每个字母之间的距离，单词和单词之间的距离不属于字间距

• 中文是每个汉字之间的距离

字间距的设置格式：

letter-spacing: 30px;

3. 字体

字体的设置格式：

font-family: 'Goudy Bookletter 1911', sans-serif, Gill Sans Extrabold;

这段代码怎么去理解呢？页面加载以后会先去找代码中设置的字体，这里有三个备选的字体，浏览器会按顺序加载，首先看看"Goudy Bookletter 1911"字体在电脑上是否安装，如果没有安装，就去看第二个字体，如果还没有，就去看第三个字体是否已经安装，如果都没有安装，那么就只能用默认的微软字体，这个字体是所有电脑默认会安装的。

CSS-引入方式

CSS的三中引入方式

1. 行内样式

如上图所示：行内样式需要内嵌在每一个HTML标签中，可想而知，当我们有几百行HTML标签的时候，就需要写几百个style，实际上在前面设置字体样式的时候，你一定体会到了这种书写方式的繁琐，比如说我们要修改两个p标签，他们的样式明明是一样的，我们还不得不再去重写一次相同的CSS样式，例如：

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

因此，我们就要想办法把每一个标签中的CSS样式抽取出来，抽取成一整段，放在HTML文件中的某个位置。这时候我们就要去了解第二种CSS的引入方式–内部样式

2. 内部样式

抽离步骤：

1. 首先我们将每一个标签里的CSS样式抽取出来

2. 然后在head``标签里声明了一个`标签

3. 接下来将样式都放在了style标签里，注意，这里不是简单的粘贴复制。

   

4. 将相同标签的样式写在相同的大括号({})里，大括号前面加上标签名，形如：

p {
    
     
    font-size: 16px; 
    color: #ffffff; 
}

头部书写规则

• 不要忘记写声明标签>
• 样式要用花括号括起来
• 每个样式后面用分号结尾

3. 外部样式

随着代码量的逐渐增多，整个HTML文件就会呈现出头重脚轻的现象，即CSS代码要比HTML代码多的多，这样很不利于阅读和复查代码，更重要的是为了实现代码的分离，让HTML负责结构，CSS代码负责样式。 所以我们要对代码进行进一步的分离。

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

link（记住固定格式）

<link rel="stylesheet" type="text/css" href="index.css" />

常用选择选择器

1. 选择器的层叠性

在写CSS样式的时候，有时候因为粗心，之前写过的标签又会重新写一次，然后给{}里面添加样式，这样做可能会造成两种结果：

1. 添加新的效果（如果添加的是一个新属性）
2. 改变之前已经存在的效果（如果该属性之前就存在）

h3 {
    
    
  font-size: 25px;
  color: #330867;
}

h4 {
    
    
  font-size: 18px;
  color: #30cfd0;
}

p {
    
    
  font-size: 14px;
  line-height: 28px;
  color: #4a5252;
}
/*在这里写一个同名标签名h3,所以你只要关注“孟航沛”的变化即可*/
h3 {
    
    
  /*font-weight属性在之前的h3标签里没有写，那么这里就会添加新的效果*/
  font-weight: 700;
  /*color这个属性前面已经定义了，这里再写，就会覆盖前面的字体颜色*/
  color: red;
}

2. 类选择器

定义

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

class 是定义类的关键字，article 是类名，类名可以任意，但是要符合规范

使用

.article {
    
    
  color: red;
  font-size: 14px;
}

如果是内部样式，上面的代码就要写在<style></style>标签之间，如果是外部样式，直接写在.css文件中即可。

除此之外，一个标签上面还可以添加多个类名，类名之间要用空格隔开，就像这样婶的：

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

3. id 选择器

id 选择器与类选择器超级像

在标签中定义 id

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

使用id 选择器

#p-item {
    
    
  font-size: 24px;
  font-weight: 400;
}

1. id 选择器在文档中只会出现一次，像下面这种使用方式是不对的

<a href="#" id="link">点击进入详情</a>
<!-- link这个id名已经被使用，就不可以再次定义 -->
<a href="#" id="link">点击进入主页</a>

id 就像身份证号码一样，全国只能有一个，同样，id 选择器亦是如此，这里的 link 重复了。

2. 不能像类选择器一样，一个标签上定义多个 id 名，像下面这种写法是错误的：

<a href="#" id="link linkto">点击进入详情页</a>

高级选择器

常见高级选择器有4种

• 后代选择器
• 交集选择器
• 子选择器
• 并集选择器

1. 后代选择器（空格）

p a ----选择所有p标签内所有的a标签

后代选择器的书写规则：用空格隔开，例如：

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

后代

什么是后代？比如说，某某某是孔子的88代孙，那么某某某就是孔子的后代，在HTML中，随着页面复杂程度的增加，会出现很多标签嵌套（标签里面写标签）的现象，比如：

<ul>父
    <li>子
        <p>孙
            <span>曾孙
                <a href="">曾曾孙</a>
            </span>
        </p>
    </li>
</ul>

在这段代码中，标签和标签当中就形成了子代关系，a、span、p、li就是ul标签的后代，li既是ul的后代又是ul的子元素。 以上面的这段HTML代码为例，我要选中a标签，可以有很多办法：

/* 方法一： */
a{
    
    }
/* 方法二 */
ul a{
    
    }
/* 方法三 */
ul li p a{
    
    }
/* 方法四 */
ul li p span a{
    
    }

具体要用哪种方法呢？这是要根据具体情况（HTML的结构）来定的,比如说现在HTML的代码结构变了：

<ul>父
    <li>子
        <p class="p-one">孙
            <span>曾孙
                <a href="">曾曾孙1</a>
            </span>
        </p>
        <p class="p-two">孙
            <span>曾孙
                <a href="">曾曾孙2</a>
            </span>
        </p>
    </li>
</ul>

此时我们用上面的四种方法都会选到两个a标签，但是我们的目的是选中“曾曾孙1”，所以我们要在最开始出现重复标签的那一级来做区分，给这一级分别加上类名，或者你可以只给你需要的那个标签添加类名即可，此时我们要选中“曾曾孙1”可以这样做：

/* 方法一 */
ul li .p-one span a{
    
    }
/* 方法二 */
.p-one span a{
    
    }

2. 交集选择器

交集选择器的书写规则是：

a.special{
    
    }

<a href="#" class="special">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>

它的意思是，在所有a标签内，类名为special的标签。

举个例子吧：

实现效果如下：

核心代码如下：

<ul>
    <li><a href="" class="special">电子产品</a></li>
    <li><a href="">家居服饰</a></li>
    <li><a href="">电竞手办</a></li>
    <li><a href="" class="special">家装服务</a></li>
    <li><a href="">房屋出租</a></li>
</ul>

ul li {
    
    
    list-style: none;
    font-size: 22px;
}

ul li a {
    
    
    /* 去除a标签的下划线 */
    text-decoration: none;
    /* 这里的颜色一定要在a标签上设置，因为a标签默认会去设置字体颜色，会层叠掉默认的黑色 */
    color: black;
}

ul li a.special {
    
    
    color: orangered;
}

3. 子选择器

子选择器与后代选择器类似，不同的是后代选择器突出的是==“后代”，子选择器突出的是“子”==。

比如同样的HTML代码，但是用不同的选择器，得到的结果就就不同，HTML代码如下：

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

使用后代选择器

span {
    
    
    color: black;
}

p span {
    
    
    color: orangered;
}

得到的结果：

使用子选择器：

span {
    
    
    color: black;
}

p>span {
    
    
    color: orangered;
}

得到的结果：

4. 并集选择器

如果要给不同的标签，或者不同类名的标签添加相同的样式，此时就要用到并集选择器，并集选择器的规则是在标签名或者类名后面用逗号（,）隔开，例如：

.box,p,h3,.phone{
    
    }

并集选择器的作用是–“和”，上面这段代码的意思就是给类名为box、phone标签名为p、h3的标签添加相同的属性。

选择器的优先级

1. 单个选择器的优先级

​ id 选择器 > 类选择器 > 标签选择器

​ 太简单了，就不举例子了我觉得我记下来了

2. 文字属性的继承性

除了h标签，其它的标签内写了文字以后，默认会有相同的颜色、大小，这就是文字属性的继承性导致的，他们都继承了body标签的字体大小、颜色。

3. 高级选择器的优先级

• 权重的计算方法

  按照优先级越高，权重越大的规则，假设 id 选择器的权重为 100，类选择器的权重为 10，标签选择器的权重为 1

  权重不会进位！！

• 权重的应用

<ul class="ul-item">
  <li>
    <p>文字的颜色到底是什么颜色？</p>
  </li>
</ul>

ul li p {
    
    
  color: blue;
}
p {
    
    
  color: red;
}

结果：

点击查看

然后更有意思的是，有个特殊的东西，即选中。

代码

.ul-item li {
    
    
  color: blue;
}
p {
    
    
  color: red;
}

点击查看结果

在这里面，p直接选中了所修饰的代码块

重不会进位！！**

• 权重的应用

<ul class="ul-item">
  <li>
    <p>文字的颜色到底是什么颜色？</p>
  </li>
</ul>

ul li p {
    
    
  color: blue;
}
p {
    
    
  color: red;
}

结果：

点击查看

然后更有意思的是，有个特殊的东西，即选中。

代码

.ul-item li {
    
    
  color: blue;
}
p {
    
    
  color: red;
}

点击查看结果

在这里面，p直接选中了所修饰的代码块

所以颜色是红色！！！