前端基础知识之CSS（引用方式、选择器、单位、颜色、文字）（二）

Nyingchi-X

已于 2022-07-21 15:12:36 修改

阅读量152

点赞数

分类专栏： # html&css 文章标签： css 前端

于 2021-07-27 08:31:05 首次发布

本文链接：https://blog.csdn.net/qq_48617322/article/details/119102984

版权

html&css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

只作为笔记记录，不算专业，如有错误欢迎指正！

一、CSS简介

css层叠样式表(Cascading Style Sheets)
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层，总之一句话，CSS用来设置网页中元素的样式

1.CSS的基本语法:

选择器声明块
选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素

声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾
代码示范：

 p{color: red;
   font-size: 40px;}
 h1{
   color: green;}

2.CSS的引用方式

内联样式（行内样式）：
在标签内部通过style属性来设置元素的样式
注意：开发时绝对不要使用内联样式

优点：优先级较高
缺点：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

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

缺点：样式的复用率较低
优点：样式与结构分离

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

外部样式表

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

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap），共用，定义好的css文件可以应用到多个页面中。

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

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式。

2.@import url()，还可通过import方式导入CSS文件
@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

缺点：优先加载html 再加载css
兼容性较差 ie5+
属于css

html页面中

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

某个css文件中

@import url('./style1.css');
div {
    font-weight: bold;
    color: yellow;
}

引入方式的优先级

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

二、CSS选择器

（一）常用选择器

1.元素选择器

作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

2.id选择器

作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
部分代码示范：

<head>
  <style>
#red{    color: red;} 
    </style>
  </head>
<body>
     <p id="red">aaaaa</p>
</body>

3 .类选择器

作用：根据元素的class属性值选中一组元素
语法：.class属性值
class 是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
部分代码示范：

<head>
  <style>
.red{    color: red;} 
    </style>
  </head>
<body>
	  <h class="blue">hhh</p>
      <p class="red">aaaaa</p>
</body>

4.通配选择器

作用：选中页面中的所有元素
语法: *
部分代码示范：

*{color: red;}

（二）复合选择器

1. 交集选择器

作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
部分代码示范：

 <head>
  <style>
		div.red{font-size: 30px;}
        .a.b.c{color: blue}
        div#box1{}
    </style>
  </head>
<body>
	  <div class="red">hhh</p>
      <p id="box1">aaaaa</p>
</body>

2.选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}
部分代码示范：

<head>
  <style>
		  h1, span{color: green}
    </style>
  </head>

（三）关系选择器

父元素
-直接包含子元素的元素叫做父元素
子元素
- 直接被父元素包含的元素是子元素
祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素是兄弟元素

1.子元素选择器

作用：选中指定父元素的指定子元素（直接子代）
语法：父元素 > 子元素
部分代码示范：

<head>
    <style>
        div.box > span{
            color: orange;
        }

        div > p > span{
             color: red;
         }
    </style>
</head>
<body>
    <div class="box">
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span元素</span>  
    </div>
</body>
</html>

2. 后代元素选择器：

作用：选中指定元素内的指定后代元素
语法：祖先后代
部分代码示范：

<head>
    <style>
          div span{
             color: skyblue
         } 
</style>
</head>
<body>
    <div class="box">
        <span>我是div中的span元素</span>
           </div>
</body>
</html>

3.相邻兄弟选择器（CSS2）

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
语法:
选择器1+选择器2{
属性:值;
}

<head>
    <style>
          .p1+p {
            color: yellow;
        }
</style>
</head>

<body>
   <p class="p1">第1个标签</p>
    <p>第2个标签</p>
    <p>第3个标签</p>
    <p>第4个标签</p>
    <p>第5个标签</p>
</body>

4.通用兄弟选择器（CSS3）

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
语法:
选择器1~选择器2{
属性:值;
}

<head>
    <style>
       .p1~p {
            color: palegreen;
        }
</style>
</head>

<body>
   <p class="p1">第1个标签</p>
    <p>第2个标签</p>
    <p>第3个标签</p>
    <p>第4个标签</p>
    <p>第5个标签</p>
</body>

（四）属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
部分代码示范：

<head>
    <style>
      p[title=abc]{ } 
    </style>
</head>
<body>
        <p title="abc">少小离家老大回</p>
</body>

（五）伪类选择器

伪类（不存在的类，特殊的类）

     伪类用来描述一个元素的特殊状态
         比如：第一个子元素、被点击的元素、鼠标移入的元素...
     伪类一般情况下都是使用:开头
         :first-child 第一个子元素
         :last-child 最后一个子元素
         :nth-child() 选中第n个子元素
             特殊值：
                 n 第n个 n的范围0到正无穷
                 2n 或 even 表示选中偶数位的元素
                 2n+1 或 odd 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序
:not() 否定伪类
- 将符合条件的元素从选择器中去除

代码示范：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        /* ul > li:first-child{
            color: red;
        } */
    
        /* ul > li:last-child{
            color: red;
        } */
        
        /* ul > li:nth-child(2n+1){
            color: red;
        } */

        /* ul > li:nth-child(even){
            color: red;
        } */

        /* ul > li:first-of-type{
            color: red;
        } */

        ul > li:not(:nth-of-type(3)){
            color: yellowgreen;
        }
    </style>
</head>
<body>    
    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述

（六）a元素的伪类选择器

:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击

部分代码示范：

<style>
 a:link{color: red;}
 a:visited{color: orange; }
 a:hover{color: aqua;
		font-size: 50px;}
 a:active{color: yellowgreen; }
</style>

如果为多个链接状态设置样式，请遵循如下顺序规则：
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

