(1)CSS和HTML结合方式
CSS:是层叠样式表,用来定义网页的现实效果,可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单来说,CSS将网页内容和显示样式进行分离,提高了显示功能。
一、CSS和HTML结合方式
第一种方式、第二种方式
<!-- 2,使用style标签的方式,改善了方式一的代码复用性低的问题-->
<!--将此样式作用在div块中,用css解析
一般定义在head中,因为网页代码顺序执行,若都执行了div代码块,还没有对div的style样式进行解析,不能这样做
-->
<style type="text/css">
div{
background-color:#0F0;
color:#333
}
</style>
</head>
<body>
<!--
1,第一种结合方式:
每个HTML标签中都有一个style样式属性.该属性的值就是css代码,若如下的两个div都想使用相同格式,需要写重复代码,代码复用性低
在第二种方式中虽然先将div样式进行加载(可以理解为div块的默认样式),若希望不用默认的样式,就可以自定义,这就是样式的层叠
-->
<div style="background-color:#F00; color:#FF9">这是一个div区域1</div>
<div>这是一个div区域2</div>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
<span>span区域1</span>
<span>span区域2</span>
</body>
</html>
第三种方式
<!--第三种方式-->
<style type="text/css">
@import url(div.css);
@import url(span.css);
</style>
</head>
<body>
<!--第三种方式:第二种方式可以减少一个网页的重复代码,但是网页有许多样式都是相同的,若每个网页都这样重复写,代码的复用性很低
所以可以将该样式放在一个文件中,在网页代码中import这个文件
-->
<div >这是一个div区域1</div>
<div>这是一个div区域2</div>
<span>span区域1</span>
<span>span区域2</span>
<p>这是一个段落1</p>
<p>这是一个段落2</p>
div.css文件
@charset "utf-8";
/* CSS Document */
div{
style="background-color: #F00;
color: #3F0"
}
第三种方式更简便些
在第三种方式中,若多个网页界面引用相同的太多,也不利于代码的复用性,所以可以将多个引用放在一个CSS文件中,在网页设计中调用这个文件,大大提高了代码的重用性
<style type="text/css">
@import url(1.css);
</style>
@charset "utf-8";
/* CSS Document */
<style type="text/css">
@import url(div.css);
@import url(span.css);
@import url(p.css);
</style>
以上的各种格式不建议放在同一个文件中,一般比较单一的网站可以这样做,如博客、贴吧。一般是分开写,这样修改比较方便,而且可以让不同的页面都可以用这些格式 。
*第四种方式
<link rel="stylesheet" href="1.css" type="text/css"/>
二、样式优先级
由上到下,由外到内,优先级由低到高
三、总结css代码格式
选择器名称{ 属性名:属性值; 属性名:属性值…….}