（1）CSS和HTML结合方式

来源：互联网发布：java log4j 实例编辑：程序博客网时间：2024/05/24 03:01

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代码格式
选择器名称{ 属性名：属性值；属性名：属性值…….}

阅读全文

0 0