css修饰HTML

最新推荐文章于 2023-04-06 23:22:44 发布

Leona__

最新推荐文章于 2023-04-06 23:22:44 发布

阅读量545

点赞数 1

本文链接：https://blog.csdn.net/Leona__/article/details/119276441

版权

css修饰HTML

一、CSS的优势

1.内容与表现分离；
2.CSS使网页的表现统一，并且容易修改；
3.丰富的样式使得页面布局更加灵活；
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽；
5.运用独立于页面的CSS，还有利于网页被搜索引擎收录。

二、引入CSS标签的方式

1行内样式

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
</head>
<body>
	<h1 style="color:red;">使用"行内样式"设置一级标题样式：红色</h1>
</html>

2内部样式

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<style>
		h1{
			color:red;
		}
	</style>
</head>
<body>
	<h1>使用"style标签"设置一级标题样式：红色</h1>
</html>

3外部样式
——————建立CSS文件
test.css文件：

h1{
	color:red;
}

——————链接外部样式
html文件：
括号link href=“相对路径” rel=“stylesheet” type=“text/css”/括回

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<h1>使用"外部链接-链接"设置一级标题样式：红色</h1>
</html>

——————导入外部样式
html文件：
@import url(“test.css”);

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<style>
		@import url("test.css);
	</style>
</head>
<body>
	<h1>使用"外部链接-导入"设置一级标题样式：红色</h1>
</html>

三、CSS的基本选择器

1 CSS基本语法
选择器{
属性：值；
}
2标签选择器
标签名{
属性：值；
}

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<style>
		h1{
			color:red；
		}
	</style>
</head>
<body>

	<h1>使用"标签选择器"设置一级标题样式：红色</h1>
</html>

3类选择器
.类名{
属性：值；
}
class=“类名”

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<style>
		.hr{
			color:red；
		}
	</style>
</head>
<body>

	<h1 class="hr">使用"类选择器"设置一级标题样式：红色</h1>
</html>

4ID选择器
#ID名{
属性：值；
}
id=“ID名”

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<style>
		#ihr{
			color:red；
		}
	</style>
</head>
<body>

	<h1 id=“ihr”>使用"类选择器"设置一级标题样式：红色</h1>
</html>

5注意事项
标签选择器：该标签样式均为此选择器下的样式；
ID选择器：一个ID选择器，在一个HTML中，只能使用一次。

四、span标签

<!DOCTYTE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<style>
		#ihr{
			color:red；
		}
		span{
			text-decoration:line-through;
		}
	</style>
</head>
<body>

	<h1 id=“ihr”>使用"类选择器"设置一级标题样式：<span>红色</span></h1>
</html>

以上样式则为：
(红色的字体)使用"类选择器"设置一级标题样式：红色

四、样式

1字体属性

属性名	含义	值	示例
font-family	设置字体类型	“宋体”/Verdana	font-family:“宋体”;
font-size	设置字体大小	px(像素)/em(字符)	font-size:12px;
font-style	设置字体风格	normal/italic/oblique	font-style:italic;
font-weight	设置字体粗细	normal/bold/bolder/lighter	font-weight:bold;

font在一个声明中设置所有字体属性
font:italic normal 12px “楷体”;
2文本样式

属性名	含义	值	示例
color	设置文本颜色	颜色名称	color:red;
text-align	设置元素水平对齐方式	left/right/center/justify	text-align:center;
text-indent	设置首行文本的缩进	px(像素)/em(字符)	text-indent:2em;
line-height	设置文本的行高	px(像素)	line-height:25px;
text-decoration	设置文本的装饰	underline/overline/none/line-through	text-decoration:underline;

3超级链接样式

a{
	属性：值（设置超级链接样式）；
}

a:link{
	属性：值（设置超级链接未访问的样式）；
}
a:hover{
	属性：值（设置鼠标悬浮超级链接上的样式）；
}
a:active{
	属性：值（设置鼠标单击为释放时超级链接的样式）；
}
a:visited{
	属性：值（设置访问后超级链接的样式）
}

4光标样式

属性名：值；	含义
cursor:default;	箭头
cursor:all-scroll;	四周带箭头的移动光标
cursor:corsshair;	十字
cursor:text;	文本输入
cursor:pointer;	小手
cursor:wait;	等待圆圈
cursor:help;	箭头+？

5DIV样式

属性名	值	含义
width	px(像素)	表示div框的宽度
height	px(像素)	表示div框的高度
background-color	颜色名称	表示div框的内填充背景颜色
background-img	url（图片相对路径）	表示在div框内加入背景图片
background-repead	no-repead/repead/repead-x/repead-y	表示在div框内加入的图片的重复方式
background-position	xpx ypx	表示在div框内图片在（x，y）位置

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）

Leona__

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css修饰HTML

css修饰HTML一、CSS的优势1.内容与表现分离；2.CSS使网页的表现统一，并且容易修改；3.丰富的样式使得页面布局更加灵活；4.减少网页的代码量，增加网页的浏览速度，节省网络带宽；5.运用独立于页面的CSS，还有利于网页被搜索引擎收录。二、引入CSS标签的方式1行内样式<!DOCTYTE html><html><head lang="en"> <meta charset="UTF-8"></head><bo
复制链接

扫一扫