[阶段3 企业开发基础] 10. 前端基础 CSS篇

1 选择器

1.1 标签选择器

标签名 {

	属性：值；

}

p {
    color: red;
    font-size: 20px;
    …………
}

不能差异化显示

1.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

结构需要用class属性来调用 class 类的意思

css 中定义类 （.name）[name 不能为标签名]

.red {
    color:red;
}

HTML 中调用类(class=“name”)

<div class="red">
    选择css中的类，就可以改变相应的属性
</div>
<p class="red">
    我也要变红
</p>

1.3 id 选择器

id选择器 可以为标有id的HTML元素指定特定的样式。

HTML 元素以id属性 来设置id选择器，css中的id选择器以 # 来定义

#name {
    element: value;
    ……
}

HTML中，通过 id=“name” 来调用

<p id="name">
    ……
</p>

注意：

一个 id 选择器只能被调用一次，过后就不能被调用

1.4 通配符选择器

在CSS中，通配符选择器使用 *定义，它表示选取页面中所有元素（标签）。

*{
    element: value;
    ……
}

2 字体属性

2.1 字体系列

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

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

2.2 字体大小

CSS 使用 font-size 属性定义字体大小

p {
    font-size: 20px;
}
h1 {
    font-size: 30px;
}
/*标题标签比较特殊，需单独指定*/

2.3 字体粗细

CSS 使用 font-weight 属性定义字体粗细

一般更提倡用 数字(不跟px) 表示粗细

p {
    font-weight: 700;
}

注：400=normal 700=bold

2.4 字体样式

CSS 中使用 font-style 属性设置文本风格

p {
    font-style: normal;
}

属性值	作用
normal	浏览器的默认字体样式
italic	倾斜体

2.5 字体复合属性

字体复合属性可以把以上文字样式综合起来写，这样可以更节约代码

body {
    /*font-style font-weight font-size/line-height font-family*/
    /*顺序不能改变,字体大小和字体不能省略*/
    font: italic 700 20px "Microsoft yahei";
}

3 文本属性

3.1 文本颜色

div {
    color: red;
}

表示	属性值
预定义的颜色值	red;green;blue;
十六进制	#FF0000; #FF6600; #29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

3.2 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式

div {
    text-align: center;
}

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

3.3 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（最常用）取消a签自带下划线
underline	下划线。链接 a 自带下划线
overline	上划线
line-through	删除线

3.4 文本缩进

text-indent 属性用来指定文本的第一行缩进，通常是将段落的首行进行缩进

div {
    text-indent: 10px;
}

em 是一个相对单位，就是当前元素（font-size）1个文字的大小

p {
    text-indent: 2em;
}

3.5 行间距

line-height 属性用于设置行间距（行高）。可以控制文字 行与行之间的距离

p {
    line-height: 26px;
}

4 CSS 的引入方式

4.1 内嵌样式表

将CSS包含在HTML的<style> 标签中

4.2 行内样式表

行内样式表（内联样式表）是在元素标签内部的style 属性中设定CSS格式。适用于修改简单样式

<div style="color: red; font-size:12px;">
    …………
</div>

4.3 外部样式表

在HTML页面中，使用< link> 标签引入这个文件

<link rel="stylesheet" href="css文件路径">

5 Emmet 语法

1. 生成标签 直接输入标签名 按tab键即可，
2. 想要生成多个标签 加上* 就可以了比如 div*3 就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了
4. 如果有兄弟关系的标签，用 + 就可以了，如div+p
5. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了
6. 如果生成的div类名是有顺序的，可以用自增符号$

6 复合选择器

6.1 后代选择器

选择父元素里面的子元素。当标签发生嵌套时，内标签就成为外标签的后代

标签1 标签2 {
    element: value;
}

标签2 是标签1 子标签，二者用空格分开

6.2 子选择器

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

标签1 > 标签2 {……}

上述语法表明选择标签1 里面的所有直接后代（子标签）标签2

• 标签1 和标签2 中间用 大于号 隔开

6.3 并集选择器

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

并集选择器是各选择器通过英文逗号","连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

标签1，标签2{……}

用逗号隔开

6.4 伪类选择器

用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1 个，第n元素；

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover、：first-child

链接伪类

a:link  /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover  /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/

注意事项：为了确保生效，请按照LVHA的顺序声明：:link-:visited-:hover-:active.

foucs 伪类选择器

:foucs 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况下< input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:foucs {
    background-color: yellow;
}

7 元素显示模式

7.1 块元素

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

块元素的特点:

• 独占一行
• 高度、宽度、外边距以及内边距都可以控制
• 默认宽度是容器(父级宽度)的100%
• 是一个容器的盒子，里面可以放行内或者块级元素

注意：

• 文字类的标签内不能使用块级元素
• < p>标签主要用于存放文字，因此< p>里面不能放块级元素，特别是不能放< div>
• < h1>~< h6>同理

7.2 行内元素

常见的行内元素有< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>

其中< span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点：

• 相邻行内元素在一行上，一行可以显示多行
• 高、宽直接设置是无效的。
• 默认宽度就是他本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能放链接
• < a>里面可以放块级元素，但是给< a>转换一下块级模式最安全

7.3 行内块元素

在行内元素中有几个特殊的标签——< img/>、< input/>、< td>。

行内块元素的特点：

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

7.4 模式转换

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

8 背景属性

8.1 背景平铺

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

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

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

8.2 背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position: x y;

参数代表的意思是：x 坐标和y 坐标，可以使用 方位名词和精确名词

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

9 三大特性

9.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（覆盖）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

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

