CSS集合-工作时突然忘了，整理一下-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46426412/article/details/130906662

文章详细介绍了CSS的选择器类型，包括基础选择器如标签、类和ID选择器，以及复合选择器、伪类选择器和结构伪类选择器的使用。此外，还讨论了CSS中的字体样式、文本属性和盒模型，包括字体大小、颜色、行高、内边距、边框和外边距。文章还提到了Emmet语法的便捷性和快速生成CSS样式的技巧，以及CSS的层叠性、继承性和优先级概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. CSS 选择器

选择器的作用

选择标签用的（根据不同的需求把不同的标签选出来）

CSS：①找到标签；②将找到的标签设置样式

选择器分类

基础选择器

由单个选择器组成；

包括：标签选择器，类选择器，id选择器，通配符选择器

标签选择器：指用HTML标签名称作为选择器；能快速的为页面中同一类标签统一设置样式

标签名:{                div {
    属性1: 属性值1；        font-size:20px    
    属性2: 属性值2:         background-color:blue;
}                      }

类选择器：单独选择一个或者某一个标签；差异化不同的标签

<style>
    .red {
        color: red;
    }
</style>
...........
<body>
    <p class="red">我是红色<p>
</body>

类选择器-多类名

在标签class里面写多个类名，必须用空格分开
<div class="red font20">刘德华</div>

id选择器

 <head>
   <style>
      #west{ color:red; font-size:20px }
   </style>
 </head>
 <body>
      <div #id="west">id选择器的使用</div>
 </body>

* 通配符选择器

  用 * 来定义     选取页面中所有元素（标签）
  * { margin:0; padding:0; }

结构伪类选择器

在这里插入图片描述

伪类选择器

在这里插入图片描述

复合选择器

字体系列字体什么样式 font-family
各字体之间用逗号隔开
多个单词组成的字体加引号
尽量使用系统默认字体
可以给 <body> 标签使用font-family

p {
    font-family:'微软雅黑'；
}

// px(像素)大小是我们网页最常用的单位
// 可以给body标签使用，标题标签比较特殊，需要单独指定文字大小
body { font-size: 18px; }

字体粗细 font-weight

normal : 正常的字体。相当于 number为 400。声明此值将取消之前任何设置。
bold : 粗体。相当于 number 为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100｜200｜300｜400｜500｜600｜700｜800｜900

<style>
  /* 700 加粗 */
  .jiacu{ font-weight:700; }
  /* 400 不加粗*/
  h2{ font-weight:400; }
</style>

文字样式粗斜体 font-style

平时很少给文字加斜体，反而要给斜体标签改为不倾斜字体

normal : 默认值，浏览器会显示标准的字体样式 font-style:normal;
italic : 浏览器会显示斜体的字体样式。

复合属性

不能更换顺序！！！每个属性之间以空格隔开
不需要的属性可以省略，但必须保留font-size和font-family属性！！

body{
   font:  font-style   font-weight   font-size/line-height   font-family;
   font:   italic   700   50px   'Papyrus';
}

文本属性文本颜色

文本属性：可定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等
文本颜色: 开发中最常用的是十六进制

div {
  color: deeppink;
  color: #db8bb3;
  color: rgb(37,111,155);
}

对齐文本居中对齐text-align

text-align 用于水平对齐
left 左对齐（默认） right右对齐 center 居中对齐

div { text-align:center; }

装饰文本下划线text-decoration

text-decoration 添加到文本的修饰可以给文本添加下划线，删除线，上划线等。
none 取消装饰线（默认）
underline 下划线
overline 上划线（几乎不用）
line-through 删除线（不常用）

div { text-decoration: underline; }

文本缩进 text-indent

text-indent 用来定义第一行的缩进距离，通常是段落首行缩进。
em 是一个相对单位，就是当前元素（font-size）1个文字的大小。

p { text-indent: 2em; }

行间距 line-height

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。
行间距=上间距+下间距+文字高度（不变）后加px

p { line-height: 30px; }

在这里插入图片描述

2. Emmet语法

在这里插入图片描述

3. 快速生成CSS样式语法

只需要输入前一个字母比如 text-align：center（txc）

4. CSS的复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等

1. 后代选择器

在这里插入图片描述

