一 .css三大特性

1 .继承性

有些属性, 如果已经在父元素中设置, 子元素中无需重新设置

color font-style font-weight font-size font-family

text-indent text-align

line-height

(1) 继承性失效的情况

继承的优先级, 没有浏览器的默认样式高

2 .层叠性

CSS 全名叫做"层叠式样式表", 层叠性是它很重要的性质

层叠性：多个选择器可以同时作用于同一个标签, 效果叠加

给同一个标签设置不同的样式, 样式会叠加

给同一个标签设置相同的样式, 写在最后的会生效(优先级一样)

当样式发生冲突的时候, 看优先级, 优先级高的显示, 如果优先级一样, 参见上一条

3 .优先级

通过权重来判断优先级

不同的选择器拥有不同的权重

继承 < 通配符 < 标签 < 类 < id < 行内 < !important 看important是不是继承，如果是继承则优先级最低

权重图

权重的叠加计算

二 .css 字体，颜色

1 .color属性

color 属性可设置文本内容的前景色

color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法

(1). color 属性 - rgb()表示法

颜色也可以用 rgb()表示法

通过红绿蓝三种颜色, 混合, 产生各种颜色

color: rgb(255, 0, 0);

color: rgb(红色的数值, 绿色的数值, 蓝色的数值); /* 范围 0~255 */

rgb(255,0,0): 红色

rgb(0,255,0): 绿色

rgb(0,0,255): 蓝色

rgb(0,0,0): 黑色

rgb(255,255,255): 白色

（2）. color 属性 - rgba()表示法

颜色也可以用 rgba()表示法，最后一个参数表示透明度，介于 0 到 1 之间，0 表示纯透明，1 表示纯实心\

（3）. color 属性 - 十六进制表示法

十六进制表示法是所有设计软件中都通用的颜色表示法

color: #ff0000; /* 相当于 rgb(255,0,0) */

十六进制 ff 就是十进制的 255，每种颜色分量都是 0~255 的数字

如果颜色值是#aabbcc的形式，可以简写为#abc

黑色是#000，白色是#fff，常见的灰色有#ccc、#333、#2f2f2f等

通常我们使用 snipaste 等截图工具吸取颜色

2 . font- 属性

(1) . font-size 属性

font-size 属性用来设置字号，单位通常为 px。

(2) . font-weight 属性

属性名font-weight 是字重的意思, 表现出来就是同一款字体, 有的粗, 有的细

font-weight 属性设置字体的粗细程度，通常就用normal和bold两个值

示例	含义
`font-weight: normal;`	正常粗细，与 400 等值
`font-weight: bold;`	加粗，与 700 等值
`font-weight: lighter;`	更细，大多数中文字体不支持
`font-weight: bolder;`	更粗，大多数中文字体不支持

（3）. font-style 属性

font-style 属性设置字体的倾斜

示例	含义
`font-style: normal;`	取消倾斜，比如可以把天生倾斜的`i`、`em`等标签设置为不倾斜
`font-style: italic;`	设置为倾斜字体（常用）
`font-style: oblique;`	设置为倾斜字体（用常规字体模拟，不常用）

（4）. font-family 属性

font-family 属性用于设置字体

1586066509331

（5）. 自定义字体

字体文件根据操作系统和浏览器不同，有 eot、woff2、woff、ttf、svg 文件格式，需要同时有这 5 种文件

当我们拥有字体文件之后，就可以用@font-face定义字体

3 . text- 属性

(1) . text-indent 属性

text-indent 属性定义首行文本内容之前的缩进量

取值: 数字+单位, 单位可以是 px, 也可以是 em

1em = 当前标签的 font-size 大小, 推荐使用 em

text-indent: 2em; /* 设置缩进两个字符 */


<style>
	p {
		text-indent: 2em;
	}
	p {
		font-size: 14px;
	}
</style>

<p>话说天下大事...</p>
<p>建宁二年...</p>
<p>时巨鹿郡有兄弟三人...</p>

(2) . text-decoration 属性

text-decoration 属性用于设置文本的修饰线外观的（下划线、删除线）

示例	含义
`text-decoration: none;`	没有修饰线
`text-decoration: underline;`	下划线
`text-decoration: line-through;`	删除线

开发中, 会使用text-decoration:none; 清除 a 标签默认的下划线


<style>
	a {
		text-decoration: none;
	}
</style>
...
<a href="#">百度一下, 你就知道</a>

(3) . text-align 属性

text-align 属性, 确定文字的水平对齐方式

值	描述
left	左对齐, 默认值
right	右对齐
center	居中对齐, 用的比较多

如果需要让文本水平居中, text-align属性需要给文本所在的标签(文本的父元素)设置

图片居中, 也是一样, 需要给图片所在的父元素, 加上text-align:center;


<style>
	.left {
		text-align: left;
	}
	.right {
		text-align: right;
	}
	.center {
		text-align: center;
	}
