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。