Div+CSS基础用法整理_html/css_WEB-ITnose

程序员文章站 2022-05-04 17:24:08

...

一、善用css缩写规则

/*注意上、右、下、左的书写顺序*/ 1. 关于边距（4边）： 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px （省略的左等于右） 1px 2px (省略的上等于下) 1px （四边都相同）

2. 简化所有： */ body{margin:0}------------表示网页内所有元素的margin为0 #menu{ margin:0}------------表示menu盒子下的所有元素的margin为0

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

Border:1px solid #ffffff; Border-width:0 1px 2px 3px;

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:italic small-caps bold 12px/1.5em arrial,sans-serif; 注意：Font-size和Line-height用斜杠组合在一起不能分开写。

5. 关于背景图片的： Background:#FFF url(log.gif) no-repeat fixed top left;

6. 关于列表： List-style-type:square/none; List-style-position:inside; List-style-image:url(filename.gif); 缩写成： List-style:none inside url(filename.gif);

二、运用4种方法来引入CSS样式 1.link rel 关系 type 数据类型,有多种 href 路径部分浏览器支持候选样式,关键字:alternate: 2.内部样式块

2)类选择器,即通过class=”stylename”应用的声明

定义:

.stylename{color:red;}

注意:

在html中可以使用多类选择:如class=”cn1 cn2 cn3″

3)ID选择器,即与id属性对应的样式

定义:

#a{color:red;} ->这个定义对用id=”a”的元素

2.这部分都是我们常见的css语法，下面谈一下我们不常见的选择器语法

1)父子结构,跟文档结构图对应

如p span{border:1px solid red;}对应的是

下面的

标签,这个很用用途,可以准确定位.

一些特殊应用(IE7支持):

(1) p > span{},匹配所有p下所有的span

(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签

2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)

语法:img[alt]{border:1px solid;}

表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,也可以与具体值对应:如:img[alt=”摄影”]{};

属性选择器中的高级应用,特殊匹配:

(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与 Div+CSS基础用法整理_html/css_WEB-ITnose 对应

(2)[class^=”a”],以a开头的

(3)[class$=”a”],以a结束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等于a或以a开头的

3)伪类和伪元素

日常使用中主要是标签的几个伪类:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红

以上语法组合使用,就能实现定位准确、简单间接的样式了。

三选择器分类整合

优先级别遵循：行内样式 >ID > Class >标记

基本选择器标记选择器（eg:

）类别选择器(eg:class) ID选择器复合选择器 “交集”复合选择器(eg:p.menu{color:red}) 必须是标记+类别/ID组合 “并集”复合选择器(eg:h1,h2,h3{color:red}) “后代”复合选择器(eg: #menu .menulist{ ... }) “子” 复合选择器(eg: #menu .menulist .selectit { ... })

四、使用子选择器减少id和class的定义

示例结构：

示例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}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

现在应用在不同的链接上：

这是第一组链接

这是第二组链接

七、CSS的最近优先原则

/*如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他行内样式 >ID > Class >标记 */

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

此处显示为红色

此处显示为蓝色

此处显示为绿色

此处显示为黄色

注意：

（1）注意样式的几个优先顺序(优先级由上至下递减，下面的样式覆盖上面的样式)： --元素style设定 --head区中的设定 --外部引用css文件

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

此处显示为黄色

也显示为黄色，因为在css定义中.yellow在.blue的后面。

八、书写正确的链接样式

当用css定义链接的各种状态时，要注意书写的顺序即：:link :visited :hover :active利用首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

:link --------链接的颜色

:visited -----鼠标点击后的颜色

:hover -------鼠标放上去未点的颜色（悬停）

:active-------鼠标点击瞬间的颜色

九、 :hover的灵活运用

IE6不支持除a标签以外的:hover属性，我们了解:hover属性是鼠标悬停效果。在IE7和FF中，对几乎任意元素都可以设置:hover属性效果。这对我们做不同的访问效果很好。

如：

p {

width : 360px;

height : 80px;

padding : 20px;

margin : 50px auto 0 auto;

border : 1px solid #ccc;

line-height : 25px;

background : #fff;

}

p:hover {

border : 1px solid #000;

background : #ddd;

}

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

p a {

color : #00f;

text-decoration : none;

font-size : 13px;

}

p a: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）

内联---不可定义宽高，如文本元素（如a span）十四、区别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: x y

使用百分比定位 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: 200px 30px

十六、注释的写法

在Html中：

content 在CSS中：

/* ---------- header ----------------- */ style 十七、 CSS的命名规范

1. id的命名

(1)页面结构

　　容器: container

　　页头：header

　　内容：content/container

　　页面主体：main

　　页尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

　　导航：nav

　　主导航：mainnav

　　子导航：subnav

　　顶导航：topnav

　　边导航：sidebar

　　左导航：leftsidebar

　　右导航：rightsidebar

　　菜单：menu

　　子菜单：submenu

　　标题: title

　　摘要: summary

　　(3)功能

　　标志：logo

　　广告：banner

　　登陆：login

　　登录条：loginbar

