css总结二

浅浅的花香味﹌ 2023-01-02 06:27 68阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.CSS复合选择器
 *   *  1.1后代选择器（重点）
     *  1.2 子元素选择器
     *  1.3交集选择器
     *  1.4并集选择器（重点）
     *  1.5 链接伪类选择器（重点）
     *  1.6 复合选择器总结
 *  2.标签显示模式（display）重点
 *   *  2.1块级元素(block-level)
     *  2.2行内元素(inline-level)
     *  2.3 行内块元素（inline-block）
     *  2.4 三种模式总结区别
 *  3.行高与高度（line-height and height）
 *  4. CSS 背景(background)
 *   *  4.1背景颜色(color)
     *  4.2 背景图片(image)
     *  4.3 背景平铺（repeat）
     *  4.4 背景位置(position) 重点
     *  4.5 背景附着
     *  4.6 背景简写
     *  4.7 背景透明(CSS3)
     *  4.8 背景总结
 *  5. CSS 三大特性
 *   *  5.1 CSS层叠性
     *  5.2 CSS继承性
     *  5.3 CSS优先级（重点）
 *  6.css二总结

--------------------

# 1.CSS复合选择器 #

## 1.1后代选择器（重点） ##

用来选择元素或元素组的**子孙后代**

父级 子级{ 属性:属性值;属性:属性值;}
    .class h3{ color:red;font-size:16px;}

## 1.2 子元素选择器 ##

子元素选择器只能选择作为某元素\*\*子元素(亲儿子)\*\*的元素。

.class>h3{ color:red;font-size:14px;}

## 1.3交集选择器 ##

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。  
交集选择器 是 并且的意思。 即…又…的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

## 1.4并集选择器（重点） ##

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。  
**并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。**

比如 .one, p , #test { color: #F00;}  
    表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
    通常用于集体声明。

## 1.5 链接伪类选择器（重点） ##

为了和我们刚才学的类选择器相区别  
类选择器是一个点 比如 .demo \{\}  
而我们的伪类 用 2个点 就是 冒号 比如 :link\{\}

作用：  
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

*  a:link 未访问的链接
 *  a:visited 已访问的链接
 *  a:hover 鼠标移动到链接上
 *  a:active 选定的链接

因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

实际工作开发中，我们很少写全四个状态，一般写法如下： a {    /* a是标签选择器 所有的链接 */
    			font-weight: 700;
    			font-size: 16px;
    			color: gray;
    }
    a:hover {    /* :hover 是链接伪类选择器 鼠标经过 */
    			color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
    }

## 1.6 复合选择器总结 ##

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

# 2.标签显示模式（display）重点 #

## 2.1块级元素(block-level) ##

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

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

## 2.2行内元素(inline-level) ##

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

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

## 2.3 行内块元素（inline-block） ##

![在这里插入图片描述][20210105095326917.png]

## 2.4 三种模式总结区别 ##

![在这里插入图片描述][20210105095412378.png]

# 3.行高与高度（line-height and height） #

行高 = 上距离 + 内容高度 + 下距离

**行高和高度的三种关系**

*  如果 行高 等 高度 文字会 垂直居中 **(注意:单行文本垂直居中)**
 *  如果行高 大于 高度 文字会 偏下
 *  如果行高小于高度 文字会 偏上

# 4. CSS 背景(background) #

## 4.1背景颜色(color) ##

background-color:颜色值;   默认的值是 transparent  透明的

## 4.2 背景图片(image) ##

background-image : none | url (url)

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

## 4.3 背景平铺（repeat） ##

background-repeat : repeat | no-repeat | repeat-x | repeat-y

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

## 4.4 背景位置(position) 重点 ##

background-position : length || length
    
    background-position : position || position

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

## 4.5 背景附着 ##

背景附着就是解释背景是滚动的还是固定的

background-attachment : scroll | fixed

![在这里插入图片描述][2021010510074830.png]

## 4.6 背景简写 ##

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
    background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
    
    background: transparent url(image.jpg) repeat-y  scroll center top ;

## 4.7 背景透明(CSS3) ##

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

![在这里插入图片描述][20210105100944614.png]

## 4.8 背景总结 ##

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

# 5. CSS 三大特性 #

## 5.1 CSS层叠性 ##

原则：

*  样式冲突，遵循的原则是**就近原则。** 那个样式离着结构近，就执行那个样式。
 *  样式不冲突，不会层叠

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

## 5.2 CSS继承性 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]  
这里需要注意的是 a标签不能继承颜色 h1~h6不能继承字体大小和粗细  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]

## 5.3 CSS优先级（重点） ##

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

# 6.css二总结 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221120/9b397f54d9484014b0f6406b719e27c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221120/7fd62b8b0254440ba9a8d0bf35292a97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221120/2823fe1257bc4672ae4cde248a156e7c.png
[20210105095326917.png]: /images/20221120/75bf54f670fd4d0db978800ef48f9c66.png
[20210105095412378.png]: /images/20221120/22c77fa36cb64882a2d3b34cbc9d6934.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221120/6e9e51f287b9469083f06682381d207f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 4]: /images/20221120/de072e9df5074ce2a3bca401a50a7b5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 5]: /images/20221120/6d96f2267b4d457f849ec8f121b55922.png
[2021010510074830.png]: /images/20221120/279d27aae23a4d04a051351b51591036.png
[20210105100944614.png]: /images/20221120/99b0302343e44564855a9a083256f417.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 6]: /images/20221120/5df62025bd2342d682be1d27eac83b85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 7]: /images/20221120/8903ab2eee094133b5cf32c80ddf3e61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 8]: /images/20221120/df79a57fe0514802a90e2c2ca2d6e2b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 9]: /images/20221120/3d495a08235c4818984633919b32e6f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 10]: /images/20221120/a37d579d515a4aa789deb392cb15b93c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 11]: /images/20221120/21460676eafd4955b760e57b0fcaafd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 12]: /images/20221120/f3be389673f345b1b810582a1c0851dc.png