xhtml+css笔记

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个“&nbsp;”

b. text-indent:2em; （只能加在块状元素上）