CSS 2.0中文手册提取码：dey1

0x1 CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)，分为内部样式和外部样式

是一种标记语言

内部样式表是定义在head元素标签内的一种“特征”定义，和html的内部样式相同，形式类似函数

外部样式表是定义在外部的CSS文件中，作用与内部样式相同

内联样式表是定义在标签元素内部的样式表

CSS语法规范

选择器、一条或多条声明

选择器的意思是，选择谁改样式，声明是改什么样式

菜鸟教程(runoob.com) /\*选择器{样式} 给谁改样式\*/ p{ color:red; }

<body>
<p>Hello World!</p>
</body>
</html>

选择器是用于指定CSS样式的HTML标签

属性和属性值是以键值对的形式出现

CSS一定要加分号;

属性和属性值之间有：

CSS代码风格

书写样式格式

紧凑型

p{color:red;}

展开式

p{
color: red;
}

样式大小写

采用小写

空格规范

属性前面，冒号后面保留空格

选择器和大括号后也要保留空格

p {
color: red;
}

0x2 CSS选择器

选择器的作用

针对不同的标签，有针对的进行选择

p {
color: red;
}

上述代码即把所有p段落标签定义为相同样式

选择器分类

基础选择器和复合选择器

基础选择器是由单个选择器组成

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

标签选择器

以HTML标签名称作为选择器，例如盒子div 或span

设置统一，不能差异化设置

菜鸟教程(runoob.com) /\*选择器{样式} 给谁改样式\*/ p { color: red; }

<body>
<p>Hello World!</p>
</body>
</html>

类选择器

语法：

点加类名，类名任取

.类名 {
color： red;
}

结构需要class属性来调用该类

.cat {
color： red;
}

Hello World!

一般结构都可以调用

不要使用中文、数字命名

div 就是一个盒子，用来装网页内容的

相当于通过不同方式引用样式。id和class差不多，只不过是引用的方式不同，都可以让多个段落引用相同的样式。

class

-—————-第一种————-

<html>
<head>

菜鸟教程(runoob.com) .center { text-align:center; }

<body>

标题居中
段落居中。 \--------------------第二种------------------ 菜鸟教程(runoob.com) p.center { text-align:center; }
<body>

这个标题不受影响
这个段落居中对齐。

类选择器-多类名

可以给一个标签指定多类名

统一修改方便

多类名用空格隔开 #可以有多个类名

多类名用空格隔开

id选择器

必须要用#开头，用id属性调用，只能调用一次

并且不能多类名使用，一般和js搭配

<body>
<h1 id=“para1”>Hello World!</h1>
<p id=“para1”>这个段落不受该样式的影响,才怪。</p>
<p id=“para1”>Hello World!</p>
</body>

通配符选择器

选取页面所有元素(标签)

语法

* {
属性值1;属性值2;
}

不需要调用，自动修改所以元素样式

* {
margin: 0;
padding: 0;
}

总结：

0x3 CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)

字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family:”微软雅黑”;}
div {font-family:Arial,”Microsoft Yahei”,”微软雅黑”;}

<head>
<style>
h2 {
font-family:’微软雅黑’; 可以使用中文，但英文兼容性更好
}
p {
font-family：’Microsoft YaHei’,Times,serif;
}
#系统根据上述的字体，首先使用带’‘的，如果用户没有则依次用后面的字体
</style>
</head>
<body>
<h2>
标题
</h2>
<p>
段落
</p>
</body>

尽量使用系统默认自带字体

常见字体：‘Microsoft YaHei’,tahoma,arial,’Hiragino Sans GB’;

字体粗细

CSS使用font-weight属性设置文本粗细

.bold {
font-weight:bold; 加粗
font-weight:700; 400为默认
}

属性值

描述

normal

默认值

bold

定义粗体

100-900

400等同于normal，而700等同于bold 注意这个数字后面不跟单位

文字样式

CSS 的 font-style 属性

p {
font-style：italic;
}
em {
font-style：normal;
}
<em> 表示斜体标签 </em> 将不再倾斜

字体符合属性

可以综合每个属性，顺序不能变，固定顺序，空格隔开

必须保留font-size和font-family ，其他可省略

body {
font:font-style font-weight font-size/line-height font-family;
}

字体属性总结

文本属性

文本颜色

div {
color:red;
}

预定义的颜色值(英语单词)、十六进制、RGB代码

加一位可改透明度

对齐文本

div {
text-align:center;
}

left左对齐（默认），right右对齐，center居中对齐

装饰文本

text-decoration 属性添加文本装饰

下划线overline、删除线line-through、默认none、下划线underline

