首页 > 代码库 > CSS
CSS
什么是CSS*
1. css即cascading stylesheet（级联/层叠样式表），控制页面的外观
2. css为网页提供表现的形式，即按照w3c的建议，实现一个比较好的网页设计，应该按照如下的规则：
网页的结构和数据，应该写在.html文件里
网页的表现形式，应该写在.css文件里
网页的行为，应该写在.js文件里
这样做的原因是，将网页的数据、表现、行为分离，方便代码的维护 ,提高页面的维护度
3. 早期时表现页面＜font color="red" size="6"＞hello world.. 使用这种方式不好，因为“数据”和“表现”没有分离
比较好的方式是将“数据”和“表现”分离开，将“表现”写入css文件，html文件中只写数据
Style.css
body{ color：red；font-size：30px；}
Html01.html
<html> <head> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> Hello world! </body> </html>
CSS的使用方式
1.内联方式
将符合CSS语法的定义在元素的style属性，中间用分号表示。实现了对于样式的定义，但是不能重用。可重用性，可维护度不好。
<元素 style=“样式1：值；样式2：值；....”>
<h1 style="color:red;">h1 text</h1>
2. 内部样式表
将样式定义放在head的style中。实现当前页面上样式的重用，样式的分离。在head里添加style标记
<head> <style type=”text/css”> 选择器{ 样式1：值；样式2：值 } </style> </head>
3. 外部样式表
将样式定义到一个单独的CSS文件中，由html页面引入CSS文件
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head>
CSS选择器
选择器是什么？
选择器定义了如何查找html标记，浏览器会依据选择器，找到匹配的标记，然后施加对应的样式。
常用的选择器
1. 标记选择器（简单选择器，元素选择器） 标记的名称{ 属性名：属性值；....； }
Style.css
body{ color：red；font-size：30px；} p{ color：blue；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> Hello world<br/> <p>hello kitty</p> <p>hello jerry</p> </body>
2. class（类）选择器
第一种形式
匿名的class选择器 格式： . 选择器的名称{ 属性名：属性值 ; ... ; } 注：标记的class属性值与选择器的名称相等
Style.css
body{ color：red；font-size：30px；} P{ color：blue；} .s1{ font-style：italic；font-size：60px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div class="s1">hello java</div> <div class="s1">hello c </div> <span> hello zs</span> <span> hello lg</span> </body>
第二种形式
有名的class选择器（分类选择器） 格式：标记的名称 . 选择器的名称{ 属性名：属性值 ; ... ; } 注：除了标记的class属性值和选择器的名称相等以外，还要求标记的名称匹配
Style.css
body{ color：red；font-size：30px；} P{ color：blue；} div.s1{ font-style：italic；font-size：60px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div class="s1">hello java</div> <div class="s1">hello c </div> <div class="s2">hello c </div> <p> hello lg</p> </body>
3. id选择器
# 选择器的名称{ 属性名：属性值 ; ... ; } 标记的id属性值与选择器的名称相等。 注意，在同一个html文件当中，id值必须唯一
Style.css
body{ color：red；font-size：30px；} P{ color：blue；} div.s1{ font-style：italic；font-size：60px；} #d1{ width：200px；height：100px；background-color：#ff88ee；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div class="s1">hello java</div> <div class="s1">hello c </div> <div class="s2">hello c </div> <p class="s1"> hello lg</p> <div id="d1" class="s1"></div> </body>
4. 分组选择器
h1 , h2 , h3{ color : green ; } 对以" , "隔开的选择器施加相同的样式
Style.css
h1，h2，h3{ color：green；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <h1>h1.1</h1> <h1>h1.2</h1> <h2>h2</h2> <h3>h3</h3> </body>
5. 分类选择器：同一种标签中细分不同的样式
Style.css
div.small{ border:1px solid red; width:100px; height:100px; } div.large{ border:1px solid red; width:200px; height:200px; }
html
<body> <div class="small"> aaaa</div> <div class="large">bbbb</div> <h6 class="large">h6 text</h6> </body>
6. 选择器的派生
#d2 p{ font-size :120px ; } 表示id为d2的标记内部的所有p标记的字体为120px
Style.css
div{ color：red；font-size：60px；} #d2 p{ font-size：120px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div id="d1"> <p>div d1 p1</p> </div> <div id="d2"> <p>div d2 p2</p> haha </div> </body>
7. 伪类选择器：定义同一个元素在不同状态下的外观
以a为例： a：link（没有访问过的） a：hover（鼠标放在上面）鼠标悬停 a：active（鼠标按下） a：visited（访问过的） 其他元素（都有的）：hover
css
a.mylink：link{ color：red；} a.mylink：hover{ color：blue；} a.mylink：active{ color：green；} a.mylink：visited{ color：yellow；} h2:hover{font-size:70px;}
html
<a href="a.html" class="mylink">哈哈</a> <h2>h2</h2>
样式的继承
子标记会继承父标记的样式
Style.css
div{ color：red；font-size：30px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> Hello world<br/> <p>hello kitty</p> <p>hello jerry</p> </body>
样式的优先级
就近优先，不同取并集，相同重复取并集。内联样式最高，高于内部和外部。内部和外部，以最后一次定义的为准。默认样式： 浏览器默认的样式 。默认样式最低。
<style> <link> 外部优先 <link> </style> 内部优先
CSS单位
px 像素（通用） 14px。（计算机屏幕上的一个点）相对于屏幕的。1024*768表示长1024个点，宽768个点。 相对单位。（一般设置在长和宽）
pt 磅（1pt等于1/72英寸）。绝对大小（一般设置字体大小）
em 字符的宽度 1em表示1个字符的宽度。2em等于当前字体尺寸的两倍。
in 英寸
cm 厘米
mm 毫米
% 百分比。占屏幕大小的百分比
CSS的颜色
rgb(x,x,x)：RGB值，如rgb(255,0,0)
rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)
#rrggbb：十六进制数，如#ff0000
#rgb：简写的十六进制数，如#f00
常见的属性
1. 尺寸属性
只对块级元素适用，行级元素是自适应的，根据内容大小显示。
width：宽
height：长
overflow：当内容出元素框时如何处理。 visible:依然显示 hidden:隐藏 scroll:总是显示滚动条 auto:自动。如果溢出，则显示滚动条
<div style="width:50px;height:50px;border:1px solid black;overflow:visible ">
撒旦国际公法说假话的各个建设的方法个省份
</div>
2. 文本处理的属性
color:字体颜色
font-size :30px ; 字体大小 一般为14px
font-family : "宋体"; 字体
font-style : italic/normal (斜体、正常); 风格
font-weight : 100（normal正常/bold粗体; 粗细 100~900
text-align :center ; 对齐方式 left , right , center
text-decoration : underline / none; 加下划线
text-indent：2em; 缩进2个字符宽
line-height：1.5em ：行高1.5个字符高(行间距)，常用来设置垂直方向上的居中（数值和高度相同即可）
cursor : pointer ; 光标的形状 wait 手型
vertical-align：水平垂直居中，只适合在td里
<!--文本相关属性--> <head> <style> #d1{ width :200px ; height :200px ; font-size :25px ; font-family :"Arial" ; font-weight :900 ; cursor :wait ; border :1px solid black ; } </style> </head> <body> <div id="d1">你好</div> </body>
3. 背景属性
background-color : red ; 背景颜色
background-image : url(images/b1.jpg) ; 背景图片
background-repeat : no-repeat ; 平铺方式 repeat-x repeat-y； repeat-x：沿x方向，复制图片； repeat-y：沿y方向，复制图片； 默认：既沿x，又沿y，复制图片。
background-position : 20px 10px ; 位置（第一个为横坐标，第二个为纵坐标）
background-attachment : fixed ; 依附方式 scroll(缺省)
也可以简化为：background：背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置
<!--背景相关的属性-->
<head>
<style>
#d1{
width :200px ; height :500px ; border :10px solid black ;
background-image :url(images/nane.gif) ; background-repeat :no-repeat ;
background-position :60px 40px ; background-attachment :fixed ;
}
</style>
</head>
<body> <div id="d1"> </div> </body>
边框属性
border: width style color 宽度 风格 颜色
border : 1px solid red ;
border-left :2px solid green border-right : border-bottom : border-top :
border-width:
border-style:
border-color
<!--边框相关的属性-->
<style>
#d2{
width :200px ; height :500px ; border :10px solid black ;
border-left :10px dotted black ;
border-right :10px solid red ;
border-bottom :10px solid yellow ;
border-top :10px solid blue ;
background :#cccccc url(images/nane.gif) no-repeat fixed 60px 40px ; }
</style>
<body> <div id="d2"> </div> </body>
边框特有
border-collapse:separate/collapse;默认separate，单元格之间合并（单元格之间的边距设为0）。
vertical-align: top/middle/bottom; 单元格里的内容垂直 上/中/下
border-spacing:单元格分开时，设置之间的距离。
<table>
<tr><td>aa</td><td>bb</td></tr>
<tr><td>aa</td><td>bb</td></tr>
<tr><td>aa</td><td>bb</td></tr>
</table>
<style>
table
{
width:200px;
height:100px;
border:1px solid black;
border-spacing:0px;
//border-collapse:collapse;
text-align:center;
}
table td
{
border:1px solid red;
}
</style>
内边距 / 外边距
外边距：和其他边框之间的距离
margin margin-left margin-right margin-top margin-bottom
margin：30px 40px 50px 20px 上 右 下 左
margin：0px；
margin : 20px auto ; 上、下各20px，左右平均分配 ，一般用于居中
内边距：和内容元素之间的距离。 padding：value
padding padding-left padding-right padding-top padding-bottom
padding：30px 40px 50px 20px 上 右 下 左
padding：30px 40px 30px表示上下，40px表示右左
padding：0px；
混杂模式：在一个html文件当中，如果没有添加文档类型声明，ie浏览器默认会打开“混杂模式“，
即将浏览器级别降低，以兼容老的网页。如果添加了文档类型声明，则ie会打开“标准
模式”。
列表属性
list-style-type：none； 取消列表选项的符号
list-style-image：url(‘‘)；
浮动
浮动，即取消标记的独占一行的特性。浮动之后，其位置可以被其它标记使用
float : none /left / right ; 浮动 (相当于向左/向右看齐) 仅限于块元素
clear : none/left/right/both ;
取消浮动的影响 , 指的是告诉浏览器， 虽然浮动的标记让出了位置，但不能够使用
<style>
#d1{ width :100px ; height :100px ; background-color :red ; float :left ; } #d2{ width :100px ; height :100px ; background-color :green ; float :left ; } #d3{ width :100px ; height :200px ; background-color :yellow ; clear :both ; } </style>
<body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </body>
7.元素的显示方式
行内元素：span a--->设置width/height无效
块级元素：div/p/h1--h6
结论：行内元素不能设置width和height。行内元素是自适应的。
需求：
<a href=http://www.mamicode.com/”#” style=”background-color:url(images/account.png)”>我的账户
要求我的账户显示背景图片，行内元素没法显示（图片太大放不下）
1) display
display的3个值
? none : 不显示该标记
? block : 按块标记的方式显示 （占一行矩形区域）
? inline : 按行内标记的方式来显示 （嵌入在文本中）
<a href=http://www.mamicode.com/”#” style=”background-color:url(images/account.png);display:block;”>我的账户
8、定位
（1）普通定位
页面中的块级元素框从上到下一个接一个地排列
每一个块级元素都会出现在一个新行中
内联元素将在一行中从左到右排列水平布置
（2）浮动
浮动可以定位，left或者right
（3）定位属性 position
position属性：更改定位模式为相对定位、绝对定位、固定定位。
postion:static(默认)/relative/absolute/fixed
偏移属性：实现元素框位置的偏移 top/bottom/right/left:value;
堆叠顺序：z-index:value;
相对定位：
元素任保持其未定位前的形状。
原本所占的空间任保留。
元素框会相对于它原来的位置偏移某个距离。
div{ width:100px;height:50px;border:1px solid gray; }
body{
<div></div>
<div style=”position:relative;left:20px;top:10px;”></div>}
绝对定位
将元素的内容从普通流中完全移除
并使用偏移属性来固定该元素的位置。
相对于最近的已定位祖先元素（父元素）
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含快，比如body元素。
div.parent{ width:100px; height:100px; border:1px solid black; }
div.child{ width:80px; height:30px; border:1px solid black; background-color:silver;}
<div class="parent">
<div class="child" >1</div>
<div class="child" style="position:absolute;bottom:10px;left:80px;">2</div>
</div>
这时是相对于body的。
div.parent{ width:100px; height:100px; border:1px solid black; position::relative }
div.child{ width:80px; height:30px; border:1px solid black; background-color:silver;}
<div class="parent">
<div class="child" >1</div>
<div class="child" style="position:absolute;bottom:10px;left:80px; z-index:-1;">2</div>
</div>
这时是相对于parent的
z-index
检索或设置对象的层叠顺序。
较大 number值的对象会覆盖在较小 number值的对象之上。如两个绝对定位对象的此属性具有同样的 number值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number值为正数的对象会在其之上，而 number值为负数的对象在其之下。设置参数为 null可以移除此属性。
案例
html文件
<!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=utf8">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/admin_list.css"/>
</head>
<body>
<!--页头部分-->
<div id="header">
<img src="http://www.mamicode.com/images/logo.png" alt="logo"/>
<a href="http://www.mamicode.com/#">[退出]</a>
</div>
<!--导航部分-->
<div id="navi">
<ul id="menu">
<li><a href="http://www.mamicode.com/#" class="index_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="role_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="admin_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="fee_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="account_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="service_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="bill_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="report_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="information_off"></a></li>
<li><a href="http://www.mamicode.com/#" class="password_off"></a></li>
</ul>
</div>
<!--主体部分-->
<div id="main">
<form>
<!--操作部分-->
<div id="operator"></div>
<!--删除等操作的提示信息-->
<div id="operate_result" class="fail">
<img src="http://www.mamicode.com/images/close.png"/>
<span>操作成功!</span>
</div>
<!--数据部分-->
<div id="data">
<table id="datalist">
<tr class="header">
<td><input type="checkbox"/>全选</td>
<td>管理员ID</td>
<td>拥有角色</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>超级管理员、角色管理员、账务账号管理员</td>
<td>
<input type="button" value="http://www.mamicode.com/修改" class="btn_modi"/>
<input type="button" value="http://www.mamicode.com/删除" class="btn_del"/>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>超级管理员、角色管理员、账务账号管理员</td>
<td>
<input type="button" value="http://www.mamicode.com/修改" class="btn_modi"/>
<input type="button" value="http://www.mamicode.com/删除" class="btn_del"/>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>超级管理员、账务账号管理员</td>
<td>
<input type="button" value="http://www.mamicode.com/修改" class="btn_modi"/>
<input type="button" value="http://www.mamicode.com/删除" class="btn_del"/>
</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>角色管理员、账务账号管理员</td>
<td>
<input type="button" value="http://www.mamicode.com/修改" class="btn_modi"/>
<input type="button" value="http://www.mamicode.com/删除" class="btn_del"/>
</td>
</tr>
</table>
</form>
</div>
<!--分页部分-->
<div id="page"></div>
</div>
<!--页脚部分-->
<div id="footer">
<p><源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目></p>
<p>版权所有©加拿大达内IT培训集团公司 </p>
</div>
</body>
</html>
css文件
/*定义布局*/
body
{
/*设置整体与浏览器之间没有间距*/
margin:0px;
padding:0px;
}
div
{
/*border:1px solid black;*/
margin:0px auto;/*设置所有div居中*/
}
#header,#footer
{
width:960px;
}
#header
{
/*width:960px;*/
height:61px;
}
#navi
{
width:100%;
height:91px;
}
#main
{
border:5px solid #8ac1db;
width:950px;
height:410px;
}
#operator,#data,#page
{
width:910px;
}
#operator
{
/*width:910px;*/
height:30px;
}
#data
{
/*width:910px;*/
height:340px;
}
#page
{
/*width:910px;*/
height:28px;
}
#footer
{
/*width:960px;*/
height:50px;
}
/*页面背景*/
body
{
background-image:url(images/body_bg.png);
background-repeat:repeat-x;
}
#header
{
background-image:url(images/top_bg.png);
background-repeat:no-repeat;
}
#navi
{
background-image:url(images/navigation.png);
}
#main
{
background-color:#e8f3f8;
}
/*页面上的文字*/
body
{
color:white;
font-size:9pt;
font-family:times;
}
#header a
{
color:white;
text-decoration:none;
line-height:61px;
margin-right:9pt;
}
#header a:hover
{
text-decoration:underline;
font-weight:bold;
}
#header
{
text-align:right;
}
#footer p
{
color:white;
text-align:center;
margin:0px;
line-height:30px;
}
/*表格*/
#datalist
{
color:black;
width:910px;
background-color:white;
border-collapse:collapse;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}
#datalist td
{
height:32px;
line-height:32px;
border:1px solid #ccc;
}
#datalist tr.header
{
height:40px;
font-weight:bold;
background-color:#fbedce;
}
#datalist tr:hover
{
background-color:#f7f9fd;
}
#datalist tr td input.btn_modi,input.btn_del
{
border:0px;
background-color:white;
width:66px;
height:24px;
}
#datalist tr td input.btn_modi
{
background-image:url(images/modification.png);
background-repeat:no-repeat;
background-position:5px 5px;
}
#datalist tr td input.btn_del
{
background-image:url(images/delete.png);
background-repeat:no-repeat;
background-position:6px 7px;
}
/*logo图片*/
#header img
{
float:left;
}
/*导航*/
#menu
{
width:960px;
margin:3px auto;/*定义menu上下外边距为3px，居中*/
padding:5px;
list-style-type:none;
}
#menu li
{
padding:0px 14px;
float:left;
}
#menu a
{
width:68px;
height:77px;
display:block;
}
.index_off
{
background-image:url(images/index_out.png);
background-repeat:no-repeat;
}
.role_off
{
background-image:url(images/role_out.png);
background-repeat:no-repeat;
}
.admin_off
{
background-image:url(images/admin_out.png);
background-repeat:no-repeat;
}
.fee_off
{
background-image:url(images/fee_out.png);
background-repeat:no-repeat;
}
.account_off
{
background-image:url(images/account_out.png);
background-repeat:no-repeat;
}
.service_off
{
background-image:url(images/service_out.png);
background-repeat:no-repeat;
}
.bill_off
{
background-image:url(images/bill_out.png);
background-repeat:no-repeat;
}
.report_off
{
background-image:url(images/report_out.png);
background-repeat:no-repeat;
}
.information_off
{
background-image:url(images/information_out.png);
background-repeat:no-repeat;
}
.password_off
{
background-image:url(images/password_out.png);
background-repeat:no-repeat;
}
/*提示框*/
#main
{
position:relative;
}
#operate_result
{
width:400px;
height:70px;
padding-left:40px;
font-size:16px;
color:#af6606;
position:absolute;top:90px;left:30%;
border:1px solid #f57676;
background-color:#fdecec;
line-height:70px;
}
#operate_result img
{
float:right;
margin-right:10px;
margin-top:10px;
cursor:pointer;
}
div.success
{
color:#af6606;
background-image:url(images/ok.png);
background-repeat:no-repeat;
background-position:20px 50%;
}
div.fail
{
color:#foo;
background-image:url(images/warning.png);
background-repeat:no-repeat;
background-position:20px 50%;
}
CSS