css初识

概况

CSS定义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

引入方式

内联式

写在标签内

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
    h1 {
        /* 设置文字颜色 */
        color: red;
        /* 设置标签背景色 */
        background-color: #faebd7;
        /* 设置标签字号 */
        font-size: 50px;
    }
    table {
        background-color: #00ffff;
    }
</style>

外联式

1

<link rel="stylesheet" href="">

href内写css的文件地址

行内式

1

<h3 style="background-color: #deb887; color: #faebd7;">这是三级标题</h3>

将style写到标签内，””里面写css样式

写法

选择器 {属性名:属性值;}

选择器

作用：插在标签，设置样式

分别有：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

使用标签名作为选择器

1
2
3
4
5
6
7
8

h1 {
        /* 设置文字颜色 */
        color: red;
        /* 设置标签背景色 */
        background-color: #faebd7;
        /* 设置标签字号 */
        font-size: 50px;
    }

同一标签出现多次但需要分别修改样式的情况下，不能使用这种方式。

类选择器

差异化设置标签的css样式

css写法：.类名

使用它：<标签名 class=”类名”>

html部分

1

<h4 class="zdy_h4">这是四级标题</h4>

css部分

1
2
3

.zdy_h4{
    font-size: 25px;
}

一个标签可以添加多个类，他们共同改变样式

1

<h4 class="zdy_h4 zdy_h4_1">这是四级标题</h4>

id选择器

差异化设置标签的css样式，一般配合JavaScript使用，很少用来设置css

css写法：#id名

使用它：<标签名 id=”id名”>

1

<h5 id="id_zdy_h5">这是四级标题</h5>

同一个页面同一个id只能使用一次

通配符选择器

查找页面所有标签，设置相同样式

写法：*，不需要调用，自动查找所有标签

1
2
3
4

*{
    margin: 0;
    padding: 0;
}

一般用于清除标签的默认样式

使用div标签画盒子

html部分

1
2

<div class="box1"></div>
<div class="box2"></div>

css部分

1
2
3
4
5
6
7
8
9
10

.box1{
    width: 200px;
    height: 200px;
    background-color: #7fffd4;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: #ffe4c4;
}

Emmet语法

VScode快速生成HTML结构语法

1. 输入!然后按tab键可以快速生成HTML基础框架代码
2. 生成标签直接输入标签名按tab键即可 比如 div 后tab键，就可以生成
3. 如果想要生成多个相同标签 加上就可以了比如 div3就可以快速生成3个div
4. 如果有父子级关系的标签，可以用>比如 uli就可以了
5. 如果有兄弟关系的标签，用 + 就可以了比如div+p
6. 如果生成带有类名或者id名字的，直接写 box 或者 #box然后按 tab 键就可以了
7. 如果生成的div类名是有顺序的，可以用自增符号$(英文状态下钱的符号)
8. 如果想要在生成的标签内部写内容可以用{}表示

1
2

<!-- 输入.box3 按tab -->
<div class="box3"></div>

1
2
3
4

<!-- 输入div*3 按tab -->
<div></div>
<div></div>
<div></div>

1
2
3
4

<!-- 输入.box*3 按tab -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

1
2
3

<!-- 输入p.c1*2 按tab -->
<p class="c1"></p>
<p class="c1"></p>

1
2
3
4
5

<!-- 输入.div{这是第$个}*4 按tab -->
<div class="div">这是第1个</div>
<div class="div">这是第2个</div>
<div class="div">这是第3个</div>
<div class="div">这是第4个</div>

1
2
3
4

 <!-- 输入ul>li 按tab -->
<ul>
   <li></li>
</ul>

复合选择器

后代选择器

​ 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

1

元素1 元素2{样式声明}

示例：

1