a {
#取消下划线
text-decoration：none;
}

<a href=“#”> </a> 下划线

文本缩进

text-indent属性，将段落首行缩进

text-indent:20px; 可以为负，文字会看不见

text-indent:2em; 相对单位，即当前元素一个文字的大小

行间距

line-height属性设置行间距离

line-height:26px;

文本属性总结

0x4 插入样式表

根据书写的位置不同可分为三大类：

外部样式表(External style sheet)（链接式）

内部样式表(Internal style sheet) （嵌入式）

行内样式表(Inline style)

外部样式表

当样式需要应用于多个页面时，一般选择外部样式表,用外部的.css文件。

新建CSS文件

div {
color:pink;
}

使用link标签引入文件

<head>

内部样式表

页面内部需要一个特殊的样式时，一般用内部样式表

理论上标签可以放到文档任何位置

可以控制html页面

代码清晰

没有完全分离

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

行内样式表

内联样式，相当于对某个h或p 设置。慎用。

style标签属性，写法符合CSS规范

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

引入方式总结

实例注意事项

图片居中对齐，需将其父级居中对齐

0x5 Chrome调试工具

Elements

只能检查不能修改

Ctrl + 滚轮放大开发者工具大小

Ctrl + 0 复原浏览器大小

左边是代码，右边的CSS样式，每个调用都会有对应样式，如果没有可能式代码写错了

0x6 Emmet语法

来提高html/CSS 的编写速度，vscode集成

生成HTML标签

生成标签，直接输入标签名，再按tab键，就可以生成成对标签
如果想要生成多个标签，则键入div * 3，再按tab即可
父子级标签，>表示包含，即键入ul>li 按tab即可，也可*数操作
并列关系，即键入div+p,tab
生成包含类的标签，键入 . 类名 + tab键即可
键入 . demo$*5 按tab 即可以生成五个不同的div
键入div{文字内容}*5 按tab，可以生成代文字的五个div

生成CSS样式

使用首字母缩写加数值的形式，可以快速简写，提高速度

快速格式化代码/自动

vscode 右键格式化文本 shift + alt +f

0x7 CSS的复合选择器

复合选择器建立在基础选择器之上

更加准确高效的选择目标元素

常用符号选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器

改变子级标签的样式

元素1 元素2 {

样式声明，元素之间要空格隔开，只给元素2改变样式

}

例子：
ol li {
 color: pink; #改变ol里的所有li
}

ol li a {
 color: red; #只改变a
}

.命名 li a {
 对对相同标签下设置不同样式的方法
}


<ol>
 <li>第一行</li>
 <li>第二行</li>
 <li>第三行
 <a href="#"> 最小一行</a>
 </li> 
</ol>
<ol class="命名">
 <li>第三行
 <a href="#"> 最小一行</a>
 </li> 
</ol>

子选择器

子元素选择器元素(亲儿子选择器)

只选择本级的子级元素，子元素的子级不选择

.nav>a {
 color:blue;
}


<div class="nav">
 <a> </a> #只选择这个<a>
 <p>
 <a> </a>
 </p>
</div>

并集选择器

并集选择器可以选择多个标签，同时定义相同的样式，通常用于集体声明

 #逗号分隔，逗号表示和
div,
p { 
 color:pink;
}

<div>内容</div>
<p>内容</p>


div， #并集选择器，可包含复合选择器，一般竖着写，对下面整体起作用
p，
pig li{ 
 color:pink; 
}

<div>内容</div>
<p>内容</p>
<ul class="pig">
 <li>内容</li>
 <li>内容</li>
</ul>

伪类选择器（链接）

给链接添加特殊效果，比如给链接添加特殊效果

a:link /*选择所以我为被访问的链接*/

a:visited /*选择所有已被访问的链接*/

a:hover /*选择鼠标指针位于其上的链接*/

a:active /*选择活动链接(鼠标按下未弹起的链接)*/

a:link { 把未访问过的链接选出来，即未点击时的属性
 color:black; 
}

a:visited { 选择访问过的链接，即点击后改变颜色
 color:black; 
}

a:hover { 定义当鼠标位于其上时的属性
 color:black; 
}

a:active { 鼠标按下去没有弹起时的属性
 color:black; 
}

这四个定义的顺序不能改变

顺序记忆法：love hate

给链接指定样式要单独指定，如：

a {
 color:red;
}
<a href="#"> </a>

:focus伪类选择器

选取获得焦点的表单元素。

焦点就是光标，一般情况l类元素才能获取

input:focus {
 backround-color:yellow;
}

定义点击表单后输入时的效果