　　搜索：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 不加中杠和下划线;

u 2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写（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:1px solid #000;}

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

二十一、并不是所有样式都要简写

当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}

。可以写成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）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少

。 5）图片设为半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西； 6）FLASH透明：选中swf,打开原代码窗口，在前输入以上是针对IE的代码。

针对FIREFOX 给标签也增加类似参数wmode=”transparent” 7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8）层在浏览器中居中对齐问题

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9)单行内容在层中垂直对齐问题

# content{height:19px; line-height:19px; }缺点是要内容不要换行。 10）层在浏览器中垂直居中对齐问题

缺点是：水平、垂直方向上不能出现滚动条，只能是在一屏的情况下

其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以2。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的

样式编写。

请看实例代码：

div {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

11）CSS控制图片自适应大小

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px":"auto");

overflow:hidden;

}

二十三、使用float属性的元素要注意的问题

1. 利用border属性确定出错元素的布局特性　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 2. float元素的父元素不能指定clear属性

　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 3. float元素务必指定width属性

　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

　　另外指定元素时尽量使用em而不是px做单位。 4. float元素不能指定margin和padding等属性

　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以

使用hack方法为IE指定特别的值。 5. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。二十四、浏览器的兼容性问题（针对FF/IE6/IE7）

1.CSS hack:区分IE6，IE7，firefox

区别FF，IE7，IE6：

background:green !important; background:orange; *background:blue;

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

另外再补充一个，下划线”_“,

IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分firefox，IE7，IE6

background:green!important; *background:orange; _background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

2.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按

照最后一个来执行，所以不可以只写margin:XXpx!important;

3.条件性注释来选择不同的浏览器（比CSS hack简洁）

4.区分IE8

.color{

background-color: #CC00FF; /*所有浏览器都会显示为紫色*/

background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/

*background-color: #0066FF; /*IE6、IE7会变为蓝色*/

_background-color: #009933; /*IE6会变为绿色*/

二十五、 W3C遵循的标准原则

1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免两个标记，经验表明，这两个标记会带

来许多麻烦。

　　2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大

表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用

标记，以便能够使

这个大表格分块显示。

　　3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上

标记，注意，一般情况下，请不要省略

结束标记。

　　4. 原则上，我们禁止用 Div+CSS基础用法整理_html/css_WEB-ITnose 来人为干预图片显示的尺寸，而且建议标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往

需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会

造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页

抖动的情况会发生时，请大家务必在最后给 Div+CSS基础用法整理_html/css_WEB-ITnose 附上 width 和 height 属性。

　　5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。

　　6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

　　7. 所有的字号都应该用样式表来实现，禁止在页面中出现标记。

　　8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace,

vspace 以及透明的gif 图片来实现。

　　9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。

　　10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

　　11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：而应该这样：

”aboutus/”>

　　12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。

　　13.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适

。

　 14. float元素务必指定width属性　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。　　另外指定元素时尽量使用em而不是px做单位。

　　15. float元素不能指定margin和padding等属性　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可

以使用hack方法为IE指定特别的值。

　　16. float元素的宽度之和要小于100% 　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

二十六、列表元素ul ol li dl dt dd释义

内容1

内容2

标题
: 内容描述1; 内容描述2

l dt 和dd中可以再加入 ol ul li和p

二十七、清除浮动

clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。 .clearfix { display:inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height:1%; } .clearfix { display:block; }

/* End hide from IE-mac */

**这种用法在进行图文混排时比较多，但是不太好控制，用margin配合clear{clear:both}直接来控制。

二十八、文字的处理 1. 一般的字体： font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋体",sans-serif; 标题字体（h1/h2）：font-family: Cambria, Georgia, "Times New Roman", Times, serif; 2. 首字下沉： P:first-letter{padding:10px,fontsize:32pt;float:left} 3. 拼音汉字：布鲁斯狼bu lu si lang

二十九、 Min-height多浏览器兼容问题 Div{ min-height:450px; height:auto!important; height:450px; overflow:visible;???? }

三十、CSS布局口诀 - CSS BUG顺口溜 · IE边框若显若无，须注意，定是高度设置已忘记； · 浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中； · 三像素文本慢移不必慌，高度设置帮你忙； · 兼容各个浏览须注意，默认设置行高可能是杀手； ·独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览； · 学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。 · 所有标签皆有源，只是默认各不同，span是无极，无极生两仪?内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规

律。 · 图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。 · IE浮动双边距，请用display：inline拘。 · 列表横向排版，列表代码须紧靠，空隙自消须铭记。

三十一、Web中的字体应用总结几套实用而简单的font-family font-family: Tahoma, Helvetica, Arial, sans-serif; Tahoma 系的中性字体。推荐使用在13px以上的环境。 font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif; Verdana 系的宽扁字体。推荐在11px以下环境使用。 font-family: Geogia, Times New Roman, Times, serif; 衬线字体的不二之选。多用于大号的标题字体16px以上。 font-family: Lucida Console, Monaco, Courier New, mono, monospace; 一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console太宽的话，可以换成比较窄的Lucida Sans Typewriter。