css选择的样式（一）：css基本语法、css使用方法及优先级

最新推荐文章于 2024-07-06 14:50:23 发布

橙子吖21

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量235

点赞数

分类专栏： web前端开发文章标签： css html html5

本文链接：https://blog.csdn.net/qq_42012782/article/details/116135319

版权

web前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、css基本语法

代码知识：

<!DOCTYPE html>
<html>
<head>
	<title>css基本语法</title>
	<!--
	css引用：写在<head></head>标签内，<style type="text/css"> css样式...</style>
	-->
	<style type="text/css">
	p,h1,h2,h3,h4{font-size: 30px;}
	/*p标签的样式*/
	p{color: blue;
	  font-family: "隶书";}
	h1{color: red;}
	</style>
</head>
<!-- html注释： -->
<!-- css注释：/* 注释语句*/ -->
<body>
<!-- css层叠样式表：用于定义html内容在浏览器内的显示样式-->
<!--CSS规则由两部分构成：选择器、声明 -->
<h1>css层叠样式</h1>
<h2>css层叠样式</h2>
<h3>css层叠样式</h3>
<h4>css层叠样式</h4>
<p>用于定义html内容在浏览器内的显示样式</p>

</body>
</html>

效果图：

二、css的使用方法

1、行内样式

2、嵌入样式

3、外部样式

4、导入样式

<!DOCTYPE html>
<html>
<head>
	<title>css的使用方法</title>
	<style type="text/css">
		/*嵌入样式*/
		/*p{color: blue;}
	    h2{color: red;}*/
	    /*4、 css导入式；@import "外部css样式表"*/
	    @import url(css.css);
	</style>
	<!--3、css外部样式，把css样式代码写在独立的一个文件中；
    扩展名为，css文件名.css；
    引入外部文件：<link href="XX.css" rel="stylesheet" type="text/css" />；
    说明：<link>要放在<head>标签之前
    -->
	<!-- 外部样式
	<link rel="stylesheet" type="text/css" href="css.css">
     -->
</head>
<body>
<!--1、 css行内样式：
在相应的开始标签内添加style样式属性(不建议大量使用)，如
<p style="color:red">内容</p> 
-->
<H1 style="color: red;font-size: 20px">css使用方法</H1>
<!--2、内部样式（嵌入样式）：
把css样式代码写在:
<style type="text/css">样式</style> 
-->
<h2>css使用方法</h2>
<p>行内样式</p>
<p>嵌入样式</p>
<p>外部样式</p>
<p>导入样式</p>

<table border="0" width="600px" height="300px" align="center">
	<caption>css使用方法的区别</caption>
	<tr bgcolor="pink" align="center">
		<td>类别</td>
		<td>引入方法</td>
		<td>位置</td>
		<td>加载</td>
	</tr>
	<tr align="center">
		<td> 行内样式</td>
		<td> 开始标签内style</td>
		<td> HTML文件内</td>
		<td> 同时</td>
	</tr>
	<tr align="center">
		<td> 内部样式</td>
		<td> head中style内</td>
		<td> HTML文件内</td>
		<td> 同时</td>
	</tr>
	<tr align="center">
		<td> 链入外部样式</td>
		<td> head中link引用</td>
		<td> css样式文件与HTML文件分离</td>
		<td> 页面加载时，同时加载css样式</td>
	</tr>
	<tr align="center">
		<td> 导入时@import</td>
		<td> 在样式代码最开始处</td>
		<td> css样式文件与HTML文件分离</td>
		<td> 在读取完HTML文件之后加载</td>
	</tr>
</table>
<h3>使用链入外部样式的好处</h3>
<pre>
	1、css与HTML分离.
	2、多个文件可以使用同一个样式文件。
	3、多文件引用同一个css文件，css只需要下载一次。
</pre>>
</body>
</html>

效果图：

三、css使用优先级

行内样式>内部样式>外部样式

代码知识：

<!DOCTYPE html>
<html>
<head>
	<title>css使用方法优先级</title>
	<!--行内样式的优先级大于内部样式的优先级
        内部样式的优先级大于导入式样式的优先级
        内部样式的优先级与链入外部样式的优先级取决于位置，谁更接近于设置样式的标签(就近原则)
        行内样式>内部样式>外部样式

	 -->
	  <link rel="stylesheet" type="text/css" href="css3.css"><!--color:yellow-->
	 <style type="text/css">
		@import url("css1.css");/*color:green*/
		/* 外部导入样式*/
		p{color:blue;}
	</style>
 
	 <link rel="stylesheet" type="text/css" href="css2.css"><!--color:gray-->
	<!--链入外部样式样式-->
	<style type="text/css">
		p{color: orange;}
	</style><!--内部样式-->

</head>
<body>
    <p style="color: red;"> <b>css使用方法</b></p><!--行内样式-->
</body>
</html>

橙子吖21

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css选择的样式（一）：css基本语法、css使用方法及优先级

一、css基本语法代码知识：<!DOCTYPE html><html><head> <title>css基本语法</title>  <style type="text/css"> p,h1,h2,h3,h4
复制链接

扫一扫

专栏目录