0x8 CSS的元素显示模式

元素显示模式

根据不同标签之间的特性，我们可以分成种类

每个标签有自己的显示模式，所以元素的显示模式

元素显示模式分类

HTML元素分两种，块元素和行内元素两种类型

块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，div是最典型的块级元素

块级元素特点

自己独占一行

高度、宽度、外边距以及内边距都可以设置

宽度默认是父级容器的100%

是一个容器及盒子，里面可以放行内或者块级元素

注意：文字类元素里不能放块级元素，p中不放div

行内元素

<a>、<strong>

行内元素特点

相邻行内元素在一行上，一行可以显示多个

高宽直接设置是无效的

默认宽度就是它本身内容的宽度

行内元素只能容纳文本或其他行内元素

注意：链接里不能再放链接

可以放块级元素，需要转换一下

行内块元素

<img/>图像、<input/>表单、<td>同时具有块级元素和行内元素的特点

行内块元素特点

和相邻的行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)

默认宽度就是它本身内容的宽度(行内元素特点)

高度、行高、外边距以及内边距都可以控制(块级元素特点)

###总结

元素显示模式转换

一种模式的元素需要另一种模式的特性

例如要增加的触发范围

行内元素转换为块级元素

display:block;

a {
 width:150px;
 height:50px;
 background-color:pink;
 display:block; #转换为块级元素，可以设置宽度高度
}
<a href="#">行内元素</a>

####块级元素转换为行内元素

display:inline;

div {
 width:300px; #无效
 height:100px; #无效
 background-color:purple;
 display:inline; #转换为行内元素后，宽高无效
}

<div>
 块级元素
</div>

####转换为行内块元素

display:inline-block;

span {
 width:300px;
 height:30px;
 background-color:skyblue;
 display:inline-block; #转换为行内块元素
}

<span>行内元素转换为行内块元素</span>

截图小工具：snipaste工具，F1、F3、alt

单行文字垂直居中的代码

CSS没有提供文字垂直居中的代码

让文字行高等于盒子高度

height:40px;
line-height:40px;

行高大于盒子高度偏下，行高小于盒子高度偏上

0x9 CSS的背景

背景属性

背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定

背景颜色

background-color:transprent|color;

transprent:背景色透明，一般默认是透明

color：指定颜色

背景图片

一般常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是便于控制位置

精灵图也是一种运用场景

background-image:none | url地址;
none无背景图片默认
url图片地址

背景平铺

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

repeat:背景图像在纵向和横向上平铺

no-repeat:背景图像不平铺

repeat-x:背景图像在横向上平铺x轴

repeat-y:背景图像在纵向平铺y轴

设置背景图片后，还可以设置背景颜色，背景颜色在最下方

背景图片位置重要

background-position:x y;

x坐标和y坐标，可以使用方位名词或者精确单位

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。

参数是方位名词

两个方位名词

background-position:center top;

center top 和 top center 效果相同

只写一个方位名词，第二个参数略，默认是水平居中显示的

background-position:top;

参数是精确单位

background-position:20px 50px; x轴，y轴

只指定一个，另一个默认居中

参数是混合单位

可以一个是精确单位，一个是方位名词，有顺序依然是一个X轴，另一个是Y轴

背景图像固定(背景附着)

background-attchment:scroll || fixed

scroll 背景图像时随着对象内容滚动，默认

fixed 背景图像固定

背景复合性写法

代码简写。没有顺序要求，空格隔开

