Div+CSS规则文档格式.docx
《Div+CSS规则文档格式.docx》由会员分享，可在线阅读，更多相关《Div+CSS规则文档格式.docx（57页珍藏版）》请在冰豆网上搜索。
–
h1{color:
red;
}
–>
/style>
3.@import
@importurl{a.css}
注意:
此指令必须放在<
容器中,并且在所有样式之前
建议放在一个html注释中,<
––>
浏览器会不显示注释内的内容,而import等css代码能正常工作
4.内联样式
pstyle=”color:
”>
选择器是css的一个基本概念，基本规则如下：
1.规则结构：
h1{color:
选择器{属性:
值;
这类是元素选择器，基本可以包括所有html的元素
属性值可以包括多个元素，如：
border：
1pxsolidred;
常用语法
1）分组：
选择器和声明都可以分组:
h1,h2,h3{color:
background:
#fff;
},选择器用“,”分割开,属性用”;
”分割
2）类选择器,即通过class=”stylename”应用的声明
定义:
.stylename{color:
在html中可以使用多类选择:
如class=”cn1cn2cn3″
3）ID选择器,即与id属性对应的样式
#a{color:
}->
这个定义对用id=”a”的元素
2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法
1）父子结构,跟文档结构图对应
如pspan{border:
}对应的是<
p>
下面的<
li>
标签,这个很用用途,可以准确定位.
一些特殊应用（IE7支持）:
（1）p>
span{},匹配所有p下所有的span
（2）p+span{},匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签
2）属性选择器:
（注意:
属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以）
语法:
img[alt]{border:
1pxsolid;
表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};
表示这个2个属性都有的img标签,也可以与具体值对应:
如:
img[alt=”摄影”]{};
属性选择器中的高级应用,特殊匹配:
（1）img[class~=”b”],~=:
与属性中的一个值对应的,即与<
imgclass=”abc”>
对应
（2）[class^=”a”],以a开头的
（3）[class$=”a”],以a结束的
（4）[class*=”a”],包含a的
（5）[class|=”a”],等于a或以a开头的
3）伪类和伪元素
日常使用中主要是<
a>
标签的几个伪类:
link:
hover:
active:
visited
以及:
first-child:
first:
before:
left:
right:
lang:
focus:
fist-line等等
动态伪类可以应用到任何元素,如,input:
focus{background:
}当input标签获得焦点时背景变红
以上语法组合使用,就能实现定位准确、简单间接的样式了。
三、选择器分类整合
优先级别遵循：
行内样式>
ID>
Class>
标记
基本选择器
标记选择器（eg:
/p>
）
类别选择器（eg:
class）
ID选择器
复合选择器
“交集”复合选择器（eg:
p.menu{color:
red}）必须是标记+类别/ID组合
“并集”复合选择器（eg:
red}）
“后代”复合选择器（eg:
#menu.menulist{...}）
“子”复合选择器（eg:
#menu.menulist.selectit{...}）
四、使用子选择器减少id和class的定义
示例结构：
divid="
menu"
>
divclass="
menulist"
selectit"
content<
/div>
示例CSS：
#menu{...}
#menu.menulist{...}
#menu.menulist.selectit{...}
五、使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:
16px;
font-weight:
bold}
则h1,h2,h3,div元素的样式都为字体16像素，字体粗体
六、伪类和选择符的配合使用
将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后为蓝色；
另一组为绿色，访问后为黄色：
a.red:
link{color:
#FF0000}
visited{color:
#0000FF}
a.blue:
#00FF00}
#FF00FF}
现在应用在不同的链接上：
aclass="
red"
href="
..."
这是第一组链接<
/a>
blue"
这是第二组链接<
七、CSS的最近优先原则
/*如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他行内样式>
标记*/
以下是引用片段：
CSS:
p{color:
red}
.blue{color:
blue}
.yellow{color:
yellow}
HTML:
此处显示为红色<
pclass="
此处显示为蓝色<
style="
color:
green"
此处显示为绿色<
blueyellow"
此处显示为黄色<
（1）注意样式的几个优先顺序（优先级由上至下递减，下面的样式覆盖上面的样式）：
--元素style设定
--head区<
中的设定
--外部引用css文件
（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。
如上例中<
yellowblue"
也显示为黄色，因为在css定义中.yellow在.blue的后面。
八、书写正确的链接样式
当用css定义链接的各种状态时，要注意书写的顺序即：
:
link:
visited:
hover:
active利用首字母：
LVHA，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
link--------链接的颜色
visited-----鼠标点击后的颜色
hover-------鼠标放上去未点的颜色（悬停）
active-------鼠标点击瞬间的颜色
九、:
hover的灵活运用
IE6不支持除a标签以外的:
hover属性，我们了解:
hover属性是鼠标悬停效果。
在IE7和FF中，对几乎任意元素都可以设置:
hover属性效果。
这对我们做不同的访问效果很好。
如：
p{
width:
360px;
height:
80px;
padding:
20px;
margin:
50pxauto0auto;
border:
1pxsolid#ccc;
line-height:
25px;
background:
#fff;
p:
hover{
1pxsolid#000;
#ddd;
----------------此效果针对IE7和FF
pa{
color:
#00f;
text-decoration:
none;
font-size:
13px;
pa:
#036;
underline;
-----------------此效果针对IE6
十、定义A标签要注意的小问题
当我们定义a{color:
}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:
hover就可以了，其它三种状态就是A中所定义的样式。
只定义了一个a:
link时，一定要记得把其它三种状态定义出来！
十一、禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。
禁止换行：
white-space:
nowrap
强制换行：
word-break:
break-all;
white-space:
normal;
十二、区别relative和absolute
Absolute---CSS中的写法是：
position:
absolute;
他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。
如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
Relative---CSS中的写法是：
relative;
他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
十三、区别块级元素block和内联元素inline
块级---可定义宽高，另起独占一行（如：
divul）
内联---不可定义宽高，如文本元素（如aspan）
十四、区别display和visibility
display:
none和visibility:
hidden都可以隐藏一个元素,但visibility:
hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。
而display:
none则相当把元素从页面中去除，其占用位置也将被删除。
十五、背景background的一些语法
background-image:
url（背景图案.jpg,gif,bmp）;
background-color:
#FFFFFF;
（背景颜色）
background-color:
transparent;
<
--设定背景为透明色–>
background-repeat改变背景图片的重复并排的设定
说明
repeat背景图片并排
repeat-x背景图片以X方向并排
repeat-y背景图片以Y方向并排
no-repeat背景图片不以并排的方式处理
background-attachment是否固定图片位置
scroll拉动卷轴时，背景图片会跟着移动（缺省值）
fixed拉动卷轴时，背景图片不会跟着移动
以长度定位background-position:
xy
使用百分比定位background-position:
x%y%
x%往右移
y%往下移
backgroud-position:
0%0%;
左边上方
0%50%;
左边中间
50%0%;
中间上方
50%50%;
正中间
100%0%;
右边上方
0%100%;
左边下方
100%50%;
右边中间
50%100%;
中间下方
100%100%;
右边下方
以关键字定位
关键字说明
top上（y=0）
center中（x=50,y=50）
bottom下（y=100）
left左（x=0）
Exp:
background-position:
center;
图片在指定背景中央X=50%Y=50%位置
200px30px
十六、注释的写法
在Html中：
--footer-->
content
--endfooter-->
在CSS中：
/*----------header-----------------*/
style
十七、CSS的命名规范
1.id的命名
（1）页面结构
容器:
container
页头：
header
内容：
content/container
页面主体：
main
页尾：
footer
导航：
nav
侧栏：
sidebar
栏目：
column
页面外围控制整体布局宽度：
wrapper
左右中：
leftrightcenter
（2）导航
nav
主导航：
mainnav
子导航：
subnav
顶导航：
topnav
边导航：
左导航：
leftsidebar
右导航：
rightsidebar
菜单：
menu
子菜单：
submenu
标题:
title
摘要:
summary
（3）功能
标志：
logo
广告：
banner
登陆：
login
登录条：
loginbar
注册：
regsiter
搜索：
search
功能区：
shop
标题：
title
加入：
joinus
状态：
status
按钮：
btn
滚动：
scroll
标签页：
tab
文章列表：
list
提示信息：
msg
当前的:
current
小技巧：
tips
图标:
icon
注释：
note
指南：
guild
服务：
service
热点：
hot
新闻：
news
下载：
download
投票：
vote
合作伙伴：
partner
友情链接：
link
版权：
copyright
2.class的命名
（1）颜色:
使用颜色的名称或者16进制代码,如
.red{color:
red;
}
.f60{color:
#f60;
}
.ff8600{color:
#ff8600;
（2）字体大小,直接使用"
font+字体大小"
作为名称,如
.font12px{font-size:
12px;
.font9pt{font-size:
9pt;
（3）对齐样式,使用对齐目标的英文名称,如
.left{float:
left;
.bottom{float:
bottom;
（4）标题栏样式,使用"
类别+功能"
的方式命名,如
.barnews{}
.barproduct{}
注意事项:
u一律小写;
u尽量用英文;
u不加中杠和下划线;
u2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:
mainContent）；
u尽量不缩写，除非一看就明白的单词.
3.主要的站点css文件
主要的master.css
模块module.css
基本共用base.css（root.css）
布局，版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css
补丁mend.css
打印print.css
十八、Padding影响宽度问题
如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
十九、完美的单象素外框线表格
table{border-collapse:
collapse;
td{border:
1pxsolid#000;
二十、如果文字过长,则将过长的部分变成省略号显示
style=”width:
120px;
height:
50px;
overflow:
hidden;
text-overflow:
ellipsis;
nowrap”>
二十一、并不是所有样式都要简写
当样式表前定义了如p{padding:
1px2px3px4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。
我们并不一定要写成p.style1{padding:
5px6px3px4px}。
可以写成p.style1{padding-top:
5px;
padding-right:
6px;
},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！
如果以后前一个样式P变了话，你定义的p.style1的样式也要变。
（此种方法对后期修改样式很重要）
二十二、几个常用到的CSS细节处理上的样式
1）中文字两端对齐：
text-align:
justify;
text-justify:
inter-ideograph;
2）固定宽度汉字截断：
nowrap;
（不让其换行，不过只能处理文字在一行上的截断，不能处理多行。
）（IE5以上）FF不能，它只隐藏。
***万能强制换行：
normal;
break-all;
word-wrap:
break-word;
word-break:
.AutoNewline
{
/*word-break:
方法一必须*/
/*word-wrap:
break-word;
方法二*/
方法三*/
.NoNewline
keep-all;
3）固定宽度汉字（词）折行：
table-layout:
fixed;
（IE5以上）FF不能。
4）<
acronymtitle=”输入要提示的文字”style=”cursor:
help;
文字<
/acronym>
用鼠标放在前面的文字上看效果。
这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：
.halfalpha{background-color:
#000000;
filter:
Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
6）FLASH透明：
选中swf,打开原代码窗口，在<
/object>
前输入<
paramname=”wmode”value=”transparent”>
以上是针对IE的代码。
针对FIREFOX给<
embed>
标签也增加类似参数wmode=”transparent”
7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：
.picturesimg{
alpha（opacity=45）;
.picturesa:
hoverimg{
alpha（opacity=90）;
8）层在浏览器中居中对齐问题
body{
center
#content{text-align:
left;
width:
700px;
margin:
0auto}
9）单行内容在层中垂直对齐问题
#content{height:
19px;
line-height:
}缺点是要内容不要换行。
10）层在浏览器中垂直居中对齐问题
缺点是：
水平、垂直方向上不能出现滚动条，只能是在一屏的情况下
其实解决的思路是这样的：
首们需要position:
绝对定位。
而层的定位，使用外补丁margin负值的方法。
负值的大小为层自身宽度高度除以2。
一个层宽度是400，高度是300。
使用绝对定位距离上部与左部都设置成50%。
而margin-top的值为－150。
ma
升级会员 