CSS总结

目录

CSS总结一 CSS概念1.1 CSS语法二 CSS引入方式2.1 行内样式2.2 内部样式2.3 外部样式三 CSS选择器3.1 基本选择器3.2 组合选择器3.4 分组四 CSS属性相关4.1 基本属性4.2 字体属性4.3 文本颜色4.4 文字属性4.5 背景属性4.6 边框4.7 display属性4.8 CSS盒子模型4.9 定位(position)一 CSS概念1.1 CSS语法CSS引入方式2.1 行内样式2.2 内部样式2.3 外部样式三 CSS选择器3.1.1 标签选择器3.1.2 ID选择器3.1.3 类选择器3.1.4 通用选择器3.2 组合选择器3.2.1后代选择器3.2.2子元素选择器3.3 分组四 CSS属性相关4.1 基本属性4.1.1宽和高4.2 字体属性4.2.1文字字体4.2.2字体大小4.2.3字体粗细4.3 文本颜色4.4 文字属性4.4.1文字对齐4.4.2文字装饰4.5 背景属性4.6 边框4.6.1外边框属性4.7 display属性4.8 CSS盒子模型4.8.1 margin外边距4.8.2 padding内填充4.8.3 float浮动4.8.3.1 清除浮动4.9 定位(position)4.9.1相对定位4.9.3固定定位

一 CSS概念

1.1 CSS语法

二 CSS引入方式

2.1 行内样式

2.2 内部样式

2.3 外部样式

三 CSS选择器

3.1 基本选择器

3.2 组合选择器

3.4 分组

四 CSS属性相关

4.1 基本属性

4.2 字体属性

4.3 文本颜色

4.4 文字属性

4.5 背景属性

4.6 边框

4.7 display属性

4.8 CSS盒子模型

4.9 定位(position)

一 CSS概念

CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式。

1.1 CSS语法

每个CSS样式有两个组成部分: 选择器和声明。声明又包括属性和属性值, 每个声明之后用分号结束。

CSS引入方式

2.1 行内样式

行内样式是在标记的style属性中设定CSS样式. 不推荐大规模使用。

2.2 内部样式

内部样式是将CSS样式集中写在网页的< head>< /head>标签对应的< style></ style>标签对中。

2.3 外部样式

外部样式是将CSS写在一个独立的文件中, 在HTML文件的< head>< /head>标签中进行链接引入(< link rel="stylesheet" href="一般为CSS文件的相对路径" type="text/css"/>)

三 CSS选择器

CSS选择器本质上是选择标签(也可称作元素)进行添加样式的操作。

3.1.1 标签选择器

可通过标签的名字进行选择, 从而为标签添加样式。只能应对需要同样样式装饰少量标签的情况, 若想装饰多个相同标签中的某一个时, 这种选择器不适用。

3.1.2 ID选择器

标签具有id属性, 并且同类标签的id不能重复, 因此可以通过id属性进行唯一选择, 即ID选择器。若标签非常多, 这种方法将会过于繁琐, 因此应对大量的标签应该采用更加方便的选择器。

3.1.3 类选择器

标签除了可以定义id属性外还可以定义clss属性(即类属性), 多个不同的标签可以属于同一个类(即具有完全相同的class属性--它们之间class的值相等), 通过选择class实现对大量的标签进行添加样式操作。

3.1.4 通用选择器

一种可以选择所有标签的方法。

3.2 组合选择器

组合选择器强调的是标签之间的包含关系, 通过这种关系可实现分组为标签添加样式的操作。

3.2.1后代选择器

后代选择器会选择父标签内指定的所有子标签。

3.2.2子元素选择器

子元素选择器会选择父标签内指定的所有子标签。

3.3 分组

当多个元素的样式相同的时候, 没有必要重复地为每个元素都设置样式, 可以通过在多个选择器之间, 使用逗号分隔的, 分组选择器(多个选择器组成的整体称为分组选择器)来统一设置元素样式。

四 CSS属性相关

4.1 基本属性

4.1.1宽和高

width和height属性可以为元素设置宽和高。为元素设置宽度: width。为元素设置高度: height。块级标签才能设置宽和高, 内联标签的宽和高由其内容决定。

4.2 字体属性

4.2.1文字字体

font-family可以设置文字的字体。

4.2.2字体大小

font-size属性可以设置字体的大小, 通常是像素级(单位为px)。

4.2.3字体粗细

font-weight属性可以设置字体的字重(粗细)。

4.3 文本颜色

color属性可以设置字体的颜色颜色属性有三种设置方式（1）十六进制值 - 如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）可将两位当作一种颜色, 而整个六位的值表示三种颜色的混合色, 通常遇到相同的两位可以简写 - 如: #FFF(白色)。（2）RGB值 - 如: rgb(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0。rgba值可以设置透明度 - 如rgba(0, 0, 0, 1) # 黑色, 不透明(透明度0-1), 第四个值为alpha, 指定了色彩的透明度/不透明度（3）颜色的名称 - 如: red

4.4 文字属性

