CSS控制页面(优先级"就近原则")
四种方式:行内样式>内嵌样式>链接样式>导入样式
<p style=" "></p>
<styletype="text/css">a{}</style>
<link rel="stylesheet"type="text/css" href="xxx.css" />
<import ...>
CSS选择器
标签选择器:定义p{} 使用<p></p>
ID选择器: #divID{} <div id="divID"></div>
类选择器: .divClass{} <divclass="divClass">
(一个标签可以有多个类选择器)
通用选择器:*{} 定义全部标签
集体申明:不同标签有“,”分开 body,div,p,a{margin:0;padding:0;}
嵌套:#div p a{} 对id为“div”内的“p标签”内的“a标签”样式进行定义
CSS命名
骆驼命名法:第一个字母小写,后面词的第一个字母大写 #goodLuck
帕斯卡命名法:所有词的第一个字母大写 #GoodLuck
匈牙利命名法:在名称前面加一个或多个小写字母作为前缀#you_goodLuck
遵循一个原则“容易理解,方便协同工作”
盒子模型
border(边框)
content(内容)
padding(内边距)
margin(外边距)
HTML标签
块状元素:作为其他元素的容器,可以容纳内联元素及其他块状元素;排斥其它元素与其同一行;width和height起作用;常见如div 和p
内联元素:只能容纳文本或者其他内联元素;可以和其他内联元素位于同一行;width及height不起作用;常见如a
浏览器兼容性
CSS中加入
body,div{padding:0;margin:0;}
代码
margin-top:20px;
margin-right:20px;
margin-bottom:30px;
margin-left:20px;
margin: 20px 0 0 20px; (顺序:上右下左)
margin: 20px 0; == margin: 20px 0 20px 0;
margin: 0 auto;
增加浮动状态
CSS中加入"float:left;"可以使多个div位于同一行
消除浮动对其它元素的影响
两个元素中间加入<div style="clear:both;">
设置行距 line-height:35px;
水平居中text_align:center;
文字大小font-size:12px;
文字字体 font-family:"微软雅黑","黑体";
鼠标移至上方
div:hover{}
h1~h6 标题标签
p 段落标签
a 超链接标签
ul + li
dl + dt +dd
</br> 换行标识符
background:url(img/bb.gif) repeat-x; 背景图片可重复(no-repeat)
为了页面的兼容性
img标签及其父标签 需要带属性display:block;
限制内部元素,使溢出的元素隐藏起来 overflow:hidden;
绝对定位
position:absolute; left:10px; top:20px;
要把一个定位属性为absolute的元素定位于其父元素内,必须满足,
1. 设定TRBL(top\right\bottom\left)
2. 父元素设定position属性
否则以浏览器原始点定位
相对定位
position:relative;left:2px;top:2px;
默认参照父元素的内容区原始点进行定位
CSS Hack
解决浏览器兼容性
!important
width:10px !important; IE7\8\9\FireFox识别该语句,不会再去执行下面的语句
width:10px; IE6无法识别!important ,不会执行上一语句
*
width:10px; IE8\9\FireFox不能识别带*的CSS
*width:10px; IE6\7可以识别
小技巧
图片整合
按钮需要两张图片
#divID{background:url(img\xx.jpg)no-repeat;}
#divID:hover{background:url(img\x1.jpg)no-repeat;}
可以把两个图片合并成一张图片
#divID{background:url(img\xx.jpg)no-repeat;}
#divID:hover{background:url(img\xx.jpg)no-repeat 0 -41px;}图片距左0,距上-41px,即上移
首行文字缩进 两个字符
a. 前面加8个“ ”
b. text-indent:2em; (只能加在块状元素上)