课程目标:

学会使用CSS选择器

熟记CSS样式和外观属性

熟练掌握CSS各种选择器

熟练掌握CSS三种显示模式

熟练掌握CSS背景属性

熟练掌握CSS三大特性：层叠、继承、

熟练掌握CSS盒子模型

熟练掌握CSS浮动**

熟练掌握CSS定位
10.熟练掌握CSS高级技巧强化CSS

0. 没有CSS时

<hr color="red" width="400" />
<p color="red">内容</p>    <!-- 修改颜色不管用  -->

1. CSS书写位置

1.1 行内样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性

1.2 内部样式

<head>
	<style type="text/css">
	    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
	</style>
</head>

上面type="text/css"在html5中可以省略，但是一般还是写上比较好

1.3 外部样式

<head>
  <link href="CSS文件的路径"  rel="stylesheet" type="text/css" />
</head>

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。（必须）
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。（可选）
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。（必须）

1.4 对比

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

2. 基础选择器

2.1 标签选择器

2.2 类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<p class="class1 class2 class3">内容</p>

类的命名规则

长名称或词组可以使用中横线来为选择器命名。如first-p
不建议使用“_”下划线来命名CSS选择器，即是浏览器兼容问题，为了给JavaScript让路。
不要纯数字、中文等命名，尽量使用英文字母来表示。

2.3 多类名选择器

<style>
	.red{
		color:red;
	}
	.font20{
		font-size:20px;
	}
</style>

<div class="red font20">内容</div>

★ 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

<style>
	.red{
		color:red;
	}
	.font20{
		font-size:20px;
		color:blue;      /* 由于这个样式后定义，所以是蓝色 */
	}
</style>

<div class="red font20">内容</div>    <!-- 样式和class属性中的值顺序没有关系 -->

2.4 id选择器

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

<style>
	#div1{
		color:red;
	}

</style>

<div id="div1">内容</div>

id属性更多是给JS来用，class主要给CSS用

2.5 通配符选择器

* {
	margin: 0;
	padding: 0;
}

2.6 后代选择器

祖先后代的关系用空格分开

祖先 后代{
	margin: 0;
}

2.7 子代选择器

父亲儿子之间用 >

父亲 > 儿子{
	margin: 0;
}

2.8 交集选择器

div.blue{
	color: blue;
}

2.9 并集选择器

选择器1, 选择器2 {
	color: blue;
}

2.10 伪类选择器

类是一个.，伪类是2个.——:

以后还会学伪元素选择器，四个点——::

a:link      /* 未访问的链接 */
{
	color: #3c3c3c;
}
a:visited   /* 已访问的链接 */
a:hover     /* 鼠标移动到链接上 */
a:active    /* 选定的链接 */

要注意书写顺序：link->visited->hover->active，可以记：lovehate或者lv hao

3. CSS字体样式属性（font家族）

3.1 font-size

相对单位长度	说明
rem
em	相对于当前对象内文本的字体尺寸
px	像素

绝对单位长度	说明
in	英寸
cm	厘米
mm	毫米
pt	点

3.2 font-family

font-family: "微软雅黑", "宋体";
font-family: "microsoft yahei","simsun", Arial;

1. 注意事项

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

2. Unicode

设置字体名称的时候，为了防止浏览器兼容性以及编码格式导致的中文不支持，有下列2种方法：

使用英文名称设置字体： “microsoft yahei”, “simsun”
直接使用Unicode编码：font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

一般使用微软雅黑和宋体就可以了

3.3 font-weight

可选值
normal
bold
bolder
lighter
100~900(100整数倍)

bold相当于700
normal相当于400
建议使用数字

3.4 font-style

本身html中<em>和<i>是斜体

em {
	font-style: normal;
}

可选值	效果
normal
italic	倾斜
oblique	倾斜

3.5 font

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

不能更换顺序，各个属性以空格隔开
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

div1 {
	font: 12px "微软雅黑";
}

4. 文本外观

4.1 color

直接使用预定义的颜色名称
使用十六进制：#FF0033
使用rgb数值：rgb(255,0,0) 或者 rgb(100%, 0%, 0%) , 0%中 %不能省略