4.4.1文字对齐

text-align属性规定元素中的文本的水平对齐方式。值描述left左对齐,默认值right右对齐center居中对齐justify两端对齐

4.4.2文字装饰

text-decoration属性用来给文字添加特殊效果。值 描述none 标准文本underline定义文本下的一条线overline定义文本上的一条线line-through 单删除线

4.5 背景属性

background属性可以设置各种与背景相关的样式。属性描述background-color背景颜色background-image背景图片background-repeat背景重复background-position背景位置如上所示的属性中, 对于设置背景图片来说, 背景重复是默认的. 图片最终会平铺满整个包裹它的标签, 即重复是针对背景图片而言的。on-repeat可以取消平铺。

4.6 边框

4.6.1外边框属性

边框属性 描述border-width外边框宽度border-style外边框样式border-coloer外边框颜色border-radius外边框圆角将border-radius设置为长或高的一半即可得到一个圆形(椭圆)。边框样式值描述none无边框solid实线边框dotted点状虚线边框dashed矩形虚线边框double双实线边框(共享边框宽度)

4.7 display属性

display属性用来控制HTML元素的显示效果。display: "none"元素存在于HTML文档中但不在浏览器中显示。display: "block"默认占满整个页面宽度, 若指定宽度，则会用margin填充剩下的部分。display: "inline"按行内元素显示, 此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会生效。display: "inline-block"使元素同时具有行内元素和块级元素的特点。

4.8 CSS盒子模型

在CSS中, 每个标签也可以称为一个盒子模型。属性描述margin外边距(用于控制元素与元素之间的距离)border边框(围绕在内填充和内容之外的边框)padding内填充(用于控制内容与边框之间的距离)content内容(盒子的内容, 显示文本和图像)

4.8.1 margin外边距

margin属性最基本的用途就是控制元素周围空间的间隔, 从视觉角度上达到元素之间相互隔开的效果。通常浏览器会自动添加margin属性, 使得视觉上浏览器边界与内容之间存在一定的间隔. 因此在编辑CSS样式时通常会利用body{margin: 0;}设置body上下左右的margin都为0。上面的例子中, 上下两个标签都设置了margin, 并且两个标签具有不同的margin值. 结果显示, 相邻标签的margin不会发生叠加, 而是使用两者中较大的值来隔离两者。

4.8.2 padding内填充

padding属性的使用与margin相同.用于控制内容与边框之间的距离。

4.8.3 float浮动

在CSS中, 任何元素都可以浮动(现多用来做网页布局)float属性可以实现浮动效果利用div{float: left;}可以使< div>元素基于父级元素向左浮动(最左端)利用div{float: right;}可以使< div>元素基于父级元素向右浮动(最右端)浮动的元素不会覆盖行级元素, 行级元素会为浮动的元素自动让位, 实现环绕效果. 但是浮动的元素会覆盖块级元素(浮动的副作用, 即所谓的塌陷问题, 浮动元素所占有的原空间塌陷, 导致其后的块级元素进行补位, 产生覆盖现象)。值描述left向左浮动right向右浮动none默认值, 不浮动

4.8.3.1 清除浮动

浮动主要有三种方法（1）加高法（2）overflow:hidden（3）利用clear属性固定高度法将具有clear属性的空的(高度为0)块级元素与具有浮动属性的元素包裹于同一父元素内。

4.9 定位(position)

position(定位)一般用来做一些小的布局, 大范围的布局一般用float(浮动)来做。值 描述relative相对定位absolute绝对定位fixed 固定"定位属性"(需要确切理解概念)属性描述top相对原始位置或参照元素位置(盒子模型)上边界的偏移量right相对原始位置或参照元素位置(盒子模型)右边界的偏移量bottom相对原始位置或参照元素位置(盒子模型)下边界的偏移量left相对原始位置或参照元素位置(盒子模型)左边界的偏移量偏移量为正值即向反方向偏移, 偏移量为负值即向同方向偏移。相对定位相对于原始位置(盒子模型), 绝对定位与固定定位相对于参照元素位置(盒子模型)。

4.9.1相对定位

relative相对于元素的原始(盒子模型)位置, 并且即使发生偏移, 元素仍占有原始空间(与浮动不同, 空间不会塌陷)。

###4.9.2绝对定位

absolute删除元素的原始空间(空间塌陷), 相对于距离最近的已定位父元素定位, 若没有已定位父元素则相对于

body元素定位。

无论先前属于行级元素还是块级元素, 元素定位后变为块级元素。

4.9.3固定定位

fixed固定元素的位置, 不受页面滚动影响。可通过top, right, bottom, left等偏移属性定位。理论上, 被设置为fixed的元素会被定位于浏览器窗口的一个指定位置, 不论窗口是否滚动, 它都会固定在这个位置。利用fixed实现一个返回顶部框(滚动页面, 返回顶部框不会跟着页面滚动)。

若一个元素设置了position: absolute; (绝对定位)或position: fixed; (固定定位)属性那么它就不能再设置float(浮动)属性。