前端 HTML/CSS （四）

逃离我推掉我的手 2022-12-30 13:44 80阅读 0赞

### 目录 ###

*   *   *   *  CSS的使用方式
             *  CSS的特性
             *  CSS的注释符
             *  选择器
             *  调试工具
             *  ID选择器
             *  组合选择器
             *  后代选择器
             *  链接伪类选择器
             *  动态伪类选择器
             *  权重值
             *  字体
             *  字体系列
             *  字体大小
             *  字体的粗细
             *  字体风格
             *  字体的简写
             *  字体颜色
             *  字体下划线
             *  字符间距（字体和字体之间的距离）
             *  盒子模型
             *  元素的显示模式

#### CSS的使用方式 ####

*  内联方式
    
    `<标签名 style=""></标签名>`
    
    特点：仅作用于本标签。
 *  内嵌方式

*  特点：作用于当前整个页面。
    
    MIME类型：它用来表示的就是要处理的文件的类型。
 *  外部导入
    
    `<link />`用来导入CSS文件（将其他的文档与当前的文档关联起来）
    
    通过link链接的样式表不是HTML文档的一部分，但是却能够让HTML使用。
    
    `<link />`标签放在`<head>`中
    
    格式：`<link href="*.css文件名" type="text/css" rel="stylesheet"/>`
    
     *  href属性：链接的文档在哪里。
        
         *  在这个文件中不能包含其他的代码，只能写CSS的样式规则。
         *  链接的文件的扩展名为`*.css`，这个后缀不能改，JS 中的后缀名不固定。
     *  type属性：规定了链接到文档的mime类型。这里面`type="text/css"`这句话在H5里面可不写。
     *  rel属性：`relation`关系：当前的文档与被链接文档之间的关系。
    
    特点：可以被多个页面同时应用。

**注意：** 以上三种方式，当样式冲突的时候，采用就近原则。哪个属性离被修饰的内容近就使用哪个。

#### CSS的特性 ####

*  CSS的继承性：被包含的元素拥有外层元素的样式效果。
 *  CSS的层叠性：CSS样式允许重复声明，允许覆盖。

#### CSS的注释符 ####

/*要注释掉的内容*/

#### 选择器 ####

*  标签选择器：类型选择器直接使用的是HTML的标签名。
 *  类选择器
    
    在HTML中给标签定义class属性。在CSS中使用`.类名`来进行选择。
    
    可以让不同的标签拥有相同的样式。

.haha{
        color:royalblue;
    }

* __注意：__
    
      1. 类的名字区分大小写。
    
      2. 可以使用`标签名.类名`来选择只具有对应`类名`的标签。
    
      3. 一个标签中可以有多个类选择器。
    
      4. 类选择器可以将两个或两个以上的类选择器合并，来定义有别于一个类的元素效果。
    
         `.erzi.ren`，匹配出同时具有`.erzi`和`.ren`类名称的元素。
    
    vscode快速注释：`shift+alt+a`或`ctrl+/`

#### 调试工具 ####

1.  打开
    
    1.  右键-》检查
    2.  F12  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]
2.  常见的错误
    
     *  注释掉的代码![在这里插入图片描述][20201225194055789.png]  
        点击框中的复选框可以让该代码生效。
     *  无效的属性名和值。![在这里插入图片描述][20201225194139965.png]
     *  缺少分号。  
        ![在这里插入图片描述][20201225194212914.png]
     *  客户端默认样式  
        ![在这里插入图片描述][20201225194247560.png]
     *  在调试器中添加代码，暂时的调试网页样式。  
        ![在这里插入图片描述][20201225194307974.png]
     *  继承下来的属性值![在这里插入图片描述][2020122519432772.png]

#### ID选择器 ####

用法：

1.  在标签中定义id属性并且给定一个值。
2.  在css中使用`#id的值`来进行选择。

注意：

1.  ID的值也是区分大小写的。
2.  ID具有唯一性，在一个HTML文档中一个ID值只能使用一次。
3.  类选择器相当于名字，ID选择器相当于身份证号。

#### 组合选择器 ####

`选择器1,选择器2,选择n.....`，将列出来的所有选择器都选择上。

#### 后代选择器 ####

`E F`，后代选择器，选择匹配的F元素，并且匹配的F元素被包含在匹配的E元素中。

**注意：**

1.  后代选择器两个或多个选择器之间必须以空格隔开。
2.  后代选择器可以选择上：儿子、孙子、重孙子只要是后代就可以。