(七)伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后

before 和 after 必须结合content属性来使用

代码示范：

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
        p{
            font-size: 20px;
        }
        p::first-letter{
            font-size: 50px;
        }
        p::first-line{
            background-color: yellow; 
        }
        p::selection{
            background-color: greenyellow;
        }

        div::before{
            content: '『';
         }

        div::after{
            content: '』';
        }
    </style>
</head>
<body>

    <div>Hello Hello How are you</div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>
</body>
</html>

运行结果：
在这里插入图片描述

三、CSS三大特性

1.继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:
1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
3.1 a标签的文字颜色和下划线是不能继承的,当做子元素
 3.2 h标签的文字大小是不能继承的，在做子元素

<div>
  <a href="https://www.baidu.com">百度一下</a>
  <p>我是p标签</p>
  <h1>我是h1标签</h1>
</div>

应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

2.叠层性

作用: 层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

		.div1 {
            color: red;
        }
        
        #div2 {
            color: aliceblue;
        }

  <div class="div1" id="div2">父亲</div>

这段代码所有样式颜色都生效了，只是#div2所设置的样式覆盖了.div1的样式

3.优先级

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

a.优先级判断的三种方式

间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认

b.优先级之!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
注意点:
1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值的后面，分号前面
5.!important前面的感叹号不能省略
6.但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

c.选择器的权重

样式的冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器,属性选择器 0,0,1,0
标签选择器,伪元素选择器 0,0,0,1
通配选择器,复合选择器（+、>、~等）,否定伪类（：not） 0,0,0,0
继承的样式没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

注意：在开发中这个玩意一定要慎用！

三、CSS单位

长度单位：

px像素
屏幕（显示器）实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
相对于屏幕宽度高度而言
百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em
相对于当前元素的字体大小而言的
默认1em=16px
1em = 1font-size
em会根据字体大小的改变而改变
rem
相对于html元素的字体大小而言的
默认1rem=16px

四、CSS颜色

颜色单位：
在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green … …
但是在css中直接使用颜色名是非常的不方便
RGB值：
RGB通过三种颜色的不同浓度来调配出不同的颜色
- R red，G green ，B blue
- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
- 语法：RGB(红色,绿色,蓝色)
RGBA:
就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明
十六进制的RGB值：
语法：#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
HSL值 HSLA值
H 色相(0 - 360)
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0% - 100%

 background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: rgba(106,153,85,.5);
            background-color: #ff0000;
            background-color: hsla(98, 48%, 40%, 0.658);

五、CSS文字

1.字体相关的样式

color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
line-height 属性用于指定行之间的间距，行高指的是文字占有的实际高度
- 可以通过line-height来设置行高
行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
- 行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
字体框
- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中
行高会在字体框的上下平均分配
text-shadow 属性为文本添加阴影。
格式: text-shadow: h-shadow v-shadow blur color;
可选值:
none:取消所有阴影
h-shadow :必需。水平阴影的位置。允许负值。
v-shadow :必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
text-transform 允许字体改变，文本变形
可选值：
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
font-family 字体族（字体的格式）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
font-family 可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个以此类推
font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 字体的加粗
可选值：
normal 默认值不加粗
bold 加粗 700
bolder 900
100-900 九个级别（没什么用）
font-style 字体的风格
normal 正常的
italic 斜体
text-align 文本的水平对齐
可选值：
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
text-decoration 设置文本修饰
可选值：
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白

2.图标字体

在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那么我们可以直接使用开源的字体图标库，这些字体图标库使用webFont原理，我们加载一个图标就好像加载一个字体一样简单，通过控制字体大小，字体颜色来控制图标的大小与颜色。
目前比较流行的开源字体图标库有
iconfont http://www.iconfont.cn/
font-awesome http://fontawesome.dashgame.com/

font-face可以将服务器中的字体直接提供给用户去使用
问题：
1.加载速度
2.版权
3.字体格式
部分代码：

 @font-face {
             /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }

图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大，并且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标

iconfont使用步骤

1.打开iconfont网站阿里图标库

2.搜索要使用的图标

3.将喜欢的图标加入到购物车，前提是需要登录iconfont

4.打开购物车，下载代码到本地

5.下载后，将对应的文件夹放到项目目录下

6.在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入对应的iconfont.css -->
  <link rel="stylesheet" href="./font_jcx62njyfg/iconfont.css">
</head>
<body>
  <!-- class="iconfont icon-xxx" 使用对应的图标即可-->
  <i class="iconfont icon-Flowerbud"></i>
</body>
</html>

iconfont多色图标使用步骤

1.搜索或选择多色图标

在这里插入图片描述

2.选择合适的图标加入购物车

3.将图标添加至项目，没有项目创建即可

4.在项目中选择symbol，生成线上链接或下载到本地

5.引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 加入通用css代码（引入一次就行） */
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
  </style>
  <!-- 线上 -->
  <script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>
  <!-- 本地 -->
  <script src="./font_2723033_472uiy994m2/iconfont.js"></script>
</head>
<body>
  <!-- 挑选相应图标并获取类名，应用于页面 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xianxingbingbao"></use>
  </svg>
</body>
</html>

font-awesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”
部分代码：

<head>
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
    <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>

运行结果：
在这里插入图片描述

通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fab
font-family: ‘Font Awesome 5 Brands’;

fas
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;

部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./fa/css/all.css">
    <style>
        li{
            list-style: none;
        }

        li::before{
            content: '\f1b0';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>

    <!-- 
        通过实体来使用图标字体：
            &#x图标的编码;
     -->
    <span class="fas">&#xf0f3;</span>
    
</body>
</html>