CSS（1）的三种样式

最新推荐文章于 2023-02-02 18:05:30 发布

棋宣

最新推荐文章于 2023-02-02 18:05:30 发布

阅读量157

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/flower521528/article/details/123216085

版权

介绍：

今天开始更新前端中的css（层叠样式表），如果说HTML是网页框架的话，那么css就是网页的装扮，主要对网页进行修饰；为网页提供了丰富的格式化功能；css呢也是我们学习前端重要的一章，希望今后的日子能够和大家继续一起学习前端。

1.行内样式

直接在标签内部进行操作，定义的属性用分号隔开，长度和宽度的定义一定要加px；

style="color：；width："

实例

<div style="color:red ; width:500px">
    hello world

</div>

2.内嵌样式

使用选择器进行精准的操作

为标签定义id，利用id进行精准操作

<style type="text/css">

#id{color ：；width：}

</style>

<div id=" ">

hello world

</div>

实例：

<style type="text/css">
    #top1{color:red;width:300px}
    
    #top2{color:biue;width:300px}

</style>

<body>
		<div id="top1">
			hello world
		</div>

		<p id="top2">hello world</p>
</body>

运行截图

3.外链式

外链式需要额外建一个css文件，将定义的属性放在这个css文件里面

        <link rel="stylesheet" href="css/文件" type="text/css">

                用此链接引入css文件里面的样式

                同时也需要在css文件里面加入选择器，为标签定义id，进行精准操作

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/red.css" type="text/css">
	</head>
		
		<div id="top3">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste error aspernatur commodi 
			voluptates esse consequuntur nemo obcaecati fugiat animi ratione perferendis 
		</div>
	</body>
</html>

棋宣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS（1）的三种样式

介绍：今天开始更新前端中的css（层叠样式表），如果说HTML是网页框架的话，那么css就是网页的装扮，主要对网页进行修饰；为网页提供了丰富的格式化功能；css呢也是我们学习前端重要的一章，希望今后的日子能够和大家继续一起学习前端。1.行内样式直接在标签内部进行操作，定义的属性用分号隔开，长度和宽度的定义一定要加px； style="color：；width："实例<div style="color:red ;...
复制链接

扫一扫