标签:
一、css样式部分
1、css样式的三种常用写法:
第一种 行内样式:直接在标签里,如:<p style="color:red"></p>
第二种 内嵌式:在关部标签head里面,加入<style> p{ color:red;} </style>
第三种 链接式:在外部新建css文件写入样式,在html文件中引入:
<link rel="stylesheet" type="text/css" href="相对路径.css">
第四种 导入样式:它的缺点是页面加载完成后才导入(不常用)
<style> @import url("相对路径")
注:以上四种样式的优先级为:行内样式>内嵌式>链接式
二、CSS选择器:
1、标签选择器:p{color:red;}
2、类别选择器:.c1{color:green;}
3、ID选择器:#d1{color:yellow;}
三种选择器的优先级:ID选择器>class类别选择器>标签选择器。
三种选择器的区别:标签选择器整个页面都将使用该种样式,CLASS选择器多个标记可共同使用该样式,ID选择器在一个页面中不可重复样式是独有的。
css的注释:/*这里写上注释说明*/
四、css的继承性:
css具有继承性,但只有字体相关的属性,才会被里面的标签继承。
#d1 p 表示id为d1的标签下面的p标签
#d1,p 表示id等于d1的标签和p标签
五、css文字效果:
font-family:字体
font-size:文字大小
color:文字颜色
font-weight:文字粗细,加bold属性为粗体字。
text-decoration:underline下划线
text-decoration:line-through删除线
test-decoration:overline顶划线
text-transform:capitalize单词首字母大写
text-transform:uppercase全部大写
text-transform:lowercase全部小写
letter-spacing:20px字符间距(默认为normal)
text-align:对齐方式有left,right,center,justify两端对齐
line-align:200px;高度(高度设为和DIV的高度一样可以使行文字居中)
line-height:300px;行间距(和文字所在DIV高度一样可以使文字垂直居中)
六、表格css样式:
1)border:dashed虚线,dotted点虚线,solid实线。
border: solid 1px red;
等同于下面3句话:
边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted)
边框粗细:border-width:1px;
边框颜色:border-color:red;
2)边框重叠:border-collapse:collapse;(表格的细线合并)
3)行列表头:th scope=”row” (行的表头) th srope=”col” (列的表头)
七、body背景样式:
背景颜色:background-color:#00FF00;
背景图片:background-image:url("路径");
(注意:当图片的大小,小于它所在的div时,图片会横向、纵向填满div)
背景重复:background-repeat:no-repeat;(不重复默认显示在左上角:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)
背景方位:background-position:5px 10px;(四个参数依次为:左、上、右、下的顺序;当写两个参数时表示:左边、上边)
背景固定:Background-attachment:fixed;
综合:
background:blue url(xx.jpg) no-repeat fixed 5px 10px;
八、超链接:
1)去掉超链接下划线:text-decoration:none;
2)效果:
a:link 正常浏览状态的样式
a:visited 被点击过的超链接样式
a:hover 鼠标经过时的样式
3)鼠标经过时让div显示手形:cursor:pointer;
标签:
原文地址:http://www.cnblogs.com/jtfdh/p/4640511.html