CSS

CSS

一、css简介

css是层叠样式表（Cascading Style Sheets）的简称，也叫标记语言

css的主要使用场景就是美化网页，布局页面

二、css规范

1、css规则由两个主要的部分构成：选择器以及一条或多条声明

2、样式分为：紧凑格式和展开样式

三、css基础选择器

基础选择器分为：标签选择器、类选择器、id选择器、通配符选择器

1、标签选择器

指用HTML标签名称作为选择器

优点：快速为同类型标签统一设置样式

缺点：不能设计差异化样式

2、类选择器

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

语法：

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

.类名{
	属性1：属性值1；
	...
}

注意：

不要使用纯数字、中文等命名，尽量使用英文字母

长名称或词组可以使用中横线来为选择器命名

命名要见名知意

2.1类选择器-多类名

一个标签可以有多个类名

多个类名必须要空格隔开

可以把公共的代码放在一起，方便调用，节省代码量，统一修改也方便

3、id选择器

id选择器以“#”定义,只能调用一次，一般和js搭配

#id名{
	属性1：属性值1；
	...
}

4、通配符选择器

通配符选择器以“*”定义，选取页面中所有的元素（标签）

通配符选择器不需要调用，自动给所有的元素使用样式

*{
	属性1：属性值1；
	...
}
//特殊情况使用
*{
	margin：0；
	padding：0；
}

四、css字体属性

font-family设置字体系列

font-size字号大小

font-weight字体粗细

font-style字体样式

font字体复合写法

五、css文本属性

color文本颜色

text-align 文本对齐

text-decoration文本装饰 添加下划线、删除线、上划线

text-indent 文本缩进

line-height 行间距

六、css的引入方式

css的三种样式表

1.行内样式表（行内式）在元素标签内部style中添加属性，适合简单样式

2.内部样式表（嵌入式）在

3.外部样式表（链接式）单独写入css文件中

七、css的复合选择器

• 复合选择器可以更准确、更高效的选择目标元素
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

1、后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素

语法：

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

上述表示选择元素1里面的所有元素2（后代元素）

元素1 和元素2 中间用空格隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2可以是儿子，也可以是孙子等，只要是元素1的后代就可以

元素1 和元素2可以是任意基础选择器

2.子选择器

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

语法：

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

上述语法表示选择元素1里面的 所有直接后代元素2

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子

3.并集选择器

并集选择器可以选择多组标签，同时定义相同的样式

语法：

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

上述语法表示选手元素1和元素2

元素1和元素2用逗号隔开

并集选择器通常用于集体声明

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

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

4.1链接伪类选择器

a:link 选择所有未被访问的链接

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

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

a:active 选择活动链接（鼠标按下未弹起的链接）

4.2 ：focus伪类选择器

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

input：focus{
	background-color:yellow;
}

八、css的元素显示模式

HTML元素一般分为块元素和行内元素两种类型

1.块元素

常见的块元素：

-

• 1. 标签是最典型的块级元素

特点：

独占一行，可以设置宽高

2.行内元素 也称内联元素

常见的行内元素：

特点：

不能独占一行，一行可以多个 不可以设置宽高 默认的宽度就是它本身内容的宽度

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

3.行内块元素

常见的行内块元素： 同时具有块元素和行内元素

特点：

不能独占一行，可以设置宽高

8.1元素显示模式转换

转换为块元素：display:block;

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

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

九、css的背景

1.css的背景颜色

background-color属性定义元素的背景颜色

background-color：颜色值；

元素背景颜色默认值：transparent(透明),也可以手动设置透明

2.css的背景图片

background-image属性描述了背景图片

bcakground-image：none无背景图|url（使用绝对或相对地址指定背景图像）；

3.css的背景平铺

background-repeat属性

background-repeat：repeat平铺|no-repeat不平铺|repeat-x：横向上平铺|repeat-y：纵向上平铺

4.css的背景方位

background-position属性改变图片的背景中的位置

background-position：x y；

position：top | center| bottom|left|center|right 方位名词

5.css的背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment：scroll背景图像随对象内容滚动 | fixed背景图像固定

十、css的三大特性

1.层叠性

层叠性原则：

样式冲突，遵守的原则就是就近原则

2.继承性

继承的权重为0

子承父业

3.优先级权重

• 选择器相同，则执行层叠性

• 选择器不相同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0.0.0.0
标签选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
id选择器	0.1.0.0
行内样式style=“”	1.0.0.0
！important重要的	无穷大

十一、css的盒子模型

盒子模型的组成

margin外边距>border边框>padding内边距>content实际内容

1.border边框

语法：

border：border-width 定义边框粗细 px||border-style 边框的样式 || border-color边框的颜色

2.padding内边距

padding属性边框与内容的距离

padding-left|right|top|bottom 左右上下

3.margin外边距

margin属性控制盒子与盒子之间的距离

margin-left|right|top|bottom 左右上下外边距

外边距块级元素水平居中

magrin-left：auto； magrin-right：auto；

margin：auto；

margin： 0 auto；

行内元素或者行内块元素水平居中给其父元素添加text-align：center既可；

4.消除内外边距

*{
	padding：0；消除内边距
	margin：0；消除外边距
}

十二、浮动（float）

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

语法：

选择器{float：属性值；}

none 不浮动 left 元素向左浮动 right 元素向右浮动

1.浮动特性

• 浮动元素会脱离标准流（脱标）
• 浮动的元素一行内显示并且元素顶部对齐
• 浮动元素会具有行内块元素的特性

2.清除浮动 -----父级添加overflow

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

十三、定位（position）

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

定位=定位模式+边偏移

边偏移：top bottom left right 定义元素相对于父元素的各个方位边偏移

static 静态定位

语法：

选择器{position：static；}

relative 相对定位

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

语法：

选择器{position：relative；}

特点：

• 移动位置的时候参照点是自己原来的位置
• 不脱标，继续保留原来位置

absolute 绝对定位

绝对定位是元素在移动位置的时候，是相对于祖先元素来说的（拼爹型）

特点：

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

fixed 固定定位

固定定位是元素固定于浏览器可视区的位置

• 以浏览器为可视窗口为参照点移动
• 跟父元素无关
• 不随滚动条滚动
• 固定定位不占原有的位置

定位的叠放顺序 z-index

语法：

选择器{z-index：1；}

元素的显示与隐藏

• display 显示隐藏

  none 隐藏对象 block除了转换元素 还有显示元素 display隐藏元素后，不再占有原来的位置

• visibility 显示隐藏

  visible 元素可见 hidden 元素隐藏 visibility隐藏元素后，继续占有原有的位置

• overflow 溢出显示隐藏

  visible 元素可见 hidden 不显示超过对象的内容 scroll 总是显示滚动条 auto溢出显示滚动条，不溢出不显示滚动条