CSS与CSS3美化页面
一、简介
- CSS是（Cascading Style Sheets），中文名叫层叠样式表。
- 样式内定义的是如何显示HTML元素，目的是美化HTML页面
- 样式通常储存在样式表中（.css文件），实现了样式和内容分离，并且挺高了工作效率
- 对个样式定义会发生层叠，后者可以覆盖前者样式
二、样式类型
- 外部样式
- 样式保存在单独的后缀名为
.css文件中，使用的时候通过<link>标签引入
- 样式保存在单独的后缀名为
- 内部样式
- 写在HTML文件
<head>标签的<style>标签内
- 写在HTML文件
- 内联样式
- 写在HTML文件
<body>标签内的标签里作为属性
- 写在HTML文件
三、常用选择器
- HTML选择器（标签选择器）
- 作用：修饰指定标签
- 格式：
标签名{ 样式 }
- 类选择器
- 作用：修饰class属性为特定值的标签，可以通过标签名进一步缩小范围
- 格式：
- 匿名:
.属性值{ 样式 } - 非匿名：
标签名.属性值{ 样式 }
- 匿名:
- id选择器
- 作用：修饰id属性为特定值的标签
- 格式：
#id值{ 样式 } - 注意：优先级高于类选择器且id属性要是唯一的，不能多个标签都有相同的id属性
- 选择器组
- 作用：同时修饰多个标签
- 格式：
标签名1,标签名2,...,标签名n{ 样式 }
- 伪选择器
- 作用：修饰某个标签的特定属性的值
- 格式：
标签名:属性名{ 样式 }或者标签名::属性名{ 样式 }
- 关系选择器
- 作用：根据标签之间的关系来对特定的标签进行修饰
- 格式：
标签1 标签2{ 样式 }、标签1 > 标签2{ 样式 }、标签1 + 标签2{ 样式 }、标签1 ~ 标签2{ 样式 }…分别表示标签1下的所有标签2、标签1下的之间子标签2、标签1下紧邻的标签2、标签1后所有的兄弟标签2
四、尺寸和单位
常用单位
| 长度单位 | 描述 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 |
| pt | 点（points）; 1pt = 1/72in |
| px | 像素（pixels）; 1px = 1/96in |
说明：
- 特殊值0可以省略单位。例如：margin:0px可以写成margin:0
- 一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
- 长度单位包括包括：相对单位和绝对单位。
- 相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax vmin
- 绝对长度单位包括有： cm, mm, q, in, pt, pc, px
五、字体与文本属性
-
字体
取值：
属性名 描述 font-style 指定文本字体样式 font-variant 指定文本是否为小型的大写字母 font-weight 指定文本字体的粗细 font-stretch 指定文本字体拉伸变形 font-size 指定文本字体尺寸 line-height 指定文本字体的行高 font-family 指定文本使用某个字体或字体序列 说明：
- 使用
font属性参数必须按照如上的排列顺序，且font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。 - 对于如何使用客户端系统没有字体和自定义字体
- 对应的脚本特性为：font。
- 使用
-
文本
属性 版本 继承 描述 text-transform CSS1/3 有 定义元素的文本如何转换大小写 white-space CSS1 有 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。 tab-size CSS3 有 定义元素内容中制表符的长度 word-break CSS3 有 定义元素内容文本的字间与字符间的换行行为 word-wrap/overflow-wrap CSS3 有 定义元素内容文本遇到边界时如何换行 text-align CSS1/3 有 定义元素内容的水平对齐方式 text-align-last CSS3 有 定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式 text-justify CSS3 有 定义使用什么方式实现文本内容两端对齐 word-spacing CSS1/3 有 指定单词之间的额外间隙 letter-spacing CSS1/3 有 指定字符之间的额外间隙 text-indent CSS1/3 有 定义块内文本内容的缩进 vertical-align CSS1/2 无 定义行内元素在行框内的垂直对齐方式 ine-height CSS1 有 定义元素中行框的最小高度 text-size-adjust CSS3 有 定义移动端页面中元素文本的大小如何调整 六、背景属性
取值：
属性名 描述 background-image 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像" background-position 指定背景图像在元素中出现的位置 background-size 指定背景图像尺寸 background-repeat 指定背景图像如何填充 background-attachment 定义滚动时背景图像相对于谁固定 background-origin 指定背景图像从元素的哪个区域作为显示的原点 background-clip 指定背景图像向外裁剪的区域 background-color 指定背景颜色 说明：
- 一个元素可以设置多组背景图像，每组属性间使用逗号分隔。
- 如果设置的多组背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
七、边框
取值：
属性名 描述 line-width 定义元素的边框厚度 line-style 定义元素的边框样式 color 定义元素的边框颜色 说明：
- 如使用
border或border-*短属性只定义了单个参数值，则其他参数的默认值将无条件覆盖各自对应的单个属性值定义。 - 对应的脚本特性分别为：border, borderTop, borderRight, borderBottom, borderLeft。
八、内补白和外补白
-
盒子模型
盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型图片：
组成说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
-
内补白
取值：
length：用长度值来定义内补白。不允许负值
percentage：用百分比来定义内补白
说明：
padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。- 需要注意的是，当我们为行内元素定义纵向内补白（
padding-top/padding-bottom）时，虽然不需要将之转化为行内块或者块级，但是给行内元素设置纵向内补白并不会影响布局。内补白会在当前元素的行框基础上向顶部和顶部外延，但是这些外延不会拓展新的布局大小。 - 对应的脚本特性为：padding。
分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。
- 对应的脚本特性分别为：paddingTop, paddingRight, paddingBottom, paddingLeft。
-
外补白
取值：
auto：自动
length：定义一个固定的margin（使用像素，pt，em等）
percentage：用百分比来定义外补白
说明：
- margin属性可以有一到四个值。
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
- margin:25px 50px 75px 100px;
- 外延边距始终透明，即不可见也无法设置背景等任何样式。
- 某些相邻的margin会发生合并，我们称之为margin折叠：
- margin折叠常规认知：
- margin折叠只发生在块级元素上；
- 浮动元素的margin不与任何margin发生折叠；
- 设置了属性overflow且值为
非visible的块级元素，将不与它的子元素发生margin折叠； - 绝对定位元素的margin不与任何margin发生折叠；
- 根元素的margin不与其它任何margin发生折叠；
- margin折叠常规认知：
- 分拆纵向独立属性。为元素设置上、下外边距。
- 替代(Replaced)行内元素可以应用该属性；非替代(non-Replaced)行内元素要使用该属性必须改变元素为块级或行内块级。
- 水平（默认）书写模式下，margin 合并只发生在vertical-margin上。
- 对应的脚本特性分别为：marginTop, marginBottom。
- 分拆横向独立属性。为元素设置上、下外边距。
- 所有的行内元素均可以应用该属性。
- 默认情况下，horizontal-margin不会发生 margin 折叠，除非将书写模式改变为纵向。
- 对应的脚本特性分别为：marginRight, marginLeft。
- margin属性可以有一到四个值。
对应的脚本特性分别为：marginTop, marginBottom。
+ 分拆横向独立属性。为元素设置上、下外边距。
- 所有的行内元素均可以应用该属性。
- 默认情况下，horizontal-margin不会发生 margin 折叠，除非将书写模式改变为纵向。
- 对应的脚本特性分别为：marginRight, marginLeft。
2054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
