（1）H5+C3——————H5，选择器，盒子模型，布局，图标，文本样式，设置背景和表格

ゞ浴缸里的玫瑰 2023-05-22 04:37 32阅读 0赞

[1，H5][1_H5]

2，选择器

*  2.1， 元素选择器
 *  2.2， 类选择器
 *  2.3， ID选择器
 *  2.4， 复合选择器
 *  2.5， 群组选择器
 *  2.6， 通用选择器
 *  2.7， 后代选择器
 *  2.8， 属性选择器
 *  2.9， 伪类和伪元素
 *  2.10，选择器的优先级

3，盒子模型

*  3.1，内容区
 *  3.2，内边距
 *  3.3，边框
 *  3.4，外边距

4，布局

*  4.1，浮动
 *  4.2，解决高度塌陷问题
 *  4.3，定位
 *  4.4，相对定位
 *  4.5，绝对定位
 *  4.6，固定定位
 *  4.7，z-index

5，图标

*  5.1，Font Awesome
 *  5.2，阿里矢量图标库

6，文本样式

*  6.1，浮动

7，设置背景

*  7.1， 设置背景颜色
 *  7.2， 设置背景图片
 *  7.3， 控制背景图片重复
 *  7.4， 设置背景图片位置
 *  7.5， 设置背景图片是否随页面滚动

8，表格

*  8.1， 表格的基本标签
 *  8.1， 合并单元格
 *  8.1， 表格的样式

#### 选择器 ####

1， 元素选择器

*  语法：  
    标签名 \{ \}
 *  比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签。

2， 类选择器

*  语法：  
    .className \{ \}
 *  比如.hello会选中页面所有class属性为hello的元素

3， ID选择器

*  语法：  
    \#id \{ \}  
    • 比如\#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。

4， 复合选择器

*  语法：  
    选择器1选择器2 \{ \}
 *  例如div.box1会选中页面中具有box1这个class的div元素。

5， 群组选择器

*  语法：  
    选择器1,选择器2,选择器3 \{ \}
 *  比如p,.hello,\#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

6， 通用选择器

*  通用选择器，可以同时选中页面中的所有元素。
 *  语法：  
    \*\{ \}

7， 后代选择器

*  后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
 *  语法：  
    祖先元素 后代元素 后代元素 \{ \}
 *  比如p strong 会选中页面中所有的p元素内的strong元素
 *  标签之间的关系

祖先元素：直接或间接包含后代元素的元素。

后代元素：直接或间接被祖先元素包含的元素。

父元素：直接包含子元素的元素。

子元素：直接被父元素包含的元素。

兄弟元素：拥有相同父元素的元素。

8， 属性选择器

*  属性选择器可以挑选带有特殊属性的标签。
 *  语法:  
    \[属性名\]，选取含有指定属性的元素  
    \[属性名=“属性值”\]，选取属性值等于指定值的元素  
    \[属性名~=“属性值”\]，如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号  
    \[属性名|=“属性值”\]  
    \[属性名^=“属性值”\]，选取属性值以指定内容开头的元素  
    \[属性名$=“属性值”\]，选取属性值以指定内容结尾的元素  
    \[属性名\*=“属性值”\]，选取属性值中包含指定内容的元素

9， 伪类和伪元素

*  伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:link</td> 
   <td>表示一个普通的链接（未访问过的链接）</td> 
  </tr> 
  <tr> 
   <td>:visited</td> 
   <td>表示访问过的链接</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>鼠标移入的链接，也可以为其他元素设置hover</td> 
  </tr> 
  <tr> 
   <td>:active</td> 
   <td>正在被点击的链接，也可以为其他元素设置active</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>表示元素获取焦点的状态，一般用于文本框</td> 
  </tr> 
  <tr> 
   <td>::selection</td> 
   <td>表示内容被选中的状态，在火狐中使用::-moz-selection来代替</td> 
  </tr> 
  <tr> 
   <td>:first-letter</td> 
   <td>表示第一个字符</td> 
  </tr> 
  <tr> 
   <td>:first-line</td> 
   <td>表示文字的第一行</td> 
  </tr> 
  <tr> 
   <td>:before</td> 
   <td>选中元素的最前边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容</td> 
  </tr> 
  <tr> 
   <td>:after</td> 
   <td>选中元素的最后边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容</td> 
  </tr> 
 </tbody> 
</table>

