CSS_1

最新推荐文章于 2024-03-30 09:22:41 发布

qzc_root

最新推荐文章于 2024-03-30 09:22:41 发布

阅读量540

点赞数 1

本文链接：https://blog.csdn.net/qzc_root/article/details/111872983

版权

CSS的概念

Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、北京图片、网页定位等设定

CSS基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css演示</title>
		<!-- style标签 -->
		<style type="text/css">
			/* body选择器  color font-size属性 red14px值 属性+值=声明
			建议最后一条声明的";"写上*/
			body{
				color: red;
				font-size:14px;
			}
		</style>
	</head>
	<body>
		ssssssssssssssssz
	</body>
</html>

CSS样式

行内样式

使用style属性引入CSS样式

        <h1 style="color: red;">行内样式</h1>
		<p style="color: #008000;font-size: 13px;">直接在标签中设置样式</p>

页面展示：
在这里插入图片描述

内部样式

CSS代码写在< head>的< style>标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: green;
				font-size: 0.875rem;
			}
		</style>
	</head>
	<body>
		<h1>望庐山瀑布</h1>
		<p>日照香炉生紫烟，</p>
		<p>遥看瀑布挂前川。</p>
		<p>飞流直下三千尺，</p>
		<p>疑是银河落九天。</p>
	</body>
</html>

页面展示：
在这里插入图片描述

外部样式

链接外部样式
CSS代码保存在扩展名为.css的样式表中
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: green;
				font-size: 0.875rem;
			}
		</style>
		<!-- rel 使用外部样式表 type文件类型 href文件路径 -->
		<link rel="stylesheet" type="text/css" href="css/waibu.css"/>
	</head>
	<body>
		<h1>望庐山瀑布</h1>
		<p>日照香炉生紫烟，</p>
		<p>遥看瀑布挂前川。</p>
		<p>飞流直下三千尺，</p>
		<p>疑是银河落九天。</p>
	</body>
</html>

页面展示：
在这里插入图片描述

CSS样式优先级

刚才引入外部样式时，同时使用了内部样式，最后使用的样式是外部样式，那么三者优先级是什么样的呢？
行内样式：写在标签内部属性style中，优先级最高
内部样式：style标签内部< head>中
外部样式：写在外部的css文件中
内部样式和外部样式的优先级：如果有相同的标签，更靠近body中html代码的优先级更高

CSS基本选择器

标签选择器

标签选择器直接应用于HTML标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* p 标签选择器 color属性 red值  属性+值=声明 */
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 标签选择器 -->
		<p>标签选择器</p>
	</body>
</html>

页面展示：
在这里插入图片描述

类选择器

类选择器可在页面中多次使用，即可以多次使用相同的class值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* .aa 类选择器 */
			.aa{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- class 类名称 -->
		<span class="aa">类选择器1</span>
		<span class="aa">类选择器2</span>
		<span class="aa">类选择器3</span>
	</body>
</html>

页面展示：
在这里插入图片描述

ID选择器

ID选择器在同一个页面中只能使用一次，即id值唯一，下图代码中不能再出现id=“a”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* #a ID选择器 */
			#a{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- id值 -->
		<p id="a">ID选择器</p>
	</body>
</html>

页面展示：
在这里插入图片描述

基本选择器优先级

ID选择器>类选择器>标签选择器

qzc_root

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_1

CSS的概念Cascading Style Sheet 级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、北京图片、网页定位等设定CSS基本语法<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css演示</title>  <style type
复制链接

扫一扫