新手学css注意的事项全.docx

新手学css注意的事项全.docx

《新手学css注意的事项全.docx》由会员分享，可在线阅读，更多相关《新手学css注意的事项全.docx（23页珍藏版）》请在冰豆网上搜索。

新手学css注意的事项全

一、           善用css缩写规则

    /*注意上、右、下、左的书写顺序*/

1.      关于边距（4边）：

1px2px3px4px（上、右、下、左）

1px2px3px    （省略的左等于右）

1px2px         （省略的上等于下）

1px            （四边都相同）

2.      简化所有：

*/body{margin:

0}------------表示网页内所有元素的margin为0

#menu{margin:

0}------------表示menu盒子下的所有元素的margin为0

3.      缩写（border）特定样式：

Border:

1pxsolid#ffffff;

Border-width:

01px2px3px;

4.      关于文字的缩写规则：

Font-style:

italic;  斜体形式

Font-variant:

small-caps/normal;  变体样式：

小型大写字母/正常

Font-weight:

bold;

Font-size:

12px;

Line-height:

1.2em（120%）/1.5em（150%）;

Font-family:

arrial,sans-serif,verdana;

缩写成：

Font:

italicsmall-capsbold12px/1.5emarrial,sans-serif;

注意：

Font-size和Line-height用斜杠组合在一起不能分开写。

5.      关于背景图片的：

Background:

#FFFurl（log.gif）no-repeatfixedtopleft;

6.      关于列表：

List-style-type:

square/none;

List-style-position:

inside;

List-style-image:

url（filename.gif）;

缩写成：

List-style:

noneinsideurl（filename.gif）;

二、           运用4种方法来引入CSS样式

     1.link

rel 关系

type 数据类型,有多种

href 路径

部分浏览器支持候选样式,关键字:

alternate:

2.内部样式块

3.@import

@importurl{a.css}

注意:

此指令必须放在中的设定

      --外部引用css文件

（2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设的。

      如上例中此处显示为黄色

八、           书写正确的链接样式

    当用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{

    border:

1pxsolid#000;

    background:

#ddd;

}

----------------此效果针对IE7和FF

pa{

    color:

#00f;

    text-decoration:

none;

    font-size:

13px;

}

pa:

hover{

    color:

#036;

    text-decoration:

underline;

}

  -----------------此效果针对IE6

十、           定义A标签要注意的小问题

      当我们定义a{color:

red;}时，它代表了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中的写法是：

position:

relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

十三、   区别块级元素block和内联元素inline

块级---可定义宽高，另起独占一行  （如：

div  ul）

内联---不可定义宽高，如文本元素  （如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%; 左边上方

backgroud-position:

0%50%; 左边中间

backgroud-position:

50%0%; 中间上方

backgroud-position:

50%50%; 正中间

backgroud-position:

100%0%; 右边上方

backgroud-position:

0%100%; 左边下方

backgroud-position:

100%50%; 右边中间

backgroud-position:

50%100%; 中间下方

backgroud-position:

100%100%; 右边下方

以关键字定位

关键字  说明 

top  上 （y=0） 

center  中 （x=50,y=50） 

bottom  下 （y=100） 

left  左 （x=0） 

Exp:

background-position:

center;

图片在指定背景中央X=50%Y=50%位置

background-position:

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

　　边导航：

sidebar

　　左导航：

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{}

　　注意事项:

:

∙一律小写;

∙尽量用英文;

∙不加中杠和下划线;

∙2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（eg:

mainContent）；

∙尽量不缩写，除非一看就明白的单词.

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;}

二十、   如果文字过长,则将过长的部分变成省略号显示

120px;height:

50px;overflow:

hidden;text-overflow:

ellipsis; white-space:

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）固定宽度汉字截断：

overflow:

hidden;text-overflow:

ellipsis;white-space:

nowrap;（不让其换行，不过只能处理文字在一行上的截断，不能处理多行。

）（IE5以上）FF不能，它只隐藏。

***万能强制换行：

white-space:

normal;word-break:

break-all;  

禁止换行：

white-space:

nowrap

强制换行：

word-wrap:

break-word;word-break:

normal;

.AutoNewline

{

  /*word-break:

break-all; 方法一  必须*/

  /*word-wrap:

break-word;overflow:

hidden; 方法二  */

  /*word-wrap:

break-word;word-break:

normal;  方法三 */

    word-wrap:

break-word;word-break:

break-all;

}

.NoNewline

{

/*word-break:

keep-all;  方法一  必须*/

white-space:

nowrap;

}

3）固定宽度汉字（词）折行：

table-layout:

fixed;word-break:

break-all;（IE5以上）FF不能。

4）

help;”>文字用鼠标放在前面的文字上看效果。

这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：

.halfalpha{background-color:

#0