#### 链接伪类选择器 ####

链接伪类选择器只能用于HTML中的a标签。它只有两个状态：已经访问、未访问。

`a:link`，匹配a标签，且a标签被定义了超链接（`href`）并且没有被访问过。

`a:visited`，匹配a标签且a标签定义了超链接已经被访问过。

如果说多个链接指向同一个地址，那么也会受到影响。

访问过之后这个网站的相关内容会被缓存起来，再打开也是已经访问过了。不同的浏览器就是不同的缓存（`ctrl+shift+del`来删除浏览记录。）。

#### 动态伪类选择器 ####

`E:hover`，选择匹配的E元素，且用户鼠标停留在元素上。它会被用于多个元素，比如div、a。

`E:active`，选择匹配的E元素，且匹配的元素被激活。E元素经常是可以进行交互的元素a、button。

`background-color`，设置元素的背景颜色。

如果要在a链接上同时应用链接伪类和动态伪类那么你需要按照以下规则：`LoVe/HAte`（爱/恨原则），`link->visited->hover-active`

*  `link`，没访问过。
 *  `visited`，访问过。

整体先设置a的样式，然后link、visited、hover、active都会继承其中的字体相关属性。然后再进行层叠（覆盖）。

a{
        color:yellowgreen;
    }
    a:hover{
        color:turquoise;
    }

#### 权重值 ####

同一个元素有可能会被多个选择器选择，它们又应用了相同的规则（也就是说同一个元素它们的属性有冲突了。）

**这个时候要去计算权重值。**

一个权重值由4部分组成

*  行内样式选择器为：1 0 0 0
 *  id选择器为：0 1 0 0
 *  类选择器、伪类为：0 0 1 0
 *  标签选择器为：0 0 0 1
 *  通配符选择器（\*）：0 0 0 0
 *  继承：0 0 0 0

**注意：**

1.  数值越大，权重越高。
2.  如果权重值相同，最后一个胜出。
3.  权重值我们在写的时候一般不注意（不会刻意去计算），但是**一旦出现样式覆盖不了的情况，首先要先想到权重值问题。**
4.  如果要忽略权重值时，需要在后面加`!important`（少用）

#### 字体 ####

*  字体：文字的外在的特征。文字的风格，文字的衣服。
    
    字体是怎么来的。
    
     *  字体先由于字体的设计师先画出来。
     *  字体制作人员一笔一划的制作。
     *  技术开发人员再对字符进行编码，添加程序指令。
     *  测试人员对字体进行测试。
     *  生产部分对字体库开始包装准备上市。
    
    电脑字体位置：`C:\Windows\Fonts`
    
    网页中的字体用的是客户端的。
 *  组成
    
    我们认为的字体可能不单纯，不是单纯的一个字体有可能由于许多字体的变体组成，通常用来标出斜体、粗体等等。 我们所说的字体有可能是一个字体族。
 *  分类
    
    字体、字体族可以分为很多类：
    
     *  衬线字体：serif，宋体。笔画开始、结束的地方有额外的装饰并且笔画的粗细会有不同。
     *  非衬线字体：sans-serif。没有额外的装饰，笔画粗细差不多。 网页中经常使用的。
     *  等宽字体：等宽字体一般是针对于英文字体而言。**(程序员编码时一般用等宽字体)**
     *  手写体
     *  奇幻字体

**注意：**

当你设置的font-family字体，显示不出效果时，可能你设置的字体没有**中文**的效果，所以换成英文内容再试一下。

#### 字体系列 ####

`font-family: 字体的名字`

**注意：**

1.  设定的字体名如果包含空格，则应该使用引号将字体名包起来。
2.  常见的中文字体在设置时可以使用其英文名字。（具体的看表）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]
3.  可以定义多种字体，多个字体将按照优先顺序排列，（浏览器根据这个字体的列表检索用户电脑是中的字体，按照从左到右的顺序进行使用，多个字体之间使用逗号分隔）
4.  如果多个字体列表到最后都没有找到则使用浏览器默认字体。

#### 字体大小 ####

`font-size`

如果没有设置文字大小，web浏览器会使用预先设置好的默认值，大部分浏览器是16px，也叫基准尺寸大小。

