CSS

CSS总结

一. CSS选择器

通过选择器选中html标签，设置标签的样式。

1.选择器分类

优先级：标签名称选择器 <class选择器 优先级<id选择器

(1) 元素选择器

语法：标签名{}

作用：选中对应标签中的内容

如：

p{}、div{}、span{}、ol{}.........

(2) 类选择器(class选择器)

语法：.class属性值{}

作用：选中对应的class属性值的元素

如：

<p calss="A">内容</p>

.A{
    属性名称：值;
    属性名称2：值2;
}

(3) id选择器

语法：#id属性值{}

作用：选中对应id属性值的元素(id属性值只能给1个，可以重复利用)

如：

<p id="A">内容</p>

#A{
    属性名称：值;
    属性名称2：值2;
}

(4) 关系选择器

后代选择器(包含选择器)：祖先元素或简介的包含后代元素

子代选择器：父元素直接包含子元素，子元素直接被父元素包含

(5)伪类选择器

锚伪类:
将一个标签的状态划分为以下几种:
1)鼠标未访问过的状态 link
2)鼠标经过这个元素的状态 hover
3)鼠标经过了并且点击在这个元素状态active
4)鼠标访问的状态(上面3)之后的,点击并且松开了) visited

代码:
		选择器:状态名称(不区分大小写)

---

二. CSS样式

1. 背景样式 background

• background-color：设置元素的背景，默认值transparent
• background-image：设置元素的背景图像，默认值none
• background-size：设置元素背景图像的大小，默认值auto
• background-position：设置背景图像的起始位置，浏览器中显示的位置 left ,center ,right；图像位置 top ,center ,bottom
• background-attachment：设置背景附着，默认值scorll(会随着其余部分滚动而滚动)；fixed(背景图像固定，不会随着页面滚动而滚动)
• background-repeat：设置背景图像是否重复，repeat:x轴 /y轴重复(默认值:跟图像的分辨率尺寸相关)；repeat-x:x轴重复；repat-y:y轴重复；no-repeat:不重复

background背景样式简写属性

background:background-color background-image background-repeat backgound-position

如background: darkgreen url(img/adv.jpg) no-repeat right top;

---

2. 文本样式

• font-family：可以选择字体库的类型
• font-style：字体样式；normal默认值正常显示 italic斜体文字
• font-weight：指定字体的粗细；normal默认值 bold适当加粗
• font-size：字体大小；
• color：文字颜色
• text-align:文本对齐方式；left左对齐默认、center居中、right右对齐
• text-decoration：文本装饰；underline 设置下划线、overline上划线、line-through中划线、none去掉文本装饰
• text-transform：文本转换；none默认值uppercase字母大写、lowercase字母小写、capitalize首字母大写
• text-indent：文本缩进，第一行文本设置缩进效果
• line-height：行高；属性用于指定行之间的间距
• word-spacing：单词间距；英文为主，中文需要敲空格组成单词
• text-shadow：文本添加阴影；默认2px格式为：垂直阴影像素px 水平阴影像素px 指定颜色 如 text-shadow:2px 2px blue;

---

3. 边框样式

​ 边框有四个边:颜色/宽度/样式(必须有)(单实线/虚线/点/双实线)

​ 默认的方向 上右下左

• border-color:边框颜色
• border-width:边框宽度
• border-style:边框风格；默认solid单实线、double双实线、dotted点、dashed虚线
• border-radius:边框弧度大小
• border-collapse：表格的边框是否被合并为一个单一的边框；默认值separate边框会被分开、collapse合并单一边框

border边框简写属性

border: 宽度 样式 颜色;
如border: 1px solid #000000;

---

三. 在HTML中引入CSS样式

1. 行内样式

在页面内html标签中单独去使用某个样式，可以使用行内样式

如<p style="color:red; front-size:18px;">

每一个标签都有style属性="CSS代码  样式名称:值;样式名称2:值2..."

2. 内部样式(又称内联样式)

在head标签内加入style标签

优点：一次性控制多个标签。

弊端：css代码和html标签混合使用，阅读性差，不利于后期管理。

如<style>
			a{
					font-size: 30px;
					color: orangered;
					text-decoration: none;
			}
</style>

3. 外部样式(又称外联样式)

在head标签内加入link标签，引入css文件

ink的href属性导入css文件地址
		rel:固定写法 stylesheet:系统库中的层叠样式表
如:<link href="css/my.css" rel="stylesheet" />

四. CSS盒子模型

1. 介绍

通过div将一个大的页面划分成很多块;
每一个块里面存储很多html元素,然后在通过css样式控制视图

万物皆可盒子

2. 图解

五、 CSS浮动

​ 浮动的框可以向左或向右移动，
​ 直到它的外边缘碰到包含框或另一个浮动框的边框为止

​ 由于浮动框不在文档的普通流中(不占据一行空间,单独的浮块)，所以文档的普通流中的块框表现得就像浮动框不存在一样

浮动属性(float属性)

float：left(向左浮动)

float：right(向右浮动)

清除浮动（clear属性）

clear：both(两边都不浮动 通用)

clear：left(左边不浮动)

clear：right(右边不浮动)