2.子选择器

子元素选择器，只选择作为某元素的最近的一级子元素

元素1和元素2中间用>隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子

元素1 > 元素2 {样式说明} 比如 div>p {} 选择div中所有最近一级p标签元素

3.并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式，常用于集体声明。

用英文逗号连接而成 div,p {样式说明}

div,p,
.pig li{ color:pink; }

4.伪类选择器

在这里插入图片描述

5. :focus伪类选择器

在这里插入图片描述

5. 块元素，行内元素，行内块元素

常见的有<h1> ~ <h6>,<p>,<div>,<ul>,<ol>,<li>等

1. 块元素

块级元素的特点：

自己独占一行
高度，宽度，外边距和内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器和盒子，里面可以放块级元素和行内元素

注意：文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字，所以里面不能存放块级元素，特别是<div> <h1>也是一样

2. 行内元素

行内元素的特点：

一行上可以放多个行内元素
高宽设置是没有效果的
默认的宽度就是本身内容的宽度
行内元素只能容纳文本或其他行内元素，不允许放块元素

注意：链接里面不能再放链接，<a>里面可以放块级元素，但是需要转换一下块级模式最安全
<span> 是最典型的行内元素，有的地方称为内联元素

3. 行内块元素

行内块元素的特点:

一行内可以放多个元素，但是之间会有空白缝隙（行内元素特点）
默认宽度是它内容本身的宽度（行内元素特点）
高度，行高，外边距等都可以控制（块级元素特点）

同时具有块元素和行内元素的特点，比如 <img />,<input />,<td>

6. 元素显示模式转换

一个模式的元素需要另外一种模式的特性。比如，想要使<a>链接可以设置高度和宽度

display:block; 可以把行内元素转换为块级元素

display:inline; 转换为行内元素

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

span{ 
   width:100px; 
   height:200px; 
   background-color:pink;  
   display:inline-block
}

单行文字垂直居中的小技巧

让文字的行高等于盒子的高度 line-height = height

7. CSS背景部分

1.背景颜色

