一、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>