HTML引入css样式的三种方式，css选择器的三种样式

最新推荐文章于 2024-04-24 10:07:36 发布

汤米先生

最新推荐文章于 2024-04-24 10:07:36 发布

阅读量2.9k

点赞数 4

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/Tom197/article/details/117630691

版权

CSS学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言

前言

刚刚学过HTML引入css样式的三种方式和选择器的三种样式，下面就来分享一下我的笔记吧

一. css样式的三种方式

第一种：内联定义方式

<body>
	<div style ="样式名：样式值"></div>
</body>

第二种：样式块

<head>
	<title></title>
	<style type="text/css">
    /*选择器*/	
	</style>
</head>

第三种：引入外部独立css文件

在css文件中写入选择器及内容，可以是多个
css文件的引入： <head> <title></title> <link rel=" stylesheet" type="text/css" href="文件路径"> </head>

二. 选择器的三种样式

第一种：id选择器

#id{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…}
例如:

<head>
	<title></title>
	<style type="text/css">
    #a{
       color:red;
       font-size:12px;
     }
	</style>
</head>	
<body>
	<span id="a">你好!</span>
</body>

第二种：标签选择器

标签{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…}
例如：

<head>
	<title></title>
	<style type="text/css">
   div{
       color:red;
       font-size:12px;
     }
	</style>
</head>	
<body>
	<div>你好!</div>
</body>

第三种：类选择器

.类名{
样式名：样式值；
样式名：样式值；
样式名：样式值；
…
}
例如：

<head>
	<title></title>
	<style type="text/css">
   .student{
       color:red;
       font-size:12px;
     }
	</style>
</head>	
<body>
	<div class="student">你好，我是学生！</div>
	<span class="student">你好，我是一名学生！</span> 
</body>

三. css的绝对定位

对某一部分的位置进行设定

<head>
	<title></title>
	<style type="text/css">
		#div1{
		background-color: red;
		border :1px black solid;
		width: 300px;
		height: 300px;
		position: absolute;/*绝对定位*/
		left: 100px;  /*距离左边框*/
		top: 100px; /*距离上边框*/
		}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>

汤米先生

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML引入css样式的三种方式，css选择器的三种样式

css文件的引入： css样式的三种方式第一种：内联定义方式<body> <div style ="样式名：样式值"></div></body>第二种：样式块<head> <title></title> <style type="text/css"> /*选择器*/ </style></head> 第三种：引入外部独立css文.
复制链接

扫一扫