CSS样式表:
一、作用:美化网页,页面布局。
二、分类:
内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差。
内嵌,嵌在网页的head里面,可重用性高 外部,样式写在另一个文件里面,如果要用直接附加过来。
优先级:内联>内嵌>外部
三、选择器:
* 代表所有的元素 一般的网页都需要在写这个样式,去掉有些标签自带的边界,auto代表居中,如:*{ margin: 0px auto; padding:0px; }
标签选择器:用标签的名字来选择元素。 如:div{}
ID选择器:用标签的ID名来选择元素,ID的名字前面加# 如:#d1{}
CLASS选择器:用class名来选择元素,class名前面加. 如:.a{}
组合选择器:
并列关系:用逗号隔开,代表并列。 如:.a1,.a2,.a3{}
后代关系:用空格隔开,空格前面的是后面的父级元素。 如:#d1 a1{}
筛选关系:用点隔开。
样式:
1.前景与背景
1)前景:指文本 font:是否倾斜 是否加粗 字体大小 选择字体;
font-family:修改字体 font-size:字体大小 font-style:字体样式,italic倾斜 font-weight:字体粗细,bold加粗
color:字体颜色 text-decoration:文本修饰,none可以去下划线 text-indent:首行缩进
2)背景: background-color:背景色,background-image:背景图片, background-repeat:平铺方式, background-position:背景图片的位置, background-attachment:背景图片的固定方式
3)对齐方式 text-align:水平对齐方式 center居中, vertical-align:垂直对齐方式 middle居中 top靠上 bottom靠下 line-height:行高
注意:设置垂直对齐方式前,必须先设置好行高
2.边框和边界
边框: border: 宽度 样式 颜色; border-width:1px; border-style:solid; border-color:#F00;
注意:border-width;border-style;border-color三者必须同时设置
边界: 外边距: margin:上 右 下 左; margin-top:上边距 margin-right:右边距 margin-bottom:下边距 margin-left:左边距
内边距: padding:上 右 下 左; padding-top:内上边距 padding-right:内右边距 padding-bottom:内下边距 padding-left:内左边距
3.列表与方块 width:宽度 height:高度
list-style:位置 type 图片; list-style-type:列表标示的样式,none去掉,list-style-image:列表图片,list-style-position:列表样式的位置
4.格式布局
position位置:
absolute绝对位置,相对于浏览器边界的位置;
relative相对位置,相对于它本应该出现的位置。
fixed:固定位置,它不会随着滚动。
设置好position之后,就可以用top right bottom left这四个样式。
float:流,流式布局。
两个方式:left向左流 right向右流
流后面如果要加东西的话要截断流:clear:both——<div style="clear:both"></div>
z-index:值越大的越靠上层
5.其它
display: none 隐藏(不占空间,相当于去掉了); block显示
visibility:hidden隐藏(但是占空间,所占的位置还在); visible显示
display和visibility的区别:display隐藏相当于这个元素没有了,visibility的隐藏该元素所占的位置还在,只是内容隐藏了。
overflow:超出范围。。。 hidden 超出隐藏(不占位置); scroll 超出出现滚动条
cursor:pointer; 鼠标放上显示(小手)
hover:不是一个样式,用元素的ID或者CLASS之类后面跟冒号hover,代表鼠标放到此元素上显示哪些样式
如
6、超链接样式:
<style type="text/css"> a:link--一般链接 { color:blue; } a:visited--访问过的链接格式 { color:green; }a1:hover--设置鼠标指向链接时的形式
{
cursor:pointer;
background-color:#FFF;
text-decoration:underline;
}
7、半透明效果(滤镜):
<div class="box">透明区域</div> //样式中的代码 .box { opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50) }
下面是布局一个网页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">--内嵌,可重用性高 *--代表所有 { margin:0px auto;--外边距,auto代表自动居中 padding:0px;--内边距 font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;--字体 } #top { width:100%;--宽 height:80px;--高 } #tmenu { width:100%; height:60px; margin:20px 0px 20px 0px; } #tb { width:54.8%; height:60px; float:left;--向左流 padding:0px 0px 0px 3.2%; } #menu { width:42%; height:60px; float:left; } #tb img { width:131px; height:60px; } #menu1 { margin:0px 25px 0px 15px; width:342px; height:60px; float:right; } #menu1 div { float:left; height:40px; margin:20px 15px 0px 15px; line-height:60px; vertical-align:bottom; color:#999999; font-size:14px; } #menu1 div:hover { color:#000; cursor:pointer; } #mmenu { width:100%; height:50px; background-color:#f8f8f8; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; } #mmenu div { float:left; height:50px; margin-left:30px; color:#999999; font-size:14px; line-height:50px; vertical-align:middle; } #mmenu div:hover { color:#000; cursor:pointer; } #mmenu img { margin:14px 14px 14px 0px; } #img { width:100%; height:600px; background-image:url(National%20University%20of%20Singapore%20-%20Home_files/NUSS-ragday2015.jpg); background-repeat:no-repeat; background-position:center; background-size:100% 600px; } #imgn { width:100%; margin-top:1px; } #imgn div { width:25%; float:left; overflow:hidden; } #imgn img { margin:0px 0px 0px 1px; } </style> </head> <body> <div style="width:100%;">--内联,可重用性差 <!--TOP菜单--> <div id="top"> <div id="tmenu"> <div id="tb"> <img src="National University of Singapore - Home_files/logo.png" />--图片链接 </div> <div id="menu"> <div id="menu1"> <div>News</div> <div>Email</div> <div>Library</div> <div>Student</div> <div>Staff</div> </div> </div> </div> </div> <!--菜单--> <div id="mmenu"> <div style="margin-left:35px;">Home</div> <div>Admissions</div> <div>Education</div> <div>Research</div> <div>About</div> <div>Giving</div> <div style="float:right;margin-right:25px;"><img src="National University of Singapore - Home_files/sousuo.png"/></div> </div> <!--图片--> <div id="img"> </div> <div id="imgn"> <div style="margin-right:-1px"><img style="margin-left:0px;" src="National University of Singapore - Home_files/scrolls.jpg" /></div> <div><img src="National University of Singapore - Home_files/save_sya-1.jpg"/></div> <div><img src="National University of Singapore - Home_files/IAUS.jpg"/></div> <div><img src="National University of Singapore - Home_files/nus110-blue.jpg"/></div> </div> </div> </body> </html>