background-color ：transparent ; (透明）
背景色透明一般默认的是透明色

2. 背景图片

background-image: none | url(url);
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置

none 无背景图的（默认的） url 使用绝对地址或相对地址指定背景图像

3.背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

background-repeat：repeat | no-repeat | repeat-x | repeat-y ;

平铺 | 不平铺 | 横向平铺 |纵向平铺

页面元素，既可以添加背景图片，也可添加背景颜色，不过背景颜色在背景图片下面。

4.背景图片位置

background-position 可以改变图片在背景中的位置
background-position：x y； x坐标和y坐标：可以使用方位名词或者精确单位

length · · · · 百分数｜由浮点数字和单位标识符组成长度值
position · · · · top | center | bottom | left | center | right 方位名词

1. 参数是方位名词

如果两个值都是方位名词，则两个值前后顺序无关 left top = top left
如果指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

如果是精确单位，第一个肯定是x坐标，第二个肯定是y坐标 ：20px 50px;
如果只有一个数值，那么肯定是x坐标，第二个默认垂直居中

3. 参数是混合单位

如果精确单位和方位名词混合使用，则第一个是x坐标，第二个是y坐标；

5.背景图像固定（背景附着）

background-attachment 属性
设置背景图像是否固定或者随着页面的其余部分滚动

后期可以制作视差滚动的效果

background-attachment：scroll | fixed ；
scroll 背景图像随对象内容滚动（默认）；fixed 背景图像固定 ;

6.背景复合写法

把背景属性合并简写到同一个属性 background 中，一般习惯约定顺序为：

background：背景颜色背景图片url 背景平铺背景图像滚动背景图片位置

必须用空格隔开！！！

7.背景色半透明

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

最后一个参数是alpha透明值，取值范围在0-1之间
习惯把0.3 的 0省略掉，写成 background：grba（0，0，0，.3）
背景半透明是指盒子背景半透明，里面的内容不受影响；

在这里插入图片描述

8. CSS 三大特性

1. 层叠性

相同选择器给设置相同的样式，此时样式就会覆盖另一个冲突的样式。

层叠性主要解决样式冲突的问题。

层叠性原则：

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

2. 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

恰当的使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性

body { font：12px/1.5 microso YaHei；}

行高可以跟单位px也可以不跟单位
如果子元素没有设置行高，那么会继承父元素的行高为1.5
此时子元素的行高为：当前子元素的文字大小*1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3. 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性（就近原则）
选择器不同，则根据选择器权重执行

在这里插入图片描述
优先级注意点：

继承的权重为0；如果父亲权重很高，但优先使用自己的选择器
权重虽然会叠加，但永远不会有进位

权重叠加：
如果是复合选择器，则会有权重叠加，需要计算权重

div ul li 权重是 0,0,0,3

.nav ul li 权重是 0,0,1,2

a:hover权重是0,0,1,1 a是标签选择器，：hover是伪类选择器

8. CSS 盒模型

1. 看透网页布局的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

2. 盒子模型（box model）组成

把HTML页面中的布局元素看作是一个矩形的盒子

包括：边框（border），外边距（margin），内边距（padding），实际内容（content）

在这里插入图片描述

9. 边框border

border可以设置元素的边框。由三部分组成：边框宽度（粗细），边框样式（实心），边框颜色

border：border-width || border-style || border-color ；

border-width：定义边框粗细，单位是px

border-style ：边框的样式，是实心还是…solid实线边框 dashed虚线边框 dotted点线边框

border-color：边框颜色

边框简写： border：1px pink solid ；没有顺序

边框分开写法：如下

border-top:5px pink solid;
border-left:5px red dashed;
border-right:5px blue dotted;
border-bottom:5px rgb(247,176,64) dotted;

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，可以控制相邻单元格的边框

border-collapse：collapse； //是合并的意思，表示相邻边框合并在一起

边框会影响盒子的实际大小

边框会增加盒子的实际大小，因此我们有两种解决方案：

测量盒子大小的时候，不量边框
测量的时候包括了边框，width和height需要减去边框宽度

10. padding 内边距

用于设置内边距，即边框与内容之间的距离

padding-left:20px; //左内边距 right右边 top上边 bottom 下边

padding的简写属性：顺时针来转
在这里插入图片描述
padding内边距会影响盒子实际大小 : 让宽度width和高度height减去内边距大小即可。

如果盒子本身没有指定width、height属性，此时padding不会撑开盒子大小。

11. 外边距 margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

margin简写跟padding一样
在这里插入图片描述

12. 去掉无序列表 l i 前面的小圆点：

list-style: none;

13. 盒子塌陷解决方案

在这里插入图片描述

14. 圆角边框

border-radius：length；用于设置元素的外边框圆角

length越大，半径越大，半径的圆越大，弧线越强烈。

参数值可以为数值或者百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%

.yuanxing {
      width: 200px;
      height: 200px;
      background-color: palevioletred;
      /* border-radius: 100px; */
      /* 50%就是高度和宽度的一半 */
      border-radius: 50%;
 }

如果是个矩形，设置为高度的一半就可以

.yuanxing {
      width: 200px;
      height: 200px;
      background-color: palevioletred;
      /* border-radius: 100px; */
      /* 50%就是高度和宽度的一半 */
      border-radius: 50%;
 }

border-radius：length；是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针）

分开写，左上角：border-top-left-radius

15. 盒子阴影 box-shadow

语法：box-shadow：h-shadow v-shadow blur spread color inset；
在这里插入图片描述

h-shadow：正值越大往右偏移
v-shadow：正值越大往下偏移
blur：0的话是不模糊，越大越模糊
spread：影子的大小

默认outset ，不需要写outset，如果要内部阴影写 inset

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

div{
  width:300px;
  height:500px;
  background-color:pink;
  margin:200px auto;
  /* box-shadow:20px 10px 10px -4px rgba(0,0,0,0.3); */
}
div:hover{
  box-shadow:20px 10px 10px -4px rgba(0,0,0,0.3);
}

文字阴影 text-shadow

语法：text-shadow：h-shadow v-shadow blur color；

div{
  font-size:50px;
  color：red;
  font-weight:700;
  text-shadow:7px 7px 10px rgba(0,0,0,.3);
}

16. CSS书写顺序

布局定位属性:display / position / float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式）

自身属性:width / height / margin / padding / border / background

文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他属性（CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow …