CSS样式和选择器

最新推荐文章于 2023-09-11 12:14:48 发布

LUCK.Y-ZT

最新推荐文章于 2023-09-11 12:14:48 发布

阅读量259

点赞数

文章标签： html css js

本文链接：https://blog.csdn.net/qq_52232797/article/details/111184294

版权

CSS样式和选择器

1.1 样式引入方式

无论是通过什么形式或方式对元素添加了样式，那么最终都是要作用在元素上的

注意：在HTML页面中所有的元素都是从上往下依次加载的

例如：

行内样式相当于自己决定要不要打扮的问题
内联样式是朋友建议的打扮方式
外联样式是化妆公司给的打扮方式

行内样式：直接在标签上使用style属性，该优先级是最高的

存在的问题：样式和元素耦合性太强，不利于后期维护

内联样式：当前页面的head标签中使用style标签，出现内联样式的原因是为了简化当前页面冗余的样式代码

外联样式：创建.css后缀的文件，原因是可以将样式当成公共的，需要的时候拿来用即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的引入方式</title>
		<style type="text/css">
			div{
    
				color: burlywood;
				font-size: 23px;
			}
			p{
    
				color: burlywood;
				font-size: 23px;
			}
			/* 对同一个元素如果有多个样式，那么相同的会根据优先级进行覆盖，不同的则保留 */
			div{
    
				color: aquamarine;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
	</head>
	<body>
		<!-- 浏览器中的字体大小默认是16像素 -->
		<!-- <div style="color: darkcyan;font-size: 20px;">今日头条1：某某某市秘书长偷情被抓，跳楼身亡</div>
		
		<div style="color: darkcyan;font-size: 20px;">今日头条2：美国政府被麻省理工及哈弗大学联名起诉</div>
		
		<p style="color: darkcyan;font-size: 20px;">知乎提问：Java行业还能存活多久</p> -->
		
		
		<div>今日头条1：某某某市秘书长偷情被抓，跳楼身亡</div>
		
		<div>今日头条2：美国政府被麻省理工及哈弗大学联名起诉</div>
		
		<p>知乎提问：Java行业还能存活多久</p>
	</body>
</html>

总结：同一个元素，相同的选择器优先级时，最终生效的样式和样式的引入顺序有关

1.2 选择器

页面中相同的元素可以有很多个，还有不同的元素，该如何去区分查找对应的元素呢？

通过使用不同的选择器来进行查找选择

1.2.1常用的选择器：

标签选择器：页面中所有对应的标签都生效
类选择器(class)：页面中所有具有该类名的标签都生效
id选择器(id)：唯一标识
优先级：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html>
	<head>

最低0.47元/天解锁文章

LUCK.Y-ZT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式和选择器

CSS样式和选择器1.1 样式引入方式无论是通过什么形式或方式对元素添加了样式，那么最终都是要作用在元素上的注意：在HTML页面中所有的元素都是从上往下依次加载的例如：行内样式相当于自己决定要不要打扮的问题内联样式是朋友建议的打扮方式外联样式是化妆公司给的打扮方式行内样式：直接在标签上使用style属性，该优先级是最高的存在的问题：样式和元素耦合性太强，不利于后期维护内联样式：当前页面的head标签中使用style标签，出现内联样式的原因是为了简化当前页面冗余的
复制链接

扫一扫