{
	color: blue;
	color: #FF0033;
	color: rgb(255,0,0);
}

4.2 line-height

设置行高（行间距）, 三种方式：

像素px
相对值em
百分比%

p{
	line-height: 24px;
}

一般情况下，行距比字号大7.8像素左右就可以了。

行高的测量

在这里插入图片描述

因为行高= 上距离+文字高度+ 下距离，并且上距离=下距离。所以：

如果行高= 盒子高度, 则单行文字就会居中显示
如果不给行高，则上边距和下边距几乎为0，所以文字顶着最上方
如果行高大于盒子高度，则文字偏下
如果行高小于盒子高度，则文字偏上

4.3 text-align

文本内容的水平对齐方式，相当于html中的align对齐属性，是让盒子里面的内容水平居中，而不是让盒子居中对齐

可选值：

left
center
right

4.4 text-indent

首行缩进，中文段落常用，属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位

p{
	text-indent: 2em;
}

4.5 text-decoration

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

a {
	text-decoration: none;
}

4.6 文本标签小结：

标签	样式效果
`em`/`i`	`font-style: normal/italic`
`b`/`strong`	`font-weight: 400/700`
`u`/`ins`	`text-decoration: none/underline`
`s`/`del`	`text-decoration: none/line-throught`

5. CSS注释

/* 这里是注释 */

6. display

HTML标签一般根据display属性分为块标签和行内标签两种类型，它们也称块元素和行内元素。

6.1 块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

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

块级元素的特点：

总是从新行开始
高度，行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素。

6.2 行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

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

行内元素的特点：

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

链接里面不能再放链接。

链接里面可以放块级元素

6.3 行内块元素（inline-block）

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块）在一行上, 但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。

6.4 转换

块转行内：display:inline;

行内转块：display:block;

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

6.5 导航栏案例：

.nav{
	text-align: center;
}
.nav a {
    display: inline-block;
    text-align: center;
    font: 16px/50px "微软雅黑";
    height: 50px;
    width: 100px;
    background-image: url("images/bg.png");
    text-decoration: none;
}

.nav a:hover {
    background-image: url("images/bgc.png");
}

案例知识点：

行内元素、行内块元素可以当做文本，可以让父级块设置text-align: center;来居中
设置line-height=行高可以让单行文本垂直居中

常见元素display

block: <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
inline: <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
inline-block: <img />、<input />、<td>

7. CSS书写规范

7.1 空格规范