ul li {background-color: #ffe4c4;}

选择ul下的所有li标签修改背景色为#ffe4c4

1

div span a {text-decoration: none;}

将div标签下的span标签下的a标签的下划线去掉

也可以使用自定义标签

1

.box1 span a {text-decoration: none;}

子选择器

​ 子元素选择器(子选择器) 只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

1

元素1>元素2{样式声明}

示例：

html部分

1
2
3
4
5
6

<div class="box2">
     <a href="#">1号</a>
     <span>
        <a href="#">2号</a>
     </span>
</div>

css部分

1
2
3
4

.box2>a {
    text-decoration: none;
    color: #7fffd4;
}

并集选择器

​ 并集选择器可以选择多组标签，同时为他们定义相同的样式，一般用于集中声明

可以用于任何形式的标签

1

元素1,元素2{样式声明}

示例：

html部分

1
2

<div class="box1">233333</div>
<div class="box2">123456</div>

css部分

1
2
3
4
5
6

.box1,
.box2 {
    width: 220px;
    height: 220px;
    background-color: #ffe4c4;
}

伪类选择器

​ 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素.
​ 伪类选择器书写最大的特点是用冒号(:) 表示，比如:hover、 :first-child。

链接伪类选择器

示例：

html部分

1
2
3
4
5
6

<ul class="top">
    <li><a href="#">我是一个链接</a></li>
    <li><a href="#">我是一个链接</a></li>
    <li><a href="#">我是一个链接</a></li>
    <li><a href="#">我是一个链接</a></li>
</ul>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.top li a {
    text-decoration: none;
    color: #757575;
}

.top li a:link {
    color: #757575;
}

.top li a:visited {
    color: #ffffff;
}

.top li a:hover {
    color: #e0a21e;
    text-decoration: underline;
}

.top li a:active {
    color: #008000;
}

一般需要按照顺序进行声明（不一定所有的都要用，可以只写一个）

1

:link - :visited - :hover - :active

focus伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况下针对表单元素

1
2
3
4

input:focus {
    /* 表单获得焦点的时候更改输入框的边框为橙色 */
    outline-color: #e0a21e;
}

CSS元素显示模式

根据不同的特性可以分为块元素和行内元素

块元素

特点：

1. 独占一行
2. 高度、宽度、外边距、内边距可以独立控制
3. 宽度默认是容器的100%
4. 是一个容器及盒子，里面可以包裹其他元素

h1~h6、p、div、ul、ol、li等都是块元素

注意事项：

• 文字类的元素不能使用块级元素
• p与h1~h6标签用于存放文字，所以不能放div、ul等元素

行内元素

特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高宽无法直接设置
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

a、strong、span等都是行内元素又叫内联元素

注意：

• 链接里面不能放链接
• 特殊情况下a可以放块级元素，但是a转换一下块级模式最安全

行内块元素

同时具有块元素与行内元素的特点

img、input、td这些都称为行内块元素

特点：

1. 与相邻行内元素在一行上，但是直接会有空白缝隙，一行可以显示多个
2. 默认宽度就是它本身内容的宽度
3. 高度、行高、外边距和内边距都可以自行控制

元素显示模式转换

转换为块元素：display: block;

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

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

示例：将a标签转换为块级元素

html部分

1

<a href="#" class="a_dw">点我呀</a>

css部分

1
2
3
4
5
6

.a_dw {
    width: 100px;
    height: 60px;
    background-color: #ffe4c4;
    display: block;
}

这样就可以为a标签设置高度和宽度了

CSS基础美化属性

font-weight字体粗细

text-align文本对齐

text-decoration装饰文本

text-decoration: none;可以去掉a标签的下划线

如何实现文字在盒子内垂直居中

让文字的行高等于盒子的高度，就可以实现文字在盒子内垂直居中

line-height: 已设置的高度;

示例：

1
2
3
4
5
6
7
8
9
10
11
12

.box_cbl a {
    width: 250px;
    height: 45px;
    display: block;
    background-color: #535759;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    text-indent: 2em;
    /* 文字垂直居中 */
    line-height: 45px;
}

CSS背景

背景属性可以设置背景图片、背景平铺、背景图片位置、背景图像固定等操作

背景颜色

1

background-color: 颜色值;

16进制、RGB值、预定义颜色值

背景图片

1

background-image: url();

背景平铺

1

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

背景图片位置

1

background-position: X Y ;

背景图片固定

1

background-attachment: scroll | fixed ;

scroll：背景图像是随着对象内容滚动

fixed：背景图像固定

背景颜色半透明效果

1

background: rgba(red, green, blue, alpha);

alpha透明度取值范围为：0-1之间

背景属性复合写法

可以将多条背景修改属性合并为一条语句，各属性不用按照顺序写

1

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

CSS三大特性

层叠性

在css中如果有两个相同的样式下，一个样式会覆盖另一个冲突的样式。

原则：

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

1
2
3
4
5
6

span {
    background-color: #535759;
}
span {
    background-color: #eaac7c;
}

最终颜色会变成#eaac7c

继承性

子标签会继承父标签的某些样式，例如字体、字号、颜色、行高等

示例：

html部分

1
2
3
4

<div class="jicheng">
    <p>你好</p>
    <p>Hello</p>
</div>

css部分

1
2
3
4
5
6
7

.jicheng {
    color: #40866f;
    font-size: 25px;
    font-family: 'Microsoft YaHei';
    line-height: 25px;
    text-indent: 2em;
}

示例

1
2
3

body {
	font: 12/1.5 Microsoft YaHei;
}

让body包裹着的所有行高为当前文字大小的1.5倍

font-size=20px，那么行高位20*1.5=30，那么这里的行高为30px

如果没有手动指定文字大小，计算行高也会根据父标签的文字大小进行计算

优先级

• 当同一个元素指定多个选择器，就会有优先级的产生
• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器权重表：

示例：

1
2
3
4
5
6
7

div {
    color: #000;
}

.youxianji {
    color: red;
}

字体颜色会变成red，因为类选择器比元素选择器优先级更高

同样：

1
2
3

<div class="youxianji" id="youxianji">
        <p>看谁优先级高</p>
    </div>

1
2
3
4
5
6
7

.youxianji {
    color: red;
}

#youxianji {
    color: #6060b5;
}