*  px
    
    **网页中的最小字号一般是12px，1-11px生效，仍会保持12px。但是0px是可以生效的。**
 *  `%`，根据从父元素继承下来的大小来进行计算。
 *  em，相对于父元素继承下来的大小计算`1em=1个设置的大小(1em=100%)`
 *  rem，基于根元素（html）的文本尺寸来进行定义。

#### 字体的粗细 ####

`font-weight`

*  normal，正常的字体。 400
 *  bold，粗体。700
 *  bolder，更粗。
 *  lighter，更细。
 *  数值100~900
    
    使用100~900作为关键字通常字体映射了9级的粗度。
    
    100~900有没有效果完全看你用的字体是否安装了各种各样字体的变体。
    
    这些数字没有固定的粗细，有可能100,200,300这些是一样的粗细，500，600是一样的粗细。CSS规范当中规定的是只要一个关键字的加粗不比前面一个关键字更细就行。

#### 字体风格 ####

`font-style`

*  normal，默认值。
 *  italic，显示成斜体。

#### 字体的简写 ####

font属性书写顺序 `font:style weight size family`

**注意：**

1.  `font-size和font-family（连写时必须要写）`不只是顺序不能颠倒而且一旦使用font，他们两个就必须有值。

<!DOCTYPE html>
    <html>
    
    <head>
        <style> div { font:100px STcaiyun; color: green; } </style>
    </head>
    
    <body>
        <div>李沛华真丑！！！！</div>
    </body>
    
    </html>

#### 字体颜色 ####

`color：`

*  16进制的数字
 *  rgb颜色值
 *  rgba
 *  单词

#### 字体下划线 ####

`text-decoration: value;`

*  none，标准的文本。
 *  underline，下划线。
 *  overline，上划线
 *  line-through，贯穿线

text-decoration可以使用多个值，用空格隔开，并会同时生效。如：`text-decoration: underline overline line-through`

代码如下：

<pre> 
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> a { font-size: 30px; text-decoration: underline overline line-through; } </style>
    </head>
    <body>
        <a href="#">123456</a>
    </body>
    </html>
    </pre>

显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]

#### 字符间距（字体和字体之间的距离） ####

`letter-spacing`，定义字距。

*  normal，正常的。相当于`letter-spacing: 0;`
 *  px，像素。
 *  em，按照当前字体大小来进行计算。

#### 盒子模型 ####

详细的盒子模型后面再说。

*  width：设置元素的宽度。
 *  height：设置元素的高度。
 *  background-color：设置元素的背景色。
 *  border：设置边框。 `border:1px solid green;`
    
     *  1px 指的是边框的宽度
     *  solid指的边框的样式
     *  green指的是边框的颜色

#### 元素的显示模式 ####

*  块级元素（block）
    
     *  独占一行，前一个和后一个会有换行，多个块级元素各自新起一行。默认情况下块级元素会自动填满父元素的宽度。
     *  块级元素可以设置宽度和高度，即使设置了宽度，仍然是独占一行。
     *  如果人为的设置宽度可以大于父宽度或小于父宽度。
    
    常用的块元素：div、h1~h6、p、ul、ol、li、form
 *  内联元素、行内元素（inline）
    
     *  不会独占一行，多个相邻的行内元素会排列在同一行，直到一行放不下，才会换行。它的宽度随着元素的内容而变化。
     *  内联元素设置宽度和高度无效。
    
    常用的内联元素：span、b、strong、i、em、u等等
 *  行内块状元素（inline-block），在内部表现为块状元素，可以设置宽高，外部表现为行内元素水平排列。
    
    常用：img、表单的相关元素。
 *  更改显示类型
    
     *  `display:value`
        
         *  block，显示为块状元素
         *  inline，显示为内联（行内）元素。
         *  inline-block，行内块状元素。
         *  none，隐藏元素。

a标签的颜色会优先用a标签自带的颜色，不会继承父亲的颜色。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/05496429ae59434aba08f264afd339cd.png
[20201225194055789.png]: https://img-blog.csdnimg.cn/20201225194055789.png
[20201225194139965.png]: https://img-blog.csdnimg.cn/20201225194139965.png
[20201225194212914.png]: https://img-blog.csdnimg.cn/20201225194212914.png
[20201225194247560.png]: https://img-blog.csdnimg.cn/20201225194247560.png
[20201225194307974.png]: https://img-blog.csdnimg.cn/20201225194307974.png
[2020122519432772.png]: https://img-blog.csdnimg.cn/2020122519432772.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225195741790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201225194455861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201225194620942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70