【强制】选择器与 { 之间必须包含空格。

.selector { }

【强制】属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。

font-size: 12px;

7.2 选择器规范

【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

7.3 属性规范

【强制】属性定义必须另起一行。

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

8. CSS 三大特性

层叠性
继承性
优先级

8.1 层叠性

如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

就近原则:

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

8.2 继承性

<style>
.parent{
	color: blue;    
	font-size: 50px;
}
</style>


<div class="parent">
	<p>child</p>
</div>

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

8.3 ★优先级

CSS specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承优先级表格（CSS Specificity）：

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个`!important`贡献值重要的	∞ 无穷大

权重相同时，CSS遵循就近原则。
权重是会叠加的：比如 div p就大于 p
权重是没有进位的
*和继承的权重为0

9. 背景

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

9.1 背景图片

background-image: none | url()


background-image: url(images/sm.jpg);

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）
可以和 background-color 连用：如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

背景图片后面的地址，url不要加引号

9.2 背景平铺

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

9.3 背景图片位置

设置背景图片的位置，必须有background-image。默认值为 0%,0%，左上角对齐。

background-position : length || length

background-position : position || position 
/* position : 　top | center | bottom | left | center | right  */

例子：
background-position: left;
background-position: top;

background-position: center 10px;
background-position: 10px;    
background-position: 10px 50px;

使用注意点：

position后面跟方位名词时，他们之间可以没有顺序
position后面可以具体值，顺序是： x y
如果position后面只跟一个 数值/方位，另一个默认是居中
需要图片显示最下面那部分的时候，可以灵活使用bottom

背景图片居中案例

为了兼容不同分辨率的电脑中，让所有用户都能看到背景图片是水平居中的，设置背景图片位置为：

background-position: center top;
background-repeat : no-repeat;
backgorund-color: black;

9.4 背景附着

background-attachment : scroll | fixed

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定在视窗中

9.5 背景颜色

background-color: 颜色;

表示透明度：（CSS3）

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

最后一个值是α,取值范围是0~1， 0 代表全透明， 1代表不透明

9.5 background 简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

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

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

10. 盒子模型

**CSS就三个大模块： **

盒子模型
浮动
定位
其余的都是细节

10.1 border

border : border-width || border-style || border-color

常用的border-style	说明
none	没有边框即忽略所有边框的宽度（默认值）
solid	边框为单实线(最为常用的)
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线


设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度样式颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

a. 表格中的边框合并

table{ border-collapse:collapse; }

10.2 padding

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

注意 padding会将已经设置好宽和高的盒子撑开，为了解决这个问题，应该将宽和高减去撑开部分的尺寸，或者设置

box-sizing: border-box

10.3 margin

a. 盒子水平居中

margin: 上下距离 auto;

margin-left: auto; /* 左边margin自动，就会往右边跑 */

实际开发中设置标题：

.header{ width:960px; margin:0 auto;}

b. 何时插入图片，何时背景图片

logo，小地方等等用背景图片
产品等等用插入图片

background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */

c. 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

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

在这里插入图片描述

解决方案：只设置上或者下其中的某一个就行了

d. 外边距塌陷

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

在这里插入图片描述

解决方案:

设置外盒子的上padding，至少1像素
设置外盒子的上border，至少1像素
设置父元素的 overflow:hidden
其他…

10.4 圆角（CSS3）

border-radius: 50%;

border-radius: 1px 1px 2px 3px;  /* 从左上 开始，顺时针*/

10.5 阴影（CSS3）

前两个值是必写的，其他可以按顺序省略。
内外引用的值是 : inset/outset，默认是outset

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

box-shadow: 10px 10px 2px 2px rgba(0,0,0,0.4);

可以参考别人网站的，用开发者工具调试，比如小米的：

box-shadow: 0 15px 30px rgba(0,0,0,0.1);

鼠标放上去出阴影效果：

div{
	width:200px;
	height:200px;
	transition: all 1s;
}

div:hover{
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
}

前端视频学习（二、CSS（上））

目录

课程目标:

0. 没有CSS时

1. CSS书写位置

1.1 行内样式

1.2 内部样式

1.3 外部样式

1.4 对比

2. 基础选择器

2.1 标签选择器

2.2 类选择器

类的命名规则

2.3 多类名选择器

2.4 id选择器

2.5 通配符选择器

2.6 后代选择器

2.7 子代选择器

2.8 交集选择器

2.9 并集选择器

2.10 伪类选择器

3. CSS字体样式属性（font家族）

3.1 font-size

3.2 font-family

1. 注意事项

2. Unicode

3.3 font-weight

3.4 font-style

3.5 font

4. 文本外观

4.1 color

4.2 line-height

行高的测量

4.3 text-align

4.4 text-indent

4.5 text-decoration

4.6 文本标签小结：

5. CSS注释

6. display

6.1 块级元素(block-level)

块级元素的特点：

6.2 行内元素(inline-level)

行内元素的特点：

6.3 行内块元素（inline-block）

行内块元素的特点：

6.4 转换

6.5 导航栏案例：

案例知识点：

常见元素display

7. CSS书写规范

7.1 空格规范

7.2 选择器规范

7.3 属性规范

8. CSS 三大特性

8.1 层叠性

8.2 继承性

8.3 ★优先级

9. 背景

9.1 背景图片

9.2 背景平铺

9.3 背景图片位置

9.4 背景附着

9.5 背景颜色

9.5 background 简写

10. 盒子模型

10.1 border

a. 表格中的边框合并

10.2 padding

10.3 margin

a. 盒子水平居中

b. 何时插入图片，何时背景图片

c. 外边距合并

d. 外边距塌陷

10.4 圆角（CSS3）

10.5 阴影（CSS3）

猜你喜欢