标签：style blog ar color 使用 sp java strong 文件
CSS全称：层叠样式表（Cascading Style Sheets），用来定义网页的显示效果，可以解决html代码对样式定义重叠的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果。一，html和CSS结合有四种方式：
2,style标签方式（内嵌方式）
3,导入方式
4,链接方式
第一种
<!-- 1,style属性方式 :该属性值就是css代码-->
<div style="background-color: #06F;color: #F00">
这是css的div1
</div>第二种
将div区域都变成同一样式，但是为了简化代码，用到第二种方式
<!--2,使用style标签的方式-->
<style type="text/css"> //声明，css样式
div{<span style="white-space:pre"> </span>//声明是div区域
background-color: #000;
color: #FFF
}
</style> //一般都放在<head>标签中因为想要其一打开网页就有效果，所以先加载，放在<head>标签内
ps：当遇到新的div样式，就会覆盖，这就是样式的层叠，比如有9个div区域一样的样式，1个不一样，那么就将10个div样式都弄成一样的放在<head>标签中，其中一个，样式覆盖即可
第三种
将css写入文件，html导入的方式
一个网页可以用上述方式，但是10个呢，不能每个网页，都加<style>,所以就将div{background-color: #00F;
color: #0F3;}封装称一个div.css文件，然后在html<style>中用@import url("div.css");导入即可，如果 .css文件很多，那么就可以将 @import url("div.css");等文件再导入一个1.CSS文件，再在html中导入1.css即可
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("1.css");
</style>
</head>@import url("div.css"); //1.css文件中
@import url("span.css");
div{ //div.css文件中
background-color: #00F;
color: #0F3;
}
第四种
<head><link rel="stylesheet" href="1.css" type="text/css" /></head>
<!--<link>中的rel能链接一个和当前网页相关联的页面(对当前页面进行样式修饰),stylesheet样式表,
href链接地址，type直接类型-->二，样式优先级
从上到下，从外到内，优先级由低到高，一般情况下，后加载的，为主
三，CSS语法结构
选择器名称{属性名:属性值 ;属性名:属性值 ;....}
属性与属性之间分号分割
属性与属性值用冒号连接
如果一格属性，多个值，值之间用空格分隔
四，选择器
就是指定css要作用的标签，标签的名称就是选择器，意为：选择哪个容器
选择器有三种：
1，html标签选择器，使用的是html的标签名:
2，class选择器，其实使用的标签中的class属性
3，id选择器，使用的是标签中的id属性
每一个标签都定义来class属性和id属性，用于对标签进行标识，方便对标签操作
多个标签的class属性值可以相同，但是id属性值要唯一，Javascript中经常用
html标签名选择器，前面已经用到
class选择器：
<head>
<style type="text/css">
div{ background-color:#00F; color: #FFF ; }
<!--用点来标识-->
div.per{ background-color:#0F0; color: #0000FF; }
</style>
</head>
<body>
<div> 这是css的div1 </div>
<div class="per">这是css的div2</div>
</body>多个标签，都用同一属性，那么就可以用 ： （.名称） 来定义
<head>
<style type="text/css">
div{ background-color:#00F; color: #FFF ; }
.per{ background-color:#0F0; color: #0000FF; }
</style>
</head>
<body>
<div> 这是css的div1 </div>
<div class="per">这是css的div2</div>
<span class="per">这是css的span</span>
<p class="per">这是css的段落区域</p>
</body>
ID选择器：
用法上和class选择器，没有区别，但是id的取值在页面中是唯一的，除了给css使用，还被Javascript使用
多样式用class就足够来，但是id通常是用来区标示页面中一些特定区域
<head>
<style type="text/css">
.aa{ background-color:#00F; color: #FFF ; }
#bb{ background-color:#000; color: #FFF ; }
</style>
</head>
<body>
<div> 这是css的div1 </div>
<div id="bb">这是css的div2</div>
<span >这是css的span</span>
<p class="aa" id="bb" style="background-color:#F0F;color: #FEF">这是css的段落区域</p>
</body>上述三者优先级：标签选择器<类选择器<id选择器<style属性
五,关联选择器和组合选择器
关联选择器格式:标签名+空格+标签名
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span b{ //选择器中的选择器
background-color: #09F;
color: #FFF;
}
span b a{ //span标签中的b标签中的a标签
background-color: #000;
color: #FFF;
}
</style>
</head>
<body>
<div class="aa"> 这是<b>css</b>的div1 </div>
<span>这是css的<b><a>sp</a>an</b>1</span>选择器名+逗号+选择器名
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
.aa,span b{ //对多种选择器进行相同样式的定义
background-color: #000;color: #C00;
}
</style>
</head>
<body>
<div class="aa"> 这是<b>css</b>的div1 </div>
<span>这是css的<b><a>sp</a>an</b>1</span>
<p class="aa" > 这是css的段落区域</p>
</body>
标签：style blog ar color 使用 sp java strong 文件
原文地址：http://blog.csdn.net/wjw0130/article/details/41347583