</style>

<h1>hello world</h1>
<h1 class="left">hello world</h1>
<h1 class="right">hello world</h1>
<h1 class="center">hello world</h1>

(4) . line-height

line-height 属性用于定义行高

line-heigh 属性的单位可以是以 px 为单位的数值

line-height: 30px;

line-heigh 属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法

line-height: 1.5;

line-heigh 属性也可以是百分数，表示字号的倍数

line-height: 150%;

如果想取消上下间距, 设置line-height:1;

. 字体属性属性连写

font 属性可以用来作为font-style, font-weight, font-size, line-height和font-family属性的合写

行高可以写到连写里面, font: style weight size/line-height family;

<style>
	.one {
		font: italic bold 22px/44px "courier new";
	}
</style>
<p class="one">Lorem ipsum dolor sit amet...</p>

(5) . 单行文字的水平垂直居中

设置行高=盒子高度，即可实现单行文本垂直居中

选择器 { font: font-style font-weight font-size/line-height font-family; }

设置text-align: center，即可实现文本水平居中

水平居中: 在父级设置text-align:center;

垂直居中: 在父级设置line-height:父级的高度;

<style>
	h1 {
		border: 1px solid red;
		width: 400px;
		height: 300px;
		text-align: center; /* 水平居中 */
		line-height: 300px; /* 垂直居中 */
	}
</style>

<h1>hello world</h1>

（6）. 设置鼠标的形状

1596005766922

元素:hover {
	cursor: pointer;
}

三 . 盒模型

1 . 什么叫盒模型

TML 标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

(1). width、height 不是盒子总宽高

盒子的总宽度 = width + 左右padding+ 左右border

子的总高度 = height + 上下padding + 上下border

(2) . width, height 属性

width 属性表示盒子内容的宽度

height 属性表示盒子内容的高度

height 属性的单位通常是 px，移动端开发也会涉及百分数、rem 等单位

2. 内边距 padding 属性

padding 是盒子的内边距，即盒子边框内壁到文字的距离

padding ==> 内边距

(1) .padding是四个方向的

小属性	含义
padding-top	上 padding
padding-right	右 padding
padding-bottom	下 padding
padding-left	左 padding

（2）. padding 的四数值写法

padding 属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的 padding

padding: 10px 20px 30px 40px;

div {
	padding: 20px 30px 40px 50px;
}

/* 相当于... */
div {
	padding-top: 20px;
	padding-bottom: 40px;
	padding-left: 50px;
	padding-right: 30px;
}

(3) . margin 属性详解

margin 是盒子的外边距，即盒子和其他盒子之间的距离

小属性	含义
margin-top	上 margin，"向上踹"
margin-right	右 margin，"向右踹"
margin-bottom	下 margin，"向下踹"
margin-left	左 margin，"向左踹"

	margin: 20px;
}

/* 相当于... */

div {
	margin: 20px 20px 20px 20px;
}

/* 相当于... */

div {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
}

(4). margin 的塌陷

如果有两个元素, margin:20px, 那这两个元素之间的距离应该是多少呢?

本能的, 我们觉得应该是第一个元素的margin-bottom加上第二个元素的margin-top

竖直方向的 margin 有塌陷现象：

小的 margin 会塌陷到大的 margin 中, 从而 margin 不叠加，只以大值为准

盒子的水平居中

盒子左右两边的 margin 都设置为 auto，盒子将水平居中

	margin: 0 auto; /* 上下是0，左右自动 */
}

盒子的垂直居中，需要使用绝对定位技术实现

四. 背景颜色

css 选择器 {
	background-color: 颜色值;
}

颜色值, 可以是单词, rgb, rgba, 十六进制

div {
	width: 200px;
	height: 200px;
	border: 1px solid red;
	background-color: red;
	/* background-color: rgb(255, 0, 0); */
	/* background-color: rgba(255, 0, 0, 0.5); */
	/* background-color: #ff0000; */
}

1. 背景图片


css选择器 {
	background-image: url("图片的地址");
}

2.背景重复

css选择器 {
	background-repeat: repeat-x;
}

3.背景大小

css选择器 { background-size: 100px 200px; }

4.背景裁切

background-clip 属性用来设置元素的背景裁切到哪个盒子

值	含义
border-box	背景延伸至边框（默认值）
padding-box	背景延伸至内边（padding），不会绘制到边框处（仅在 dotted、dashed 边框可察觉）
content-box	背景被裁剪至内容区

5.背景附着及背景位置

css选择器 {
	background-attachment: scroll;
}

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。

div {
	width: 1200px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-image: url("https://markdown-1253389072.cos.ap-nanjing.myqcloud.com/20210821222343.png");
	height: 1200px;
	border: 1px solid red;
	background-attachment: scroll;
}

背景位置

css选择器 {
	background-position: x y;
}

css三大特性及css 字体，颜色，盒模型(贰)