*  提示：  
      
    在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。  
      
    在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。  
      
    伪类名称对大小写不敏感。
 *  否定伪类（从一组元素中将符合要求的元素剔除出去）
    
    语法：
    
        :not(选择器)

10， 选择器的优先级

*  当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式，优先级计算时，总大小不能超过他的最大的数量级，可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。
 *  不同的选择器有不同的权重值  
    内联样式：1000  
    id选择器：100  
    类和伪类选择器：10  
    元素选择器：1  
    通配选择器：0
 *  如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。
 *  通配选择器，性能也比较差，要避免使用通配选择器

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

一个盒子我们会分成几个部分：

*  内容区(content)
 *  内边距(padding)
 *  边框(border)
 *  外边距(margin)

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

1， 内容区

*  如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
 *  通过width和height两个属性可以设置内容区的大小。

2， 内边距

*  内边距指的就是元素内容区与边框以内的空间。
 *  默认情况下width和height不包含padding的大小。
 *  使用padding属性来设置元素的内边距。
 *  例如：

padding:10px 20px 30px 40px; --> 这样会设置元素的上、右、下、左四个方向的内边距

padding:10px 20px 30px; --> 分别指定上、左右、下四个方向的内边距

padding:10px 20px; --> 分别指定上下、左右四个方向的内边距

padding:10px; --> 同时指定上左右下四个方向的内边距

*  同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

3， 边框

*  使用border属性来设置盒子的边框：

border:1px red solid;  --> 上边的样式分别指定了边框的宽度、颜色和样式

*  也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
 *  边框可以设置多种样式：

none（没有边框）

dotted（点线）

dashed（虚线）

solid（实线）

double（双线）

groove（槽线）

ridge（脊线）

inset（凹边）

outset（凸边）

4， 外边距

*  使用margin属性可以设置外边距。
 *  用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。
 *  当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。
 *  **display：**  
     block：设置元素为块元素  
     inline：设置元素为行内元素  
     inline-block：设置元素为行内块元素  
     none：隐藏元素（元素将在页面中完全消失）
 *  **visibility：**
    
     *  和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖  
         visible：可见的  
         hidden：隐藏的
 *  **overflow：**
    
     *  可以通过overflow来控制内容溢出的情况  
         visible：默认值  
         scroll：添加滚动条  
         auto：根据需要添加滚动条  
         hidden：隐藏超出盒子的内容

#### 布局 ####

1， 浮动

*  所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来，使用float属性。
 *  可选值：  
    none：不浮动  
    left：向左浮动  
    right：向右浮动
 *  块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。
 *  清除浮动，clear属性可以用于清除元素周围的浮动对元素的影响，也就是元素不会因为上方出现了浮动元素而改变位置。
 *  可选值：  
     left：忽略左侧浮动  
     right：忽略右侧浮动  
     both：忽略全部浮动  
     none：不忽略浮动，默认值

2， 解决高度塌陷问题

.clearfix::before, .clearfix::after{ 
    	content: '';
        display: table;
        clear: both;
    }

3， 定位

*  position属性可以控制Web浏览器如何以及在何处显示特定的元素。可以使用position属性把一个元素放置到网  
    页中的任何位置。
 *  可选值：  
    static  
    relative  
    absolute  
    fixed

4， 相对定位

*  每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周  
    围的元素完全不受此影响。
 *  当将position属性设置为relative时，则开启了元素的相对定位。当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
 *  相对定位的特点：
    
     *  如果不设置元素的偏移量，元素位置不会发生改变。
     *  相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
     *  相对定位不会改变元素原来的特性。
     *  相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。

5， 绝对定位

*  绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
 *  当将position属性设置为absolute时，则开启了元素的绝对定位。 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
 *  绝对定位的特点
    
     *  绝对定位会使元素完全脱离文本流。
     *  绝对定位的块元素的宽度会被其内容撑开。
     *  绝对定位会使行内元素变成块元素。
     *  一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

6， 固定定位

*  固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
 *  当将position属性设置为fixed时，则开启了元素的固定定位。当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
 *  固定定位的其他特性和绝对定位类似。

7， z-index

*  当元素开启定位以后就可以设置z-index这个属性。这个属性可以提升定位元素所在的层级。
 *  z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。

#### 图标 ####

1， Font Awesome图标库

*  [点击此处进入官网可进行下载][Link 1]，分为两个版本，一个收费版一个免费版
 *  具体使用情况根据官网的使用说明

2， 阿里矢量图标库

