css基本样式修饰

最新推荐文章于 2025-05-18 21:57:41 发布

xuhongxia&

最新推荐文章于 2025-05-18 21:57:41 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

分类专栏： Web(一)笔记

本文链接：https://blog.youkuaiyun.com/m0_51508220/article/details/115540212

Web(一)笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍CSS样式设置的基础知识，包括文字、背景、列表等样式设置技巧，并解释了优先级及样式的叠加与继承特性。

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

该文章还在持续更新中哈。。

优先级

id选择器>类选择器>标签选择器
行内样式表>页内样式表>外部样式表（就近原则）

（1）CSS 样式的叠加
 多个样式，在同一内容上共同实现，叫做 CSS 样式的叠加。
（2） CSS 样式的可继承性
 文档中的某些元素，将沿用为其父元素所设置的样式，这种特点叫做 CSS样式的可继承性

掌握文字相关的样式设置

字体常用样式

设置字体font-family

中文如：宋体，要用英文引号包着（单双都可）。
写多个字体的作用，中间用, 隔开，用户浏览器会按照写的顺序依次去找。
字体大小 font-size
默认字体大小：16像素,文章段落一般12-14px， [em表示：倍（父级元素）在下面代码中为<body>]
font-style: 设置字体倾斜：
font-weight设置字体加粗
font缩写时，一定要有字号、字体。一共最多写四个（有顺序、中间用空格隔开）

<!DOCTYPE html>
<html>
	<head>
		<title>text</title>
		<meta charset = "utf-8"/>
		<style>
			.green{
				font-family:'仿宋';
				font-size:1.5em;
				font-style:italic;
				font-weight:bolder;
				text-indent:2em;
				text-align:center;
				
			}
		</style>
	</head>
	<body>
		<p> 第五条国际新闻</p>
		<p class="green">第五条国际新闻优快云是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.</p>
	</body>
</html>

上述代码的效果如下
在这里插入图片描述

文本常用样式

1.设置段落元素的第一行缩进方式：text-indent
• text-indent:2em;
• text-indent:-3em;
• 属性值可为绝对值（px）,也可为相对值（em）
在这里插入图片描述

text-align 设置元素的文本行的对齐方式。
• text-align:left;
• 属性值：left、center、right
• 默认对齐方式是左对齐
line-height 设置行不行之间癿距离
属性值表示方式：
• 固定值（如：line-height:36px; ）
• 相对值（如：line-height:1.5em;）
设置文本颜色：color
• color : green ;
• color : #008000 ;
• color : rgb(0,128,0) ;

rgb中的为十进制数
在这里插入图片描述

text-decoration设置文本的修饰效果
• text-decoration:underline;
• 属性值：none, overline, underline, line-through
• 含义：无装饰，上划线，下划线，删除线
设置文本的大小写：text-transform
属性值：
• none
• uppercase：把所有癿字母转换成大写
• lowercase：把所有癿字母转换成小写
• capitalize：只对每个单词癿首字母大写

对行高的一点设置建议：
【行高跟文字要搭配，一般行高是文字癿 1.5~1.8 倍最为合适。例：
正文文字：14px
行高(px)：22px~26px ( 行高最好设置为偶数 )
行高(em)：1.5em~1.8em】

超链接的样式设置

超链接的四种状态：
 未被访问癿超链接 a:link
 鼠标经过超链接 a:hover
 链接被点击癿那一刻 a:active
 访问过癿超链接 a:visited
说明：设置超链接癿多种状态（≥2）时，需要按特定顺序设置，
:link，:visited，:hover, :active

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<title>text</title>
		<meta charset = "utf-8"/>
		<style>
			.green{
				font-family:'仿宋';
				font-size:1.5em;
				font-style:italic;
				font-weight:bolder;
				text-indent:2em;
				text-align:center;
				line-height:1.5em;
				color:rgb(0, 128, 0);
				text-decoration:none;
			}
			.cap{
				text-transform:capitalize;
			}
			a:link{
				text-decoration:none;
				color:#999;
			}
			a:visited{
				text-decoration: none;
				color:#ccc;
			}
			a:hover{
				text-decoration: none;
				color:red;
			}
			a:active{
				text-decoration: none;
				color:blue;
			}
			p:hover{
				color:red;
			}
		</style>
	</head>
	<body>
		<p> 第五条国际新闻</p>
		<p class="green">第五条国际新闻优快云是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.</p>
		<p class="cap"> i am a student. </p>
		<a href="https://www.baidu.com/"> 连接对象</a>
	</body>
</html>