css层叠样式表-----第一弹----0414

最新推荐文章于 2024-07-12 20:49:16 发布

Bella2.0

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量139

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44759795/article/details/105586153

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css层叠样式表---------0414

层叠样式表

层叠样式表是用来渲染html网页的，它存在于样式表中，分为三种存在形式：内嵌样式，外部样式和行内样式，其中外部样式的工作效率是最高的，多个样式可层叠在一个html网页上。

css的基本语法

由选择器和声明构成，声明的时候属性与属性值之间用冒号隔开，每个声明之后加封号，每一个选择器后的所有声明放在一个大括号内。
例子: p {color:blue;font-family:宋体;}

css样式表类型

1、行内样式表：直接在标签内添加style样式属性。如：<p style=”color:red;font-family:宋体”></p>
2、内嵌样式：把样式代码填写在style标签内，style可以写在head里，也可以写在body里。但是一般推荐写在head里，因为有的浏览器不识别style标签，写在head里的话，即使浏览器不识别style也不会将样式表展示在页面里。

<head>
	<style type="text/css">
		p{color:red;}
	</style>
</head>

3、外部样式：把样式代码写在一个扩展名为 .css 的外部文件里。使用外部文件的方法分为两种：链入式和导入式。链入式就是使用方式来引入文件。其中rel是很重要的一个属性，是文档和链接的关系，必须存在。其次link标签要写在head里。导入式使用@import url（文件路径）来使用外部文件。这个要写在head标签中的style里，写在最开始处。
一般使用链入外部样式表，因为css与html分离，多个文件可以使用同一个样式，且只需下载一次css。

<head>
	<link href="/外部文件名.css" rel="stylesheet type="text/css"/>
</head>

选择器类型：

1、全局选择器：
用*表示，使用后网页内所有的内容都遵循*所设置的样式。
2、标签/元素选择器：
使用后，该标签的所有内容都引用该样式。如p{color:red;}。
3、类选择器：
给标签添加class属性，属性值可重复在引用时前面要加点。如：

<head>
<style>	
	.abc{color:red;}
</style>
</head>
<body>
	<p class=”abc”></p>
</body>

4、ID选择器：
给标签添加ID属性，属性值不能重复，引用时，前面加#。
5、群组选择器：
集体统一设置样式。如:p,div,#abc,.abc{color=red;}
6、子父选择器：
当一个元素下存在多个元素时，要为此元素下的某一元素设置样式，则可在style中将父元素与要设置子元素之间用空格隔开。如：div p{color:red;}即可把div中的p元素变为红色。