*  [点击此处进入官网查看][Link 2]，为了避免版权问题，矢量图标一般是由自己公司来开发
 *  使用说明

登录 ，选择自己需要的图标  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 1]  
       加入购物车  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 2]  
       点击购物车，添加至项目，新建项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 3]  
       下载到本地，下载完成后，打开，里面由个demo会教我们如何使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 4]

#### 文本样式 ####

1， 文本后面内容省略样式

*  white-space：设置网页如何处理空白
 *  可选值：  
     normal：正常  
     nowrap：不换行  
     pre：保留空白
 *  案例如下：  
    ![在这里插入图片描述][2020042322325122.png]

.box1{ 
    	width: 200px;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }
    
    <div class="box1">固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。</div>

#### 设置背景 ####

1， 设置背景颜色

*  background-color属性用来为元素设置背景颜色，如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色
 *  linear-gradient径向渐变  
    方向值：常用的是to top，to bottom，to left，to right,to right top等等  
    角度值：常用的是0deg、180deg等等
 *  使用案例

background-image: linear-gradient(0deg,red,yellow);

*  radial-gradient径向渐变
 *  默认情况下径向渐变的形状根据元素的形状来计算的 ：正方形–>圆形 长方形 -->椭圆形， 也可以指定渐变的位置
 *  语法：radial-gradient（大小 at 位置，颜色 位置，颜色 位置，颜色 位置）
    
     *  大小：  
        circle 圆形  
        ellipse 椭圆  
        closest-side近边  
        closest-side远边  
        farthest-corner 远角
     *  位置：top right left center bottom

2， 设置背景图片

*  background-image可以为元素指定背景图片。需要一个url地址作为参数，url地址需要指  
    向一个外部图片的路径，如：background-image: url(1.jpg)

3， 控制背景图片重复

*  background-repeat用于控制背景图片的重复方式。如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。
 *  可选值：  
    repeat：默认值，图片左右上下平铺  
    no-repeat：只显示图片一次，不会平铺  
    repeat-x：沿x轴水平平铺一张图片  
    repeat-y：沿y轴水平平铺一张图片

4， 设置背景图片位置

*   background-position用来精确控制背景图片在元素中的位置。
 *  可以通过三种方式来确定图片在水平方向和垂直方向的起点。  
    关键字：top right bottom left center  
     百分比  
    数值

5， 设置背景图片是否随页面滚动

*   background-attachment用来设置背景图片是否随页面滚动。
 *  可选值：  
     scroll：随页面滚动  
     fixed：不随页面滚动

#### 表格 ####

1， 表格的基本标签

*  table、tr、th、td  
    使用table标签创建一个表格。  
    tr表示表格中的一行。  
    tr中可以编写一个或多个th或td。  
    th表示表头。  
    td表示表格中的一个单元格。
 *  caption、thead、tbody、tfoot  
    caption表示表格的标题。  
    thead表示表格的头部。  
    tbody表示表格的主体。  
    tfoot表示表格的底部。

2， 合并单元格

*  合并单元格指将两个或两个以上的单元格合并为一个单元格。合并单元格可以通过在th或td中设置属性来完成。
 *  横向合并：colspan， 纵向合并：rowspan

3， 表格的样式

*  text-align：设置文本的水平对齐。
 *  vertical-align：设置文本的垂直对齐。  
    可选值：top、baseline、middle、bottom
 *  border-spacing：边框间距
 *  border-collapse：合并边框  
    collapse：合并边框  
    separate：不合并边框

[下一章，（2）JavaScript——————后端开发需要掌握的JavaScript基础知识][2_JavaScript_JavaScript]

[1_H5]: https://www.w3school.com.cn/html5/index.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70]: /images/20230521/840621f16b2a45c193f47e1b21b8fafc.png
[Link 1]: https://fontawesome.com/?from=io
[Link 2]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 1]: /images/20230521/c5db2a79dfd648a484a8fafe2f75151f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 2]: /images/20230521/67ebecd6d8914958942ee7d5b4047aa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 3]: /images/20230521/db21f9b7f17b47b9914afb5c573876fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTMwMDA0_size_16_color_FFFFFF_t_70 4]: /images/20230521/6853e704eea94b5aa7239602360bb847.png
[2020042322325122.png]: /images/20230521/b4836df187ca4ff3a2a789f5752f011a.png
[2_JavaScript_JavaScript]: https://blog.csdn.net/qq_41530004/article/details/105802663