HTML: CSS-样式的添加方法、CSS添加方式——优先级、CSS选择器、文本样式、背景与超链接、列表和表格、cursor属性。

居靖

已于 2023-04-12 12:14:53 修改

阅读量1.1k

点赞数

文章标签： css html 前端

于 2023-04-06 15:55:13 首次发布

本文链接：https://blog.csdn.net/m0_73886399/article/details/129974917

版权

文章详细介绍了CSS样式的添加方式，包括行内式、内嵌式和外部链接式，以及它们的优先级规则。同时，讨论了CSS选择器的种类，如标签选择器、类选择器和ID选择器，并展示了如何通过嵌套声明、集体声明和全局声明来应用样式。此外，还涵盖了文本样式、背景属性、超链接的四种状态以及列表和表格的样式设定。

摘要由CSDN通过智能技术生成

CSS样式的添加方式：

行内式：

直接在标签内添加样式：<p style="color:red; ">

内嵌式：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p{
color:red;   /*设置字体颜色*/
}
</style>
</head>
<body>
<p>内容</p>
</body>
</html>

单独文件：

外部式样式表文件 style.css

网页文件 : 1.htm

在<head>标签内使用<link rel="stylesheet" href="css/style.css" />链接外部样式文件。

CSS添加方式——优先级：

行内样式> 内嵌样式> 链接样式> 浏览器默认样式。

注：多重样式可以层叠，可以覆盖。样式的优先级按照“就近原则”。

CSS选择器：

标签选择器、类选择器、id选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
			background-color: #ccc;
			text-align:center;
			font-size:12px; 
			}
			h1 {
				font:"黑体";
			    font-size:20px;
			} /* 标签选择器 */
			p {color:red; font-size:16px;}
			hr {width:200px;}
			.a{   /* 类选择器 */
				font-size:20px;
				color: red;
			}
			#b{   /* ID选择器 */
				font-size: 15px;
				color: blue;
			}
		</style>
		<title></title>
	</head>
	<body>
		<h1>标题</h1>
		<hr>
		<p>正文的段落</p>  <!-- 标签选择器 --> 
		<p class="a">类选择器</p>  <!-- 类选择器 -->
		<p id="b">id选择器</p>  <!-- id选择器 -->
	</body>
</html>

嵌套声明（空格隔开）、集体声明（逗号隔开）、全局声明（*）、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
			background-color: #ccc;
			text-align:center;
			font-size:12px; 
			}
			p span{  /* 嵌套声明,中间用空格隔开 */
				color: red;
				font-size: 20px;
			}
			h1,#a{  /* 集体声明,用逗号隔开 */
				color: blue;
				font-size: 20px;
			}
			*{   /* 全局声明 */
				font: "黑体";
			}
		</style>
		<title></title>
	</head>
	<body>
		<p><span>嵌套声明</span></p>  <!-- 嵌套声明 -->
		<h1>标题标签</h1>
		<p id="a">文本内容</p>
	</body>
</html>

文本样式：

属性	描述	取值
color	文本颜色	red #f00 rgb(255,0,0)
letter-spacing	字符间距	2px -3px
line-height	行高	14px 1.5em 120%
text-align	水平对齐	center left right justify（两边对齐）
vertical-align	垂直对齐	bottom(下)、top、middle(中）、baseline(基线)
text-decoration	装饰线	none overline underline line-throught
text-indent	首行缩进	2em
font	设置所有字体属性	font:bold 18px '黑体’
font-family	字体系列	网页安全字体 font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
font-size	字体大小	14px 120%
font-style	斜体	italic
font-weight	粗体	bold

背景与超链接：

背景属性：

background-color:背景颜色

background-size:背景尺寸，可以用像素或百分比来设置图片的尺寸。

background-position：背景定位，设置图像在背景中的位置，可取值为top、bottom、left、right、center或像素和百分比。

background-image:背景图片 url("图片路径'');,若没有图像，其值为none。

background-repeat:背景平铺方式：延x轴方向:repeat-x;延y轴方向：repeat-y; 不平铺：no-repeat;

background-attachment:背景关联：设置背景图像是否随页面内容一起滚动。scroll（滚动，默认），fixed（固定）。

链接的四种状态：

a:link − 普通的、未被访问的链接

a: visited − 用户已访问的链接

a:hover - 鼠标指针位于链接的上方悬停

a :active − 链接被点击的时刻

注：a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后。

列表和表格：

无序列表ul和有序列表ol共有样式：

属性	描述
list-style	使用用于列表的属性设置与一个声明中
list-style-image	为列表标志设置图像
list-style-position	标志的位置
list-style-type	标志的类型

标志的类型
值	描述
none	无标记
disc	默认。实心圆
circle	空心圆
square	实心方块
decimal	数字
lower-roman	小写罗马数字（i,ii,iii,iv,v,等）
upper-roman	大写罗马数字（I,II,III,IV,V,等）
lower-alpha	小写英文字母
upper-alpha	大写英文字母
lower-Greek	小写希腊字母（alpha,beta,gamma,等）
lower-latin	小写拉丁字母（a,b,c,d,e等）
upper-latin	大写拉丁字母（A,B,C,D,E,等）