1. 前言
在 CSS 中,文本格式和背景格式是网页设计中两个非常重要的方面。它们直接影响网页的可读性、美观性和用户体验。理解并合理使用这些属性可以帮助开发者创建更好的网页界面。
2. 文本格式
对于不同标签,网页页面中最常见的元素就是文本,在CSS中文本属性为'font'
可以在同一个声明中设置多种字体相关的样式
font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];
2.1 font 属性
color
针对于字体颜色进行修改
颜色修改可以使用不同显色模式进行设定
color:red/RGB/;
2.2 font-family 字体设置
进行字体设置;可以指定多个字体作为备选方案,浏览器会按照顺序使用第一个可用的字体
body
{
font-family:Arial,"楷体",sans-serif;
}
2.3 font-size 字体大小
设置字体的字体大小
h1
{
font-size:/*可以使用绝对单位px,也可以使用相对父级大小单位%*/
}
2.4 font-weight 字体粗细
设置文本的字体粗细
900位最粗体,100为最细
body
{
font-weight:bold; /*或者使用100-900*/
}
2.5 font-style 字体风格
设置字体风格,例如斜体
em
{
font-style:italic/normal/oblique;
}
italic | 倾斜 |
normal | 正常 |
oblique | 斜体 |
3.6 font-variant 字体变体
设置文本字体变体
font-variant:samll-caps/normal;
3. 段落属性
3.1 外边距 margin
设置段落的外边距,用于设置段落与其他元素的距离
margin:[top] [right] [bottom] [left];
3.2 内边距 padding
设置段落的内边距
• 段落内容与边框之间的距离
padding:[top] [right] [bottom] [left]
3.3 文本对齐 text-align
设置段落中文本的对齐方式
•left左对齐
•right右对齐
•center居中对齐
•justify两端对齐
text-align: [alignment]
3.4 行高 line-height
可以想像每一行文本有一固定的框图将文本限制,line-height就是进行框图修改
line-height:绝对高度/相对高度;
3.5 缩进text-indent
设置段落第一行文本的缩进
text-indent: 30px;40%;
3.6 文本转换 text-transform
text-transform:uppercase;
uppercase | 大写 |
capitalize | 首字母大写 |
lowercase | 小写 |
none | 不做转换 |
4 边框 border
border:[border-width] [border-style] [border-color];
4.1 宽度 width
可以设置边框的宽度
border-width: 5px /*设置所有边框的宽度为5px*/
当然也可以设置不同边框的宽度
border-width: 2px 4px 6px 9px; /*上 右 下 左*/
边框样式 border-style
border-style:[style];
none | 无边框 |
solid | 实现 |
dotted | 点线 |
dashed | 虚线 |
double | 双线 |
groove | 凹槽 |
ridge | 山脊 |
inset | 内嵌 |
outset | 突起 |
4.2 边框颜色 border-color
设置边框颜色
border-color:[color];
4.3 边框圆角 border-radius
border-radius:10px; /*所有角的圆角半径为10px*/
border-radius:10px 20px 30px 40px;
4.4 针对性设置边框
分别用于设置元素的顶部,右侧,底部和左侧的边框
div
{
border-top:2px solid black;
border-right:3px dashed red;
border-bottom:4px dotted blue;
border-left:5px double green;
}
4.5 表格表现形式 border-collapse
border-collapse:collapse; /*表格内的边框是否重叠*/
它决定了表格单元格边框的表现方式。它的主要作用是控制表格单元格的边框是否合并(重叠)。
collapse | 表格单元格的相邻边框会合并成一个单一的边框 |
separate | 表格单元格的边框会分开显示,单元格之间会有一个边框间距; 由border-spacing属性控制 |
5. 背景属性
background
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];
5.1 background-color背景颜色
设置元素的背景颜色
background-color:[color];
5.2 background-image 背景图片
background-image: url('image.jpg');
也可以使用多个图片作为背景,使用逗号分隔多个URL
background-image: url('image1.jpg'), url('image2.jpg');
5.3 background-repeat 图片重复方式
background-repeat: [repeat-style];
repeat | 默认在水平方向与垂直方向上重复 |
repeat-x | 仅在水平方向上重复 |
repeat-y | 仅在垂直方向上重复 |
no-repeat | 背景图片不重复 |
space | 背景图片重复且保持空隙 |
round | 背景图片重复且拉伸到填满容器 |
初始位置 background-position
background-position:[position];
- 关键词:
left
,center
,right
,top
,bottom
- 百分比:
50% 50%
(水平居中,垂直居中) - 像素值:
10px 20px
(水平偏移 10px,垂直偏移 20px)
5.4 background-size 图片大小
设置背景图片大小
background-size:[size];
auto | 默认图片原始大小 |
cover | 让背景图片覆盖整个容器 |
contain | 让背景图片保持原始宽高比 |
5.5 background-attachment 图片响应
background-attachment:[attachment];
scroll
(默认): 背景图片随元素内容滚动。fixed
: 背景图片固定不动,不随内容滚动。local
: 背景图片随元素的内容滚动。
5.6 background-origin 起始位置
设定背景图片起始绘制位置(边框中的什么位置)
background-origin:[origin];
padding-box | 从内边框开始绘制 |
border-box | 从外边框开始绘制 |
content-box | 从内容框开始绘制 |
5.7 background-clip 绘制区域
设置背景颜色或图片的绘制区域
background-clip:[clip];
padding-box | 背景裁剪到内边距框 |
border-box | 背景延伸到外边框 |
content-box | 裁剪到内容框 |
6. 参考资料
《精通HTML5+CSS3+JavaScript网页设计》