字体颜色会变成#6060b5，因为id选择器比类选择器的优先级高

接着：

1
2
3

<div class="youxianji" id="youxianji" style="color: #8a2be2;">
        <p>看谁优先级高</p>
    </div>

1
2
3

#youxianji {
    color: #6060b5;
}

行内样式优先级比id选择器更高，所以字体颜色会变成#8a2be2

最后：

1
2
3

<div class="youxianji" id="youxianji" style="color: #8a2be2;">
	<p>看谁优先级高</p>
</div>

1
2
3
4
5
6
7
8
9
10
11

div {
    color: black !important;
}

.youxianji {
    color: red;
}

#youxianji {
    color: #6060b5;
}

元素选择器后面已经添加了!important，所以，即使设置了行内样式，颜色依旧会变成black，因为!important优先级是最高的！！！

注意事项

1. 权重是有4组数字组成，但不会进位

2. 等级判断从左向右，如果某一位相同，则判断下一位数值

3. 继承权重为0，如果元素没有直接选中，不管父元素优先级有多高，子元素的优先级依旧为0

4. 优先级可以叠加计算，但不会进位

   1 2 3 4 5 6 7 8

   li { color: red; } /* ul li优先级计算 0,0,0,1 + 0,0,0,1 = 0,0,0,2 > 单li标签 0,0,0,1 */ ul li { color: aquamarine; }

   最终颜色会变成aquamarine，所以ul li的优先级更高

盒子模型

​ 网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。—-百度百科

盒子主要由border(边框)、content(内容)、padding(内边距)、margin(外边距) 4部分组成

边框(border)

border-width

设置边框的粗细,一般情况都是用px

border-style

设置边框的样式

边框设置简写

他们之间没有先后次序

1

border: 粗细 边框样式 边框颜色;

独立设置4个边的样式

1
2
3
4

border-top: 2px solid #faebd7;
border-bottom: 2px double #faebd7;
border-left: 2px dashed #faebd7;
border-right: 2px hidden;

内边距(padding)

内边距复合写法

注意

1. 内容和边框有了距离，添加了内边框
2. padding影响了盒子实际大小（如果盒子有了高宽，再设定内边距，会把盒子撑大）

如果需要保证盒子大小跟最初设定得大小一致，则需要将盒子得高宽减去多出来得内边距即可。

外边距(margin)

让块级元素盒子水平居中显示

1

margin: 0 auto;

让行内或行内块元素水平居中对齐

行内元素或者行内块元素直接添加text-align:center

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们直接的垂直间距不是margin-bottom与margin-top之和。取两个值的较大者这种现象称为相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷

清除内外边距

网页元素很多都带有默认的内外边距，需要清除掉

1
2
3
4

* {
    margin: 0;
    padding: 0;
}

行内元素为了兼容性，尽量只设置左右内外边距

圆角边框

1

border-radius: 数值;

分别修改4个边的圆角效果：

1

border-radius: 10px 20px 30px 40px;

是按照顺时针方向进行修改

左上>右上>右下>左下

盒子阴影

1

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

浮动(float)

很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列找浮动。

1

float :属性值;

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动的特性

1. 浮动元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

重点特性

1. 脱离标准普通流的控制(浮)移动到指定位置(动)，(俗称脱标)
2. 浮动的盒子不再保留原先的位置

清除浮动

1

clear:属性值;

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响到下面的标准流了

其他清除浮动的方法

额外标签法也称为隔墙法，是W3C推荐的做法

额外表情法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>,或者其他标签（如<br/>等）。

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差。

注意：要求这个新的空标签必须是块级元素。

父级添加overflow

可以给父级添加overflow属性。

1

overflow: hidden | auto | scroll ;

给父级元素添加此项代码。

• 优点：代码简洁
• 缺点：无法显示溢出的部分

:after伪元素法

也是需要给父元素添加

1
2
3
4
5
6
7
8
9
10

.clearfix:after{
	content: "";
	display: block;
	height 0;
	clear: both;
	visibility: hidden;
}
.clearfix{ /* IE6、7专属 */
	*zoom: 1;
}

双伪元素清除浮动

给父元素加

1
2
3
4
5
6
7
8
9
10

.clearfix:before,.clearfix:after{
	content: "";
	display: table;
}
.clearfix:after{
	clear:both;
}
.clearfix{ /* IE6、7专属 */
	*zoom: 1;
}

总结

为什么清除浮动

1. 父级没高度
2. 子盒子浮动
3. 影响下面布局，就应该清除浮动

=======

还在持续更新中，咱们一起努力~