CSS定义问题

更新时间：2023-09-01 21:41:01 阅读量：教育文库文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

CSS样式表

CSS样式表，可以用于控制网页中字体、颜色、图像、表格、链接和布局格式。是Web页面设计的重要技术，它使得网页内容与样式定义彻底分开，甚至可以将CSS保存为.css的文件，使用时再进行调用导入。这样就可以通过定义和修改CSS达到页面设计的效果。

1．常用CSS定义有三种方式

1）内联样式：在标签内通过style属性添加样式信息。如<p style=‖color:red;‖>红色字</p>。

2）嵌入样式：在页面代码的<head></head>标签内放在单独的style元素中。如

color:red; } </style>

3）外部样式：将内联样式的内容存放在一个.css文件中进行调用。 2．CSS编辑器

可以使用记事本或Dreamweaver进行定义。CSS定义规则，包括: 1）针对标记选择符定义。如 <style type=‖text/css‖> h1{ color:red;} </style>

2）针对Html标签中一个id选择符定义。如id=‖ title‖ <style type=‖text/css‖>

#title {color:white; background-color:silver;} </style>

3）针对Html标签中class选择符定义。如class=‖ title‖，页面可以有多个该类。 <style type=‖text/css‖>

.title {color:white; background-color:silver;} </style>

另外，还有伪元素和伪类，标记语言中没有一种机制可以访问某个元素的首个字符或首行内容，而CSS可以创建这种虚拟元素访问或控制其样式。如：

：first-line为伪元素，某元素首行的样式；：first-letter为伪元素，某元素的首个字

符。

Div+CSS规则

1. 善用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：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); 2. 运用4种方法来引入CSS样式 1)link

其中rel 关系、type 数据类型（有多种）、href 路径。部分浏览器支持候选样式，关键字：alternate：

<style> <!–

h1{color:red;} –> </style> 3)@import

@import url{a.css}

注意：此指令必须放在<style>容器中，并且在所有样式之前，建议放在一个html注释中，即<!-->中。浏览器会不显示注释内的内容，而import等css代码能正常工作。

4)内联样式

选择器是css的一个基本概念，基本规则如下：规则结构：h1 {color:red;} -----选择器 {属性:值;}

这类是元素选择器，基本可以包括所有html的元素，属性值可以包括多个元素，如：

border：1px solid red; 常用语法包括：

分组，选择器和声明都可以分组:

h1，h2，h3{color:red;background:#fff;} --- ---选择器用―，‖分割开，属性用‖;‖分割

类选择器，即通过class=‖stylename‖应用的声明，定义:

.stylename{color:red;}

注意:在html中可以使用多类选择，如class=‖cn1 cn2 cn3″。 ID选择器，即与id属性对应的样式，定义:

#a{color:red;} --- ---这个定义对用id=‖a‖的元素这部分都是常见的css语法，下面介绍不常见的选择器语法：父子结构，跟文档结构图对应。如

p span{border:1px solid red;}--- ---对应<p>下面的<li>标签，可以用于准确定位.

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

p > span{}--- ---匹配所有p下所有的span

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

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

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

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

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

img[class~=‖b‖]，其中 ~= : 与属性中的一个值对应的，即与<img class=‖a b c‖>对应。

[class^=‖a‖]，以a开头的元素。 [class$=‖a‖]m，以a结束的元素。 [class*=‖a‖]，包含a的元素。

[class|=‖a‖]，等于a或以a开头的元素。 5）伪类和伪元素

日常使用中，主要是<a>标签的几个伪类:link:hover:active:visited，以及:first-child:first: before : left:right:lang:focus:fist-line等等。

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

以上语法组合使用，就能实现定位准确、简单间接的样式了。 3. 选择器分类整合

4. 使用子选择器减少id和class的定义示例结构：

<div class="selectit">content</div> </div> </div> 示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... } 5. 使用组选择器为不同元素应用相同的样式

如h1，h2，h3，div{font-size:16px;font-weight:bold}，即h1，h2，h3 ，div 元素的样式都为字体16像素、字体为粗体。

6. 伪类和选择符的配合使用

将伪类和类组合起来使用，可以在同一个页面中完成几组不同的链接效果。例如，定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色。