9.2 继承性

字标签会继承父类标签的某些样式，如文本颜色和字号；

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

9.3 优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

优先级判断的三种方式

• 间接选中就是指继承
  如果是间接选中, 那么就是谁离目标标签比较近就听谁的
• 相同选择器(直接选中)
  如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
• 不同选择器(直接选中)
  如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
  id>类>标签>通配符>继承>浏览器默认

10 盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

10.1 边框(border)

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

• 语法：

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

• 简写：

border:1px solid red; /*无顺序*/

• 边框分开写法：

border-top:1px solid red; /*只设置上边框，其余同理*/

• border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse;

• collapse 单词是合并的意思
• border-collapse:collapse; 表示相邻边框合并在一起

10.2 内边距（padding）

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

简写：

值的个数	表达的意思
padding：5px	1个值，表示上下左右都有5 像素内边距
padding：5px 10px	2个值，表示上下内边距是5 像素，左右内边距是10像素
padding：5px 10px 20px	3个值，表示上内边距5像素，左右内边距10像素，下边距20像素
padding：5px 10px 20px 30px	4个值，上右下左

10.3 外边距（margin）

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

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

块级盒子水平水平居中：

• 盒子必须指定宽度（width）
• 盒子左右的外边距都设置为auto

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

常见的写法有三种：

• margin-left：auto；margin-right：auto；
• margin：auto；
• margin：0 auto；

10.4 清除内外边距

* {
    padding: 0;
    margin: 0;
}

11 盒子样式

11.1 圆角边框

border-radius 属性用于设置元素的外边框圆角

语法：

border-radius:length;

• 设置圆形边框：
  • length 取为正方形块边长的一半；
• 设置两边圆形边框：
  • length 取为矩形块宽的一半；
• length 可以同时取四个值：
  • 分别对应：左上、右上、右下、左下

11.2 盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法：

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

值	描述
h-shadow	必需。水平阴影位置，允许负值
v-shadow	必需。垂直阴影位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影

默认为outset ，但不能主动设置为outset

11.3 文字阴影

在css3中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影位置，允许负值
v-shadow	必需。垂直阴影位置，允许负值
blur	可选。模糊距离
color	可选。阴影颜色

12 浮动（float）

12.1 浮动语法

网页布局第一准则：

• 多级块级元素纵向排列找标准流
• 多个块级元素横向排列找浮动

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

语法：

选择器 {float:属性值;}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

12.2 浮动特性

1. 浮动元素会脱离标准流(脱标)

   a. 脱离标准普通流的控制(浮）移动到指定位置(动)，(俗称脱标)

   b.浮动的盒子不再保留原先的位置

2. 浮动的元素会一行内显示并且元素顶部对齐

   a.注意∶浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮 动的盒子，多出的盒子会另起一行对齐。

3. 浮动的元素会具有行内块元素的特性

   a.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

   b.浮动的盒子中间是没有缝隙的，是紧挨着一起的

   c.行内元素同理

1.13 清除浮动

• 清除浮动本质是清除浮动元素造成的影响

• 如果父盒子本身有高度，则不需要清除浮动

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

选择器 { clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动影响 ）
right	不允许右侧有浮动元素（清除右侧浮动影响）
both	同时清除左右两侧浮动的影响

实际开发中，几乎只用clear：both

清除浮动的策略：闭合浮动

清除浮动的方法

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

2. 父级添加overflow属性

3. 父级添加after伪元素

4. 父级添加双伪元素

a.额外标签法

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

额外标签法会在浮动元素未尾添加一个空的标签。例如<div style=" clear:both”></ div>，或者其他标签(如< br />等)。

• 优点︰通俗易懂，书写方便

• 缺点︰添加许多无意义的标签，结构化较差

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

b.父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或 scroll 。

• 优点：代码简洁
• 缺点：溢出部分无法看见

c.after 伪元素法

：after 方式也是给父类添加

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

d.双伪元素清除浮动

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

13 CSS属性书写顺序

建议遵循以下顺序:

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

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

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

4. 其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient .

14 定位

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏墓中某个位置，并目可以压住其他盒子.

定位︰将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式＋边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

14.1 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

14.2 边偏移

边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom		底部偏移量，定义元素相对于其父元素下边线的距离。
left		左侧偏移量，定义元素相对于其父元素左边线的距离。
right		右侧偏移量，定义元素相对于其父元素右边线的距离

14.3 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

语法：

选择器 {position:relative;}

相对定位特点：

1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置（移动位置的时候，参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

14.4 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

语法：

选择器 {position:absolute;}

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2. 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原来的位置（脱标）

14.5 固定定位

固定定位是元素固定于浏览器可视区的位置。主要使用场景︰可以在浏览器页面滚动时元素的位置不会改变

语法：

选择器 {position:fixed;}

固定定位特点：

1. 以浏览器可视窗口为参照点移动元素

• 跟父类元素没有任何关系
• 不随滚动条滚动

2. 固定定位不再占有原先位置（脱标）

14.6 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器 {position:sticky;top:10px;}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
2. 粘性定位占有原先的位置(相对定位特点)
3. 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持。

14.7 定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

语法：

选择器 {z-index: 1;}

• 数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

15 元素的显示与隐藏

15.1 display

• display：none；隐藏对象
• display：block；出了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来位置。

15.2 visibility

visibility属性用于指定一个元素应可见还是隐藏。

• visibility : visible;元素可视

• visibility : hidden;元素隐藏

visibility隐藏元素后，继续占有原来的位置。

15.3 overflow

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超窋自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。