CSS(1）

来源：互联网发布：linux循环语句命令编辑：程序博客网时间：2024/05/29 15:33

CSS概述

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性、style标签、导入和链接。
CSS与HTML相结合的四种方式
☆ 1、style属性方式

<p style="background-color:#FF0000; color:#FFFFFF">
    p标签段落内容。
</p>

☆ 2、style标签方式

<style type=”text/css”>
    p { color:#FF0000;}
</style>

☆ 3、导入方式

<style type="text/css">
     @import url(myDiv.css)
</style>

☆ 4、链接方式

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS技术演示</title><style type="text/css">   @IMPORT url("suit.css");   div{      font-size:20pt;      background-color:#ff0;   }</style><link rel="stylesheet" href=""></head><body >  <div style="color:#ff0000;background-color:#0ff;">  湖南城市学院 </div>  <div>信息科学与工程学院</div>    <table ><caption>这是<span>我的第二个</span>表格</caption><tr>   <th>第1列</th>  <th colspan="2">第2-3列</th></tr>       <tr>   <td rowspan="2">单元格1-1</td>  <td>单元格1-2</td>  <td>单元格1-3</td></tr>       <tr>   <td>单元格2-2</td>  <td>单元格2-3</td></tr>           </table><p>8月16日至17日,国内城市规划建设领域最具影响力的高峰论坛——2016第十一届城市发展与规划大会在湘江新区召开。作为大会19个分论坛之一，由湖南省两型社会与城市科学研究会主办，我校规划建筑设计研究院承办的“湖南绿色人文城市建设实践”论坛于16日下午隆重举行。来自国内两型研究和新型城镇化建设领域的100余名专家学者集聚一堂，共同探讨城市发展前沿问题。</p></body></html></span>

suit.css

<span style="font-family:Times New Roman;font-size:14px;">@CHARSET "UTF-8";@IMPORT url("suit1.css");</span>

suit1.css

<span style="font-size:14px;">@CHARSET "UTF-8";@IMPORT url("css/table1.css");@IMPORT url("css/p1.css");</span>

suit2.css

<span style="font-size:14px;">@CHARSET "UTF-8";@IMPORT url("css/table2.css");@IMPORT url("css/p2.css");</span>

suit3.css

<span style="font-size:14px;">@CHARSET "UTF-8";@IMPORT url("css/table1.css");@IMPORT url("css/p2.css");</span>

p1.css

<span style="font-size:14px;">@CHARSET "UTF-8";p{color:#0000ff;font: bold 20pt;}span{background-color: #ffff00;}</span>

p2.css

<span style="font-size:14px;">@CHARSET "UTF-8";p{color:#ff0000;font: bold 15pt;font-family: 黑体;}span{background-color: #ff00ff;}</span>

table1.css

<span style="font-size:14px;">@CHARSET "UTF-8";table{border-color: #0000ff;background-color: #ffff00;border: 1px solid red;border-collapse:collapse;}td{border: 1px solid red;}</span>

table2.css

<span style="font-family:Times New Roman;font-size:14px;">@CHARSET "UTF-8";table{border-color: #000000;background-color: #00ffff;}</span>

相关语法

☆样式优先级

由上到下，由外到内。优先级由低到高。——总之，一般情况是以后加载为主，但还有细节优先级问题（后面会讲到）。
☆CSS代码格式
选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开
属性与属性值直接按用冒号连接
如果一个属性有多个值的话，那么多个值用空格隔开。

选择器
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器（标签本身就是封装数据的容器）。

☆选择器共有三种：
1) html标签名选择器。使用的就是html的标签名。
2) class选择器。其实使用的是标签中的class属性。
3) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
☆选择器的优先级

标签名选择器 < class选择器 < id选择器 < style属性

<span style="font-family:Times New Roman;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>CSS技术演示</title><style type="text/css">              /* 标签选择器 */   div{      color: #ff0000;   }              /*  类选择器  */   .a{      background-color:#00ff00;   }      span{     background-color: #00ffff;   }      /*  id选择器  */   #abc{      background-color: #ffff00;   }      /* 优先级: style属性 > id选择器 > 类选择器 > 标签选择器  */</style></head><body >  <div>这是div1中的文本</div>  <div class="a">这是div2中的文本</div>  <div>这是div3中的文本</div>  <div class="a">这是div4中的文本</div>  <span class="a" >这是span1中的文字</span>  <span>这是span2中的文字</span>  <span class="a" id="abc">这是span3中的文字</span>  <span id="abc" style="background-color:blue">这是span4中的文字</span>  </body></html></span>

0 0