二、CSS层叠样式表（笔记）

最新推荐文章于 2023-08-17 10:57:36 发布

韦重阳

最新推荐文章于 2023-08-17 10:57:36 发布

阅读量596

点赞数

分类专栏：基础前端技术笔记文章标签： css html css3

本文链接：https://blog.csdn.net/Mr_SorryMan/article/details/123575565

版权

本文详细介绍了CSS的概念，包括行内样式、内部样式和外部样式的定义与区别，以及它们的优先级。讨论了CSS的选择器，如id选择器、class选择器和元素选择器，并阐述了选择器的优先级。同时，讲解了颜色、背景、文本、列表、边框等常用样式的设置方法，以及盒子模型、浮动、清除浮动、隐藏显示的原理和应用。最后，探讨了复合选择器的使用，包括全局选择器、并集选择器、交集选择器、后代选择器、子元素选择器和伪类选择器。

摘要由CSDN通过智能技术生成

（3）带透明的rgb值(0--1的代表透明度0%--100%）

（4）#开头的16进制写法

2.背景

1.背景样式

2.宽width和高height在背景的应用

10. 隐藏 display和visibicislity

一、CSS概念

对html的结果进行美化，优点是

1. 功能强大

2. 将内容展示和样式控制分离

降低耦合度。解耦

让分工协作更容易

提高开发效率

二、CSS的样式

1.行内样式

写在标签内部的样式，仅对该行标签有用

<p style="color: blue; background: chartreuse;">窗前明月光，疑是地上霜</p>

2.内部样式

定义在head标签内，通过<style></style>控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
			<style>
				h1{
					color: red;
				}
			</style>
	</head>
	<body>
		<h1>一级标题</h1>
	</body>
</html>

3.外部样式

先在css文件夹中新建css文件，定义样式

然后在html文档中用link引入样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<link rel="stylesheet" type="text/css" href="css/css001.css"/>
	</head>
	<body>
		<h1>一级标题</h1>
		<h1>一级标题</h1>
	</body>
</html>

4.优先级和区别

行内样式只能控制本行
内部样式只能控制本文档
外部样式只要被引用就可以控制

生效优先级
行内样式>内部样式>外部样式

在定义和引用时要先引用外部样式，然后再用style定义内部样式
多种样式对同一个标签生效时，先按优先级生效。多出来的部分会叠加生效

如下，内部样式定义标签红色，外部样式标签浅蓝，底下蓝色背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
			<link rel="stylesheet" type="text/css" href="css/css001.css"/>
			<style>
				h1{
					color: red;
				}
			</style>
	</head>
	<body>
		<h1>一级标题</h1>
		<h1>一级标题</h1>
	</body>
</html>

三、CSS语法

选择器 { 
    属性1:值1; 
    属性2:值2; 
      }
选择器:筛选具有相似特征的元素


例如
h1{
    color:red;
}

四、注释

/* */

/*这是CSS的注释*/ 
div {
    color: red; 
/*文字颜色是红色*/ 
}

五、选择器

1.id选择器

以#id为选择器名字，为指定id的标签定制样式，id属性不要以数字开头，id尽量不要一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
			<style type="text/css">
				#ss{
					color:red;
				}
			</style>
	</head>
	<body>
		<div id="ss"> id选择器</div>
	</body>
</html>

2.class选择器

选择具有相同class属性值的元素，class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。只要名字一样就可以

以点加类名的方式命名，“.class{}”

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
			<style type="text/css">
				
				.cl{
					color: #0000FF;
				}
			</style>
	</head>
	<body>
		<div class="cl"> clas

最低0.47元/天解锁文章

韦重阳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
二、CSS层叠样式表（笔记）

一、CSS概念对html的结果进行美化，优点是1. 功能强大 2. 将内容展示和样式控制分离降低耦合度。解耦让分工协作更容易提高开发效率二、CSS的样式1.行内样式写在标签内部的样式，仅对该行标签有用<p style="color: blue; background: chartreuse;">窗前明月光，疑是地上霜</p>2.内部样式定...
复制链接

扫一扫

专栏目录