标签：
上一篇介绍HTML时，已经说了，如果把HTML比作一个裸男的话，那么CSS就是为这个裸男穿上衣服，搭配一些换看的发型。
官方的术语是,css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。
存在的方式有三种：
存在方式有三种，那么肯定存在一个优先级关系：
元素内联>页面嵌入>外部引用， 这个仅限于同样的样式冲突时才有用
可能上述看着有点蒙下面看代码比较直观一点。
元素内联：
直接在标签上使用，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联</title> </head> <body> <p style="background-color: red"> 内联类型 </p> </body> </html>
显示效果：
页面嵌入：
在head处写好css样式，在应用这样的好处就是可以重复利用，如下代码：
注：（class是css选择器的一种后面会详细介绍）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面嵌入</title> <!--在头部设定好css样式（名字随意），在标签里使用class="样式名字"（class是css选择器的一种后面会详细介绍）--> <style> .css{ background-color: darkorange; } </style> </head> <body> <div> <!--调用头部的css样式--> <p class="css"> 页面嵌入测试 </p> </div> </body> </html>
显示效果：
外部引用 ：
把样式写到一个css文件中，然后去调用：
css文件中的样式文件名为common.css代码如下：
div{
background-color: red;
color: white;
}
html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>调文件</title> <!--导入文件--> <link rel="stylesheet" href="common.css"> </head> <body> <div> <!--调取头部导入的文件里，定义的样式为div的，这里也是css选择器的一种--> Hello,Tom! </div> <div> Helll,Jerry! </div> </body> </html>
显示效果：
1、标签选择器
为标签类型设置的样式如：<div>、<a>、<span>、<p>等标签，如以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style> /*标签为div（也可以设置为a、p等标签）的默认使用以下样式*/ div{ color: red; } </style> </head> <body> <!--div标签默认使用头部定义的样式--> <div>Jerry1</div> <div>Jerry2</div> <!--p标签没有定义样式不调用--> <p>Tom</p> </body> </html>
显示效果：
2、ID选择器
指定ID设置的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style> /*ID选择器*/ #i1{ font-size: 20px; background-color: red; color: black; } </style> </head> <body> <!--这里的id不能是相同的--> <a id="i1">Tom</a> <a id="i3">jerry</a> <a id="i2">Tom</a> </body> </html>
显示效果：
3、类选择器
一般情况下用的都是类选择器，类名可以是相同的。如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .cls{ background-color: red; font-size: 25px; } </style> </head> <body> <!--这里的任何标签都可以调用类选择器--> <div class="cls">TOM1</div> <a class="cls">TOM2</a> <p class="cls">TOM3</p> <span class="cls">TOM4</span> </body> </html>
显示效果：
4、关联选择器
关联选择器：应用场景为某标签下面的标签设置指定的样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关联选择器</title> <style> /*为一个标签使用，cls类选择器下的div下的p标签使用*/ .cls div p{ background-color: red; } </style> </head> <body> <!--这个div应用了cls类选择器，那么他下面的div下的所有p标签将应用上面设置的样式--> <div class="cls"> <div style="background-color: #4cae4c">Tom</div> <div> <p>Jerry</p> <p>Jerry2</p> </div> </div> </body> </html>
显示效果：
也可以关联类选择器的方式：如下代码
<style> /*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/ .container .l .p { background-color: pink; } </style> </head> <body> <div class="container"> <div class="l"> test <div> <ul> <!--这里需要注意,他们只要是有包换关系就行,不一定非得挨着--> <li class="p"> hello shuaige </li> </ul> </div> </div> </div>
显示效果：
5、组合选择器
如果两个或多个关联类选择器都需要相同的样式怎么整？其实不需要重写一个
看以下样式：
.cls .a .b1 {
background-color: pink;
}
.cls .a .b2 {
background-color: pink;
}
解决办法：组合选择器（“逗号”就是或的关系）一般不常用
.cls .a .b1,.cls .a .b2 {
background-color: pink;
}
#如果前面两个类都相同的话也可以再次做简化
.cls .a .b1,b2 {
background-color: pink;
}
实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> .cls .b1,.cls1 .b2 { background-color: pink; } </style> </head> <body> <div class="cls"> <div class="b1">TOM</div> </div> <div class="cls1"> <div class="b2">JERRY</div> </div> </body> </html>
显示效果：
6、属性选择器
表单验证的时候会经常用到，看以下例子：
需要给input下找到类型为text的标签，并且给这个标签设置上样式，上面讲的可以组合标签、关系等选择器，最小单位是标签，不能定义type属性！
<div> <input type="text" /> <input type="password" /> <input type="file" /> <input type="checkbox"/> <input type="button"/> <input type="reset"/> </div>
其实在组合选择器后面加上[type=“text”]就ok了如下：注意（input[type=“text”]中间不能有空格）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属相选择器</title> <style> .cls input[type="text"]{ border: 2px solid red; } </style> </head> <body> <div class="cls"> 姓名<input type="text"/> 密码<input type="password"/> 爱好<input type="checkbox"/> <input type="file"/> </div> </body> </html>
显示效果：
那么问题又来了，想到到input标签属性为type=text并且name等于Tom的input标签咋整,如下？
<div class="cls"> 输入<input type="text" name="Tom"/> 姓名<input type="text" /> 密码<input type="password"/> 爱好<input type="checkbox"/> <input type="file"/> </div>
办法总是有的，再添加一个属性就解决了如下代码：
<style> .cls input[type="text"][name="Tom"]{ border: 2px solid red; } </style>
显示效果：
属性标签经常用
也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：
background 【背景】
1、background-color
背景颜色 前面多少也有运用到，这个就不多做介绍了
2、background-image 背景图片
运用代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> </head> <body> <div style="background-image: url(favicon.ico);height: 60px;"> <!--url为图片的路径，height高度占多少像素--> </div> </body> </html>
显示效果：
背景图片不重复：
因为div是块级标签会占一整行，要想只显示一个单独的图片如以下代码
<div style="background-image: url(favicon.ico);height: 60px;background-repeat: no-repeat"> <!--background-repeat: no-repeat 就是为了让图片不重复--> </div>
显示效果：
border【边框】
设置边框，分为实线、虚线、点的线形式如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> </head> <body> <!--第一种：设置一个线粗2像素、实线、红色、框高20像素（不写框高线就重叠了）、框里面的内容为hello--> <div style="border: 2px solid red;height: 20px">hello</div> <!--第二种：设置线粗2像素、点形式的线、黑色、框高20像素，框里面的内容为hello2--> <br /><div style="border: 2px dotted black;height: 20px">hello2</div> <!--第三种：设置线粗2像素、虚线、蓝色、框高20像素，框里面的内容为hello3--> <br/><div style="border: 2px dashed blue;height: 20px">hello3</div> </body> </html>
显示效果：
边框也可以单独的设置一个边如只显示单个的上、下、左或右
<!--设置上下左右的单边--> <br/><div style="border-left: 2px solid red;height: 20px">左边框</div> <br/><span style="border-right: 2px solid blue;height: 20px">右边框</span> <br/><div style="border-top: 2px solid red;height: 20px">上边框</div> <br/><div style="border-bottom: 2px solid red;height: 20px">下边框</div>
显示效果如下：
cursor 鼠标停放所显示的效果
把鼠标放上去显示小手或不同的形状，如以下代码，效果自己试吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标小手</title> </head> <body> <p style="cursor:pointer">停放在这里显示小手(pointer)</p> <p style="cursor:help">停放在这里显示问号(help)</p> <p style="cursor:wait">停放在这里显示一个圈正在加载形状(wait)</p> <p style="cursor:move">停放在这里显示移动(move)</p> <p style="cursor:crosshair">停放在这里显示定位(crosshair)</p> </body> </html>
float 浮动 、漂 （用来布局使用，常用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style> .float-l{ width:20%; background-color: black; height: 200px; float: left; /*float:left意思都是往左飘*/ /*这里的宽度和高度都可以用百分比来制定*/ } .float-r{ width:80%; background-color: red; height: 100px; float: left; } </style> </head> <body> <!--引用头部定义的样式--> <div class="float-l"></div> <div class="float-r"></div> </body> </html>
显示效果：
标签：
原文地址：http://www.cnblogs.com/tianjie0522/p/5752637.html
