CSS基础一（CSS）

最新推荐文章于 2023-08-18 20:40:23 发布

MMddyhc

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量322

点赞数 2

分类专栏： Web 文章标签： CSS Web

本文链接：https://blog.csdn.net/qq_41496127/article/details/88815583

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.CSS（层叠样式表）基础语法：

选择器{属性:属性值;属性:属性值;……}

三要素：选择器、大括号、属性:属性值;（一组声明）
提示：CSS代码一般都写在head标签里

1.选择器——规定选择器定义的样式对那些元素生效

（1）标签选择器——选择器是HTML标签：

影响整个页面中所有运用该标签的元素

（2）类选择器——以“.”开头的选择器(.class名)：

1.影响所有以class属性引用该类的标签样式的元素
2.注意：类名的第一个字符不能使用数字！
3.元素可以加入多个类，把各个类名放在class属性中，各个类名之间用一个空格分隔，类名的顺序并不重要

（3）ID选择器——以“#”开头定义的选择器(#ID值)：

1.影响以id属性引用该选择符的标签样式元素
2.注意：ID的第一个字符丌能使用数字！
3.注意：单一页面中，一个ID选择器只能使用一次！

2.选择器实例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS</title>
		<style type="text/css">
			li,h1,h2{
				color:skyblue;
			}
			.wl{
				font-size:25px;
			}
			#ll{
				color: red;
				font-size:30px;
			}
		</style>
</head>
<body>
	<h1>CSS初探：</h1>
	<h2 class="wl">这是个红色的二级标题</h2>
	<ol>
		<li id="ll">FPX</li>
		<li class="wl">IG</li>
		<li class="wl">TOP</li>
		<li>RNG</li>
	</ol>
</body>
</html>

显示结果：
在这里插入图片描述

3.选择器汇总表：

在这里插入图片描述

二.将CSS样式与HTML的内容整合方式：

1.行内样式——在元素标签内通过style属性添加样式：

<body>
	<标签 style="属性:属性值;属性:属性值;……">
</body>

这种写法其实与CSS的实质相悖，如果这样写还不如不用CSS

2.页内样式——在head内的style标签内添加样式：

如上方实例所示：
这种写法相对行内样式更有效，但是维护较困难

3.外部样式——引用外部建立的.css文件：

使用link标签

<head>
<link rel="stylesheet" type="text/css" herf="css文件路径">
</head>

（1）html文件中的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS</title>
	<link rel="stylesheet" type="text/css" href="styleLOL.css">
</head>
<body>
	<h1 class="tt">CSS初探：</h1>
	<h2 class="tt">这是个红色的二级标题</h2>
	<ol>
		<li class="first">FPX</li>
		<li class="second">IG</li>
		<li class="second">TOP</li>
		<li class="first">RNG</li>
		<li class="first">WE</li>
		<li class="second">SDG</li>
		<li class="second">EDG</li>
		<li class="first">JDG</li>
	</ol>
</body>
</html>

（2）css文件中的代码：

.tt{
	color:skyblue;
}
.second{
	color: green;
	font-size:30px;
}
.first{
	color: red;
	font-size:30px;
}

（3）显示效果：
在这里插入图片描述

三.样式优先级：

1.ID选择器 > 类选择器 > 标签选择器
2.行内样式 > 页内样式 > 外部样式
3.就近原则，距离元素最近的样式优先级最高

MMddyhc

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
CSS基础一（CSS）

一.CSS基础语法：选择器{属性:属性值;属性:属性值;……}三要素：选择器、大括号、属性:属性值;（一组声明）提示：CSS代码一般都写在head标签里1.选择器——规定选择器定义的样式对那些元素生效（1）标签选择器——选择器是HTML标签：影响整个页面中所有运用该标签的元素（2）类选择器——以“.”开头的选择器(.class名)：1.影响所有以class属性引用该类的标签样式的元...
复制链接

扫一扫