CSS样式（一）——样式方法、选择器

最新推荐文章于 2022-10-19 17:53:57 发布

Alice__97

最新推荐文章于 2022-10-19 17:53:57 发布

阅读量217

点赞数

分类专栏： CSS 前端文章标签： CSS

本文链接：https://blog.csdn.net/Alice__97/article/details/92838534

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

CSS添加方法——三大方法

css选择器

CSS添加方法——三大方法

1.行内样式，即将属性和属性取值设定直接添加到当前需要添加样式的元素的标签内部

<p style="color:red;">假如给我三天光明</p>

2.内嵌样式，即将CSS代码内嵌到当前页面的head标签部分

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p{
		color:red;
		}
	</style>	
</head>
<body>
	<p>
		假如给我三天光明
	</p>
</body>
</html>

即使有公共CSS代码，也是每个页面都要定义的
适合文件很少，CSS代码也不多的情况
如果一个网站有很多页面，每个文件都会变大，后期维护难度也大

3.连接样式（单独CSS文件），即将CSS文件连接到HTML文件head部分

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<p>
		假如给我三天光明
	</p>
</body>
</html>

页面结构HTML代码与样式CSS的完全分离
维护方便
如果需要修改网站风格，只需要修改CSS文件
可以再同一个HTML文档内部引用多个外部样式表

4.优先级

多重样式可以层叠，可以覆盖
样式的优先级按照就近原则
行内样式 > 内嵌样式 > 链接样式 > 浏览器默认样式

css选择器

1.标签选择器：以标签名字同名的选择器，作用于所有标签出现的地方

p{
    font-size: 12px;
    color: blue;
    font-weight: bold;
}
h1{
    font-size:18px;
}

2.类别选择器：以点开头进行定义，在标签的class属性中进行引用（引用时去掉点），可以被多次引用

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.one{
			font-size: 12px;
			color: blue;
		}
		.two{
			font-size: 24px;
			color: red;
		}
	</style>
</head>
<body>
	<p class="one">假如给我三天光明</p>
	<p class="one">假如给我三天光明</p>
	<p class="two">假如给我三天光明</p>
	<p class="two">假如给我三天光明</p>
</body>
</html>

3.ID选择器：以#开头进行定义，在标签的id属性中进行引用（引用时去掉#），只能被引用一次

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		#one{
			font-size: 12px;
			color: blue;
		}
		#two{
			font-size: 24px;
			color: red;
		}
	</style>
</head>
<body>
	<p id="one">假如给我三天光明</p>
	<p id="two">假如给我三天光明</p>
</body>
</html>

嵌套声明，两个选择器用空格隔开

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p span{
			color: red;
		}
	</style>
</head>
<body>
	<p><span>假如</span>给我三天光明</p>
</body>
</html>

集体声明，让多个样式相同，用逗号隔开

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p,h1{
			color: red;
		}
	</style>
</head>
<body>
	<p>假如给我三天光明</p>
    <h1>你好</h1>
</body>
</html>

全集声明，让所有网页元素采用一种样式，样式直接用*

*{
    color:red;
    font-size:18px;
}

混合使用，id选择器不可以多个混合使用

<div class="one yellow left"></div>//多个class选择器混用，用空格分开
<div id="my" class="one yellow left"></div>//id和class混合使用

Alice__97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式（一）——样式方法、选择器

目录CSS添加方法——三大方法css选择器CSS添加方法——三大方法1.行内样式，即将属性和属性取值设定直接添加到当前需要添加样式的元素的标签内部<p style="color:red;">假如给我三天光明</p>2.内嵌样式，即将CSS代码内嵌到当前页面的head标签部分<!DOCTYPE html><html&g...
复制链接

扫一扫