Html-css-优快云博客

本文深入讲解CSS样式表的使用，包括语法结构、选择符、属性和值，详细介绍了链接、内部、导入和内嵌四种添加CSS的方法。涵盖字体、颜色、背景、段落、盒子模型、边框、定位、列表和光标属性，是前端开发人员必备的CSS指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.使用css样式表

1.css语法结构由3部分组成：选择符，样式属性和值
2.添加css的4种方法：链接外部样式表，内部样式表，导入外部样式表和内嵌样式表
	链接外部样式表：<link rel="stylesheet" type="text/css" href="xxx.css">
	内部样式表：<style type="text/css">
			css语法结构。
		</style>
	导入外部样式表：<style type="text/css">
			@import xxx.css
		</style>
	内嵌样式表：<body style="width=100%">

2.字体属性

1.字体	font-family："字体1","字体2",'...
	如果在font-family属性定义了多种字体，在浏览器中浏览是会由前向后选择字体。
2.字号	font-size：大小的取值
3.字体风格	font-style：样式的取值
	设置字体是否为斜体
	normal：默认的正常字体
	italic：以斜体显示文字
	oblique：以偏斜体显示
4.加粗字体	font-weight：字体粗细值
	在HTML里使用<b></b>标记设置文字为粗体，在css利用font-weight设置字体的粗细
	normal：正常粗细
	bold：粗体
	bolder：特粗体
	number：数字取值，范围100-900
5.小写字母转为大写	font-variant：取值
	normal：正常显示
	small-caps：小写字母转为大写
6.字体复合属性	font
	符合属性：字体族科，字体大小，字体风格，加粗字体等
	例：{font：font-family："宋体";font-size:100px;font-style:normal;font-weight:normal;}

3.颜色和背景属性

1.颜色属性	color
2.背景颜色	background-color
3.背景图片	background-image：url(图像地址)
4.背景重复	background-repeat：取值
				no-repeat：不平铺
				repeat：平铺排满整个网页
				repeat-x：水平方向上平铺
				repeat-y：垂直方向平铺
5.背景附件	background-attachment
				设置背景图像是随对象滚动而滚动
				scroll：背景图像随对象滚动而滚动
				fixed：背景图像固定在页面上不动
6.背景位置	background-position：位置取值
	设置背景图像的位置，只能应用于块级元素和替换元素。替换元素：img,input,textarea,select,object.
	语法中的取值包括两种，数字和关键字描述
	长度设置值，百分比取值：x y
		x(数值)：横向位置
		y(数值)：纵向位置
	或：
	background-position:left top;	左上位置

7.背景复合属性	background：取值
	背景颜色，背景图片，背景重复，背景附件，背景位置
	例：
		background:url(图像地址) no-repeat left top

4.段落属性

单词间隔，文字修饰，纵向排列，文本转换，文本排列，文本缩进和行高
1.单词间隔	word-spacing：取值(长度：数值或单位)
2.单词间隔	letter-spacing：取值(长度：数值或单位)
3.文字修饰	text-decoration：取值
	对文本进行修饰，如设置下划线，删除线等
	none：不修饰
	underline：对文字添加下划线
	overline：对文字添加上划线
	line-through：对文字添加删除线
	bink：文字闪烁效果
4.垂直对齐方式	vertical-align：排列取值
	设置文字的垂直对齐方式
	baseline：浏览器默认的垂直对齐方式
	sub：文字的下标
	super：文字的上标
	top：垂直靠上对齐
	text-top：使元素和上级元素的字体向上对齐
	middle：垂直居中对齐
	text-bottom：使元素和上级元素的字体向下对齐
5.文本转换	text-transform:转换值
	none：默认值，不改变
	capitalize：每个单词的第一个字母大写
	uppercase：每个单词的所有字母大写
	lowercase：每个单词的所有字母小写
6.水平对齐方式	text-align：排列值
	left：左对齐
	right：右对齐
	center：居中对齐
	justify：两端对齐
7.文本缩进	text-index：缩进值(长度值或百分比)
8.文本行高	line-height：行高值(长度值或百分比)
9.处理空白	white-space：值
	设置页面内空白的处理方式
	normal：默认，将连续的多个空格合并
	pre：会导致源代码中的空格和换行符被保留
	nowrap：强制在同一行内显示所有文本，直到文本结束或者遇到<br>对象

5.盒子模型

content(内容)，padding(内边距)，border(边框)，margin(外边距)
复合内/外边距		padding/margin
{padding/margin:10px}	所有的内/外边距为10px
{padding/margin:10px 20px}	上下为10px,左右为20px
{padding/margin:10px 20px 30px}	上为10px,左右为20px,下为30px
{padding/margin:10px 20px 30px 40px}	上为10px,右为20px,下为30px,左为40px

6.边框属性

边框：边框宽度属性，边框颜色属性，边框样式
1.边框样式	border-style：样式值
	四边框：border-top-style，border-buttom-style，border-left-style，border-right-style
	边框样式的取值：
		none：默认
		dotted：点线边框
		dashed：虚线边框
		solid：实线边框
		double：双实线边框
		groove：边框具有立体感的沟槽
		ridge：边框成脊形
		inset：使整个边框凹陷，在边框内嵌入一个立体边框
		outset：使整个边框凸起，在边框内嵌入一个立体边框
2.边框宽度	border-width：宽度值(数字和单位组成的长度值)
	border-top-width，border-buttom-width，border-left-width，border-right-width
3.边框颜色	border-color
	border-top-color，border-buttom-color，border-left-color，border-right-color
4.边框复合属性	border	边框宽度属性，边框颜色属性，边框样式

7.定位属性

相对定位：允许元素在相对于文档布局的原始位置上进行偏移
绝对定位：允许与原始的文档布局分离且任意定位
1.定义方式	position
	static：默认值
	absolute：绝对定位，需要同时使用left，right，top，bottom等属性进行绝对定位
	fixed：表示当页面滚动时，元素不随着滚动
	relative：相对定位，对象不可层叠
2.元素位置	left，right，top，bottom：auto/长度值/百分比
3.层叠顺序	z-index：auto/数字
	设置层的先后顺序和覆盖关系，默认情况下，z-index为1，表示该层位于最底层
4.浮动属性	float：none/left/right
	使用浮动属性float可以设置文字在某个元素的周围，他能应用于所有的元素
	none：默认值，表示对象不浮动
	left：表示文字浮动在元素的右边
	right：表示文字浮动在元素的左边
5.清除属性	clear
	用于指定一个元素是否允许有其他元素漂浮在他的周围
	none：表示允许两边都可以有浮动对象
	left：表示不允许左边有浮动对象
	right：表示不允许右边有浮动对象
	both：表示不允许有浮动对象

8.列表属性

使用列表属性可以设置列表项的样式，包括符号，缩进等
1.列表符号	list-style-type：值
	设置列表项所使用的符号类型
	disc：实心圆，默认
	circle：空心圆
	square：空心方块
	decimal：阿拉伯数字
	lower-roman：小写罗马数字
	upper-roman：大写罗马数字
	lower-alpha：小写英文字母
	upper-alpha：大写英文字母
2.图像符号	list-style-image：url(图像地址)

9.光标属性 cursor

使用光标属性可以设置在对象上移动时鼠标指针采用的光标形状
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。