a.red:link {color: #FF0000} a.red:visited {color: #0000FF} a.blue:link {color: #00FF00} a.blue:visited {color: #FF00FF} 将定义应用在不同的链接上：

<a class="red" href="...">这是第一组链接</a> <a class="blue" href="...">这是第二组链接</a> 7．CSS的最近优先原则

如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其它行内样式 >ID > Class >标记。例如以下是引用片段：

p{color:red} .blue{color:blue} .yellow{color:yellow} HTML中：

<p>此处显示为红色</p>

<p class="blue">此处显示为蓝色</p>

<p class="blue" style="color:green">此处显示为绿色</p> <p class="blue yellow">此处显示为黄色</p>

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

（2）优先级不是按访问顺序来设定，而是在css中的声明顺序来设的。如上例中：<p class="yellow blue">此处显示为黄色</p>，也显示为黄色，因为在css定义中.yellow在.blue的后面。

8．书写正确的链接样式

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

：link --------链接的颜色：visited -----鼠标点击后的颜色

：hover -------鼠标放上去未点的颜色（悬停）：active-------鼠标点击瞬间的颜色 9．：hover的灵活运用

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

p {------此效果针对IE7和FF 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; } ----------

p a {------此效果针对IE6 color ： #00f;

text-decoration ： none; font-size ： 13px; }

p a：hover {

color ： #036;

text-decoration ： underline; }

10．定义A标签要注意的小问题

当我们定义a{color：red;}时，它代表了a的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a：hover就可以了，其它三种状态就是A中所定义的样式。

只定义了一个a：link时，一定要记得把其它三种状态定义出来！ 11. 禁止内容换行与强制内容换行

在表格或层中可能希望内容不换行或强制换行，可以通过定义一些css属性来达到要求。如：

禁止换行：white-space：nowrap

强制换行：word-break： break-all; white-space： normal; 12．区别relative和absolute

Absolute---CSS中的写法是：position：absolute; 意思是绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

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

13．区别块级元素block和内联元素inline 块级，可定义宽高，另起独占一行。（如：div ul）内联，不可定义宽高，如文本元素。（如a span） 14．区别display和visibility

display：none和visibility：hidden都可以隐藏一个元素，但visibility：hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而display：none则相当把元素从页面中去除，其占用位置也将被删除。

15．背景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 )。如：

background-position：center;--- ---图片在指定背景中央X=50% Y=50%位置 background-position： 200px 30px 16．注释的写法在Html中： <-- footer --> Content

<-- end footer --> 在CSS中：

/* ---------- header ----------------- */ 17． 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 注册：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 18． Padding影响宽度问题

如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性，而不要去定义位于外面的标签的padding。

19．完美的单象素外框线表格

table{border-collapse：collapse;} td{border：1px solid #000;}

20．如果文字过长，则将过长的部分变成省略号显示

21．并不是所有样式都要简写

当样式表前定义了如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的样式也要变。(此种方法对后期修改样式很重要)

22．几个常用到的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; }

23．使用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%。

24．浏览器的兼容性问题（针对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简洁）

<!–[if IE 6]>

<![endif]–>

4）区分IE8

.color{

background-color： #CC00FF; /*所有浏览器都会显示为紫色*/ background-color： #FF0000\9; /*IE6、IE7、IE8会显示红色*/ *background-color： #0066FF; /*IE6、IE7会变为蓝色*/ background-color： #009933; /*IE6会变为绿色*/ 25． W3C遵循的标准原则

1）在用表格布局之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan>两个标记，经验表明，这两个标记会带来许多麻烦。

2）一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内。因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。

3）排版中我们经常会遇到需要进行首行缩进的处理，不要全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent： 2em; }，然后给每一段加上 <p> 标记，注意，一般情况下请不要省略 </p> 结束标记。

4）原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议<img>标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给<img>附上 width 和 height 属性。

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

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

7）所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。 8）请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent、padding、margin、hspace、vspace 以及透明的gif 图片来实现。

9）中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。 10）行距建议用百分比来定义，常用的两个行距的值是line-height：120%/150%。

11）网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名。如，不必这样：<a href=‖aboutus index.htm‖=""> 而应该这样：“<a href=‖aboutus ‖=""></a href=‖aboutus></a href=‖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%。

26．列表元素ul 、ol、 li、 dl、 dt、 dd释义 <ul>

在dt 和dd中可以再加入 ol、ul、li和p。 27．清除浮动 clearfix:after visibility:hidden;}

在Firefox中，当子级都为浮动时，父级的高度就无法完全的包住整个子级，这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

.clearfix {

display:inline-block;

{content:"."; display:block; height:0; clear:both;

}

/* Hides from IE-mac \* /* html .clearfix { height:1%; }

.clearfix { display:block; }*/

/* End hide from IE-mac */

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

28．文字的处理 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）拼音汉字

<ruby>布鲁斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby> 29．Min-height多浏览器兼容问题 Div{

min-height:450px; height:auto!important; height:450px; overflow:visible;???? }

30．CSS布局口诀 - CSS BUG顺口溜 IE边框若显若无，须注意，定是高度设置已忘记；

浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；三像素文本慢移不必慌，高度设置帮你忙；

兼容各个浏览须注意，默认设置行高可能是杀手；

独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎；

所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律；

图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨；

IE浮动双边距，请用display：inline拘；

列表横向排版，列表代码须紧靠，空隙自消须铭记。 31．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。

本文来源：https://www.bwwdw.com/article/04bi.html

相关文章：

正在阅读：

CSS定义问题09-01

郑州市2017-2018学年七年级下第一次月考数学试卷含答案05-21

工艺美术审批专业备案表10-15

Modelling, Simulation, Testing, and Optimization of Advanced Hybrid vehicle powertrain-混合动力汽车04-30

突发公共卫生事件风险隐患排查工作总结03-12

8位RISCCPU的编写06-10

第六章固定资产（1-2节）11-08

陪读租房心得12-12

关于2012届毕业生高职升本科考试安排的通知05-08

理论4（答案）12-14

上一篇：郑州市行政事业单位国有资产处置管理暂行办法下一篇：基于数字档案馆的电子政务数据中心模式研究