CSS的声明和引入:
<html>
<head>
<title>css的引入和声明</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<!--内联方式-->
<style type="text/css">
/*书写css代码*/
#showdiv{
border: solid 1px;
background-color: aquamarine;
}
</style>
<!--外联方式-->
<link rel="stylesheet" type="text/css" href="css/my.css"/>
</head>
<!--
CSS的引入和声明学习:
div标签:块级标签,带有自动换行功能。单独占据一行。
作用:主要是将其中的数据在代码中作为整体,在页面中作为整体显示
声明css的代码域
1、在head标签中声明
<style type="text/css">
css的代码域
</style>
2、在标签上使用style属性
注意:每个HTML标签上都有style属性。
3、在head标签中使用link标签引入外部声明好的css文件
<link rel="stylesheet" type="text/css" href="css/my.css"/>
三种声明方式的比较:
内联和内嵌方式与HTML的代码耦合性较高,样式代码重用性低。
外联方式和HTML代码的耦合性低,并且样式代码重用性高
三种声明方式同时操作同一个标签样式时:
内嵌方式优先级最高
内联和外联就看谁在上谁在下,在下后执行,在上的先执行。
如果都声明在head标签中,则遵循就近原则,谁离标签近,谁最终被显示
使用:
外联方式:公共样式。
内嵌和内联:当前网页的个性化样式。
注意:
因为在一个网页中需要同时使用两门语言进行数据的组织和显示,这样就需要对两门语言进行区分。
所以css需要在HTML文档中单独的进行代码域的声明。
-->
<body>
<h3>css的引入和声明</h3>
<hr />
<div id="showdiv" style="background-color: blueviolet;">
aaa
<br /><br /><br /><br />
</div>
<!--内嵌方式:在标签上使用是style属性-->
<div id="div01" style="border: solid 1px;">
ccc
</div>
<div id="div02">
ddd
</div>
bbb
</body >
</html>