css3整理（一）

末蓝、 2022-10-19 00:57 156阅读 0赞

### font-weight ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>normal</td> 
   <td>默认值</td> 
  </tr> 
  <tr> 
   <td>bold</td> 
   <td>加粗</td> 
  </tr> 
  <tr> 
   <td>100-900</td> 
   <td>400=normal；700=bold；注意这个数字后边不能跟单位</td> 
  </tr> 
 </tbody> 
</table>

### font-style ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>属性值</td> 
   <td>作用</td> 
  </tr> 
  <tr> 
   <td>normal</td> 
   <td>默认值</td> 
  </tr> 
  <tr> 
   <td>italic</td> 
   <td>浏览器显示斜体的样式</td> 
  </tr> 
 </tbody> 
</table>

**注意：我们平时很少给文字加斜体，反而要把em元素和i元素的斜体改为正常**

### 字体的复合属性 ###

font: font-style font-weight font-size/line-height font-family
    
    font: italic 700 16px 'Microsoft yahei' ;

### 文本缩进 ###

div{
        text-indent: 10px;
    }
    p{
        text-indent: 2em;
    }

em是一个相对单位，就是当前元素的一个文字的大小；

### 行间距 ###

p{
        line-height:26px;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70][]

###  Element语法：vscode支持 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 2][]

### ·选择直接后代 '>'，而不是所有的后代 ###

.nav>a{
        color:red;
    }

###  并集选择器 ',' ###

div,
    p{
        color:red
    }

### 伪类选择器 ###

伪类选择器用于向某些选择器添加特殊的效果，例如给链接添加特殊效果，或者选择第一个，第n个元素。:hover :first-child

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

a:link  /\*选择所有的未被访问的链接\*/

a:visit /\*选择所有的已被访问的链接\*/

a:hover /\*选择鼠标指针位于其上的链接\*/

a:active /\*选择活动链接（鼠标按下未弹起的链接）\*/

**为了确保生效，请按照LVHA的顺序声明**

/*平时最最常用的方法*/
    a{
        color:#333;
        text-decoration:none;
    }
    
    a:hover{
        color:#369;
        text-decoration:underline;
    }

**:focus伪类选择器用于选择获取焦点的表单元素**

焦点就是光标，一般情况下input类表单元素才能获取

input:focus{
        background-color:yellow
    }

## 块元素 ##

h1-h6,p div ,ul,li,ol等，其中div标签是最典型的块元素

特点：

1、比较霸道，自己独占一行；

2、高度、宽度、外边距以及内边距都可以控制；

3、宽度默认是容器（父级宽度）的100%；

4、是一个容器盒子，里面可以放行内或者块元素；

**注意：文字类的元素不能使用块级元素，p标签主要用于存放文字，不能存放块级元素div，同理，h1-h6也不能存放块级元素；**

## **行内元素** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 3][]

<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

<i> 标签和基于内容的样式标签 [<em>][em] 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

<del>二十</del> ：删除线

<ins>十二</ins>：下划线

##  行内块元素 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 4][]

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

特殊情况下，我们需要元素模式的转换。简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围；

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display:inline-block;

## 小工具snipaste截图使用 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 5][]

###  垂直居中：文字的行高=盒子的高度； ###

### 关于背景 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 7][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 8][]

![20210708235612192.png][]

缩写：

![20210708235626669.png][]

### 背景图像滚动 ###

background-attachment: scroll|fixed

scroll:背景图像随内容滚动

fixed：背景图像固定

### 背景图像半透明 ###

background:rgba(0,0,0,0.3)

最后一个参数是alpha的透明度，取值范围在0-1之间 0看不见，1纯黑色；

# css优先级问题 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>选择器</td> 
   <td>选择器权重</td> 
  </tr> 
  <tr> 
   <td>继承或者是*</td> 
   <td>0，0，0，0</td> 
  </tr> 
  <tr> 
   <td>元素选择器</td> 
   <td>0，0，0，1</td> 
  </tr> 
  <tr> 
   <td>类选择器，伪类选择器</td> 
   <td>0，0，1，0</td> 
  </tr> 
  <tr> 
   <td>ID选择器</td> 
   <td>0，1，0，0</td> 
  </tr> 
  <tr> 
   <td>行内样式 style</td> 
   <td>1，0，0，0</td> 
  </tr> 
  <tr> 
   <td>! important</td> 
   <td>无穷大</td> 
  </tr> 
 </tbody> 
</table>

关于继承的权重问题：

如果该元素没有被选中，不管父元素权重有多高，子元素得到的权重都是0；

**也就是说与父元素相同的属性继承没有用，主要看子元素的定义；**

# 关于盒子模型 #

盒子模型本质上就是一个盒子，封装周围的HTML元素，包括边框、外边距、内边距、实际内容；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 9][]

/*定义没有顺序*/
    borde:1px solid red;

还有border-top等；

合并相邻的边框：border-collapse:collapse;

### 内边距 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>值</td> 
   <td>意义</td> 
  </tr> 
  <tr> 
   <td>padding:5px;</td> 
   <td>1一个值，代表上下左右都有5像素的<strong>内边距</strong></td> 
  </tr> 
  <tr> 
   <td>padding:5px 10px;</td> 
   <td>2个值，代表上下内边距是5px，左右内边距是10px</td> 
  </tr> 
  <tr> 
   <td>padding:5px 10px 20px</td> 
   <td>3个值，代表上内边距是5像素，左右内监局是10像素，下内边距20像素</td> 
  </tr> 
  <tr> 
   <td>padding:5px 10px 20px 30px</td> 
   <td>4个值，代表上、右、下，左的内边距</td> 
  </tr> 
 </tbody> 
</table>

当我们给盒子指定了padding之后，发生了两件事情：

1、内容和边距有了距离，添加了内边距；

2、padding内边距实际上影响了盒子的大小；也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

根据是否有高度或是宽度，判断是否用margin还是用padding；因为padding会撑大盒子模型；

### 盒子阴影 ###

css3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow：必需。水平阴影的位置，允许负值；

v-shadow：必需。垂直阴影的位置。允许负值；

blur：可选。模糊距离；

spread：可选。阴影的尺寸；

color：可选。阴影的颜色

inset：可选。将外部阴影改为内部阴影。默认就是外部阴影，但是外部阴影outset不能写；

阴影盒子不占空间，不会影响其他盒子排列。

### 文字阴影 ###

text-shadow:h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。

v-shadow：必需。垂直阴影的位置。允许负值。

blur：可选。模糊的距离。

color：可选。阴影的颜色。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70]: /images/20221005/6ccd5ac6cc474185af7a8a822f32a642.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 1]: /images/20221005/4a5cbe64dbfb45eeb5a3cee89b81d47c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 2]: /images/20221005/c37f565df61c4528adebde154be4221b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 3]: /images/20221005/bb3d8b07963f41528a47427a0d761b73.png
[em]: https://www.w3school.com.cn/tags/tag_em.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 4]: /images/20221005/938487f168154890851ea962a7f7a5b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 5]: /images/20221005/3548fc27472148ea87e8dfabcac4bcaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 6]: /images/20221005/40e906306d9d471a8ec6123f1bb19c7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210708235519664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 8]: /images/20221005/3562d8db2c0741a8863d5cd95419de87.png
[20210708235612192.png]: /images/20221005/17b6a4cc96c94e4ab1d347a49f6261c5.png
[20210708235626669.png]: /images/20221005/c67f0257e0a54380bc099f94b4915b49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BzaGRoeA_size_16_color_FFFFFF_t_70 9]: /images/20221005/ccf25f0b03bf4e39ab7433b7ab9f6294.png