bachground:black url(#) no-repeat fixed center top;

背景色半透明

IE9+ 才支持

背景色，盒子内的文字没有影响

background:rgba(0,0,0,0.3); #也可以写成.3
最后一个参数是alpha透明度值，取值范围在0到1之间

总结

小技巧 shift + alt + 选中位置下拉，再输入符号，即可统一输入

0x10 CSS的三大特性

层叠性、继承性、优先级

层叠性

选择器相同，样式相同时，遵循就近性原则

样式不相同，时只覆盖样式冲突的，不冲突的都体现

继承性

子标签继承父标签的样式

行高的继承

行高可以不跟单位

行高是相对继承，继承行高的倍数，相应的行高要经过计算

优先级

选择器权重

权重可以计算，通过叠加继承后，元素执行权重高的选择器的样式

判断时从左到右，不会进位

子级继承的权重是0，继承不会得到父级的权重

0x11 CSS的注释

多重优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

深入理解

CSS盒子模型

盒子模型

盒子模型、浮动和定位

（Box Model）包含：边距、边框、填充、和实际内容。

边框 border

宽度粗细、样式、颜色

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

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

solid : 　实线边框

样式参阅手册

边框简写

border:1px solid pink; 没有顺序要求

边框分开写

border-top:5px solid pink; 上边框

表格的细线边框

border-collapse:collapse;

collapse单词是合并的意思

border-collapse：collapse；表示相邻边框合并在一起

示例：
table {
 width:500px;
}
table,
td {
 border:1px solid pink;
  border-collapse:collapse; #表示相邻边框合并在一起
}

<tr>
 <th> neirong</th>
 <th> neirong</th>
</tr>

边框影响盒子实际大小

div {
 width:200px;
 hright:200px;
 bodergtound-color:pink;
 border:10px solid red;
}

<div>
 边框会额外增加盒子的大小，测量时不带边框
</div>

内边距（padding）

边框于内容之间的距离

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

padding简写

padding影响盒子实际大小

增加内边距，会额外增加盒子的的大小

如果要设置内边距，不影响大小，要相应缩小盒子大小两倍内边距的值

当导航栏文字长度不一致时，可以上设置不同的padding来撑大盒子

新浪导航

如果盒子本身没有指定width或height属性(默认页面宽)，则此时padding不会撑开盒子大小

只要设置了宽和高，再设置内边距，就会撑大盒子

外边距（margin）

盒子之间的距离

margin-left #左外边距

margin-right #右外边距

margin-top #上外边距

margin-bottom #下外边距

margin简写意义与padding一致

外边距可以让块级元素水平居中

满足条件：

盒子必须指定了宽度。

盒子左右的外边距都设置为auto。

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

margin:0 auto

如何让行内块或者行内元素水平居中，给父级元素添加text-align:center

外边距合并

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

即给父子元素定义外边距值时，只改变数值和整体盒子效果，不会将盒子分开

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

解决方案三种

1.给父级元素定义上边框border

border:1px solid transparent;

2.给父元素定义上内边距

padding:1px;

3.给父级元素添加

overflow:hidden;

还可以用浮动、固定，绝对定位等方法

清楚内外边距

通常写在CSS的第一部分

* {
 padding:0; 清楚内边距
 margin:0; 清除外边距
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以

PS基本操作

网页美工用ps来做，大部分切图都是再ps完成

综合案例

 <style>
 * {
 padding: 0;
 margin: 0;
 }

 body {
 background-color: aliceblue;
 }

 .box {
 width: 298px;
 height: 415px;
 background-color: pink;
 /* 让块级的盒子水平居中对齐 */
 margin: 100px auto;
 }

 
 .box img {
 width: 100%;
 }

 .review {
 height: 70px;
 font-size: 14px;
 padding: 0 28px;
 /* 段落没有width属性，padding不会撑开盒子 */
 margin-top: 30px;
 }

 .appraise {
 font-size: 12px;
 color: aliceblue;
 margin-top: 20px;
 padding: 0 28px;
 }

 .info {
 font-size: 14px;
 margin-top: 15px;
 padding: 0 28px;
 }

 /* 转行内块 */
 .info h4 {
 display: inline-block;
 }
 em {
 
 }
 </style>
</head>

<body>
 <div class="box">
 <img src="图片路径" alt="">
 <p class="review">快递牛，整体不错蓝牙可以。。</p>
 <div class="appraise">来自于sss的评价</div>
 <div class="info">
 <h4> 红米真的是很好呀</h4>
 <em>|</em>
 <span>99.9元</span>
 </div>
 </div>
</body>

圆角边框

盒子阴影

文字阴影

布局

绝对定位与相对定位应用场合

[表情]不规则网页设计

有些网页设计不会走分栏或块状布局的路线，而是随机地布置位置。在这种情况下，往往采用绝对定会或相对定位的各种组合方式来进行布局。

[表情]在画面上的设计

若需要一个元素覆盖在整个画面上，但不希望破坏原有的结构，这时可以采用绝对或相对定位，使得某个或者某些对象覆盖于画面之上，比如门户网站常出现的广告，便是相对或绝对定位的设计

[表情]交互式设计

下拉菜单一种常见的交互式设计，由于其菜单子项只在鼠标移上时才出现，因此是一种

需要覆盖在画面上方的设计。

另外一种情况，就是子菜单需要根据父级鼠标位置而变化，需要相对于鼠标所在的父级位置进行定位，这是一种相对定位。在这两种设计情况下，原则是当子菜单出现时，不破坏其它元素的布局，就需要其浮于画面之上，这时候便可以采用绝对或相对定位进行处理。

SE1903赵亚鑫

float 属性应用场景：1.想实现文字环绕效果。2.为了让块级元素并排。