百度空间CSS问题

html-css014

百度空间CSS问题,第1张

汗 这样的问题

不可能一个个为你解释了

.xxxxx 或 #xxxxx是Css样式表的样式名

样式属性如下

自己对照着看

color:文字颜色

font-size:字体大小

font-family:字体样式

text-align:字体位置 如居左 居中 居右

background-color:背景颜色

padding:内部边框

margin:外部边框

height:高度

line-height:行高

font-weight:bold:字体加粗

text-decoration:underline: 网页链接无下划线

基本都包括在这里面了

网页制作常见问题汇总

首先说明一下,这里只是部分整理,各位斑竹可以随时进来添加内容。部分贴子中的内容可能涉及到多个相关

,所以有可能一个贴子同时出现在多个分类中。

网页制作常见问答--Blueidea.com论坛精华Ver 2

DW版整理帮助文件 (感谢51windows制作提供,主题列表见http://www.blueidea.com/bbs/NewsDetail.asp?id=495483)

文件格式:WINRAR压缩

压缩内容:包括<网页制作常见问答--Blueidea.com论坛精华>以及<表格魔鬼教程--蓝色经典版>

文件大小:1.14M

提问之前

提问的智慧 - 怎么才能得到好的帮助

http://www.blueidea.com/bbs/NewsDetail.asp?id=449319

壹,表格

把表格进行到底(必看)

http://www.blueidea.com/bbs/newsdetail.asp?id=184779

表格边框应用魔鬼教程

http://www.blueidea.com/bbs/newsdetail.asp?id=186509

在网页中做出一根竖的线有几种办法?那种最好哪?

http://www.blueidea.com/bbs/newsdetail.asp?id=818

table border

http://www.blueidea.com/bbs/newsdetail.asp?id=809

DW基础----表格的使用

http://www.blueidea.com/bbs/newsdetail.asp?id=4875

请问<tbody>的用法?

http://www.blueidea.com/bbs/newsdetail.asp?id=740

表格很少用的一些属性也许有人用的上

http://www.blueidea.com/bbs/newsdetail.asp?id=24198

关于表格背景的问题

http://www.blueidea.com/bbs/newsdetail.asp?id=13241

如何固定层和表格的大小

http://www.blueidea.com/bbs/newsdetail.asp?id=205142

看看这个。谁能解释一下?(园角表格)

http://www.blueidea.com/bbs/newsdetail.asp?id=186781

layer and table's question?

http://www.blueidea.com/bbs/newsdetail.asp?id=33894

DW4的表格的亮边框和暗边框颜色的设定我怎么找不到呢?

http://www.blueidea.com/bbs/NewsDetail.asp?id=230435

表格样式大全之壹

http://www.blueidea.com/bbs/NewsDetail.asp?id=242304

==================================================

贰,层

层的定位(来点干的)

http://www.blueidea.com/bbs/newsdetail.asp?id=501

有哪位大哥能具体说一下<span>标签的用法,先谢了!

http://www.blueidea.com/bbs/newsdetail.asp?id=23813

不同分辨率层的定位另类解决方案

http://www.blueidea.com/bbs/newsdetail.asp?id=196591

如何固定层和表格的大小

http://www.blueidea.com/bbs/newsdetail.asp?id=205142

关于相对于绝对定位

http://www.blueidea.com/bbs/newsdetail.asp?id=72945

layer and table's question?

http://www.blueidea.com/bbs/newsdetail.asp?id=33894

5555555~~~~~~挥泪公开我的主页移动背景代码。

http://www.blueidea.com/bbs/newsdetail.asp?id=152921

层拖拽行为不完全解析

http://www.blueidea.com/bbs/newsdetail.asp?id=119386

关于层的高度

http://www.blueidea.com/bbs/NewsDetail.asp?id=254161

〓层的相对定位的一种解释,大家一起来完善它〓

http://www.blueidea.com/bbs/NewsDetail.asp?id=264936

当Layer遇到iframe时.

http://www.blueidea.com/bbs/NewsDetail.asp?id=293585

如何让层位于flash对象之上

<param name="wmode" value="transparent">FLASH将透明

<param name="wmode" value="Opaque">FLASH仍将保持不透明

===================================================

叁,样式表(CSS)

jet:你首页导航渐显的效果是怎么做出来的?

http://www.blueidea.com/bbs/newsdetail.asp?id=645

谁遇到过这样的问题

http://www.blueidea.com/bbs/newsdetail.asp?id=1303

图片的边框颜色

http://www.blueidea.com/bbs/newsdetail.asp?id=1746

在同一页面怎么采用不同的hover和link、visited

http://www.blueidea.com/bbs/newsdetail.asp?id=1484

如何在表单中改字体的颜色?

http://www.blueidea.com/bbs/newsdetail.asp?id=5062

一个页面几种连接效果

http://www.blueidea.com/bbs/newsdetail.asp?id=215423

关于字体的老话题!

http://www.blueidea.com/bbs/newsdetail.asp?id=23688

给我说说css中link和import的区别

http://www.blueidea.com/bbs/newsdetail.asp?id=25904

用CSS改变鼠标箭头

http://www.blueidea.com/bbs/newsdetail.asp?id=15468

25种出现方式的菜单详解。

http://www.blueidea.com/bbs/newsdetail.asp?id=192080

关于netscape对外部样式表支持的重大发现!

http://www.blueidea.com/bbs/newsdetail.asp?id=193636

CSS2中文手册 CHM 版

http://www.blueidea.com/bbs/newsdetail.asp?id=178857

CSS专题讨论

http://www.blueidea.com/bbs/newsdetail.asp?id=16310

蓝色文字链接,黄色下划线!

http://www.blueidea.com/bbs/NewsDetail.asp?id=228126

CSS与文字链接效

http://www.blueidea.com/bbs/NewsDetail.asp?id=239906

用CSS做文字阴影的问题

http://www.blueidea.com/bbs/NewsDetail.asp?id=260250

================================================

肆,窗口

用a窗口来关闭b窗口

http://www.blueidea.com/bbs/newsdetail.asp?id=131271

关闭窗口无提示的代码!!!!

http://www.blueidea.com/bbs/newsdetail.asp?id=185536

怎样可以点击链接后不询问,直接关闭窗口?

http://www.blueidea.com/bbs/newsdetail.asp?id=25199

如何将页面设置成满屏显示

http://www.blueidea.com/bbs/newsdetail.asp?id=24702

窗口的拖曳

http://www.blueidea.com/bbs/newsdetail.asp?id=215942

关于子窗口和父窗口的问题

http://www.blueidea.com/bbs/newsdetail.asp?id=142888

大虾们~谁能教我做一个有点个性的弹出窗口啊~

http://www.blueidea.com/bbs/newsdetail.asp?id=152197

窗口的title做成动态的!

http://www.blueidea.com/bbs/newsdetail.asp?id=126106

大虾们!关于Chromeless Window 效果??

http://www.blueidea.com/bbs/NewsDetail.asp?id=243206

给我一个一进入叶面 就可全屏的js 急用 谢谢

http://www.blueidea.com/bbs/NewsDetail.asp?id=57549

小窗口大学问-玩透弹出窗口

http://www.blueidea.com/bbs/NewsDetail.asp?id=257065

===================================================

伍,表单

怎么用文字联结实现按钮的SUBMIT功能?

http://www.blueidea.com/bbs/newsdetail.asp?id=527

Form的放置怎么控制?

http://www.blueidea.com/bbs/newsdetail.asp?id=2127

怎么用一个图象代替submit按钮

http://www.blueidea.com/bbs/newsdetail.asp?id=4543

如何在表单中改字体的颜色?

http://www.blueidea.com/bbs/newsdetail.asp?id=5062

常用表单格式技巧

http://www.blueidea.com/bbs/newsdetail.asp?id=5795

这样的功能是怎么样实现的!(全部选中功能)

http://www.blueidea.com/bbs/newsdetail.asp?id=212218

超级怪问题???

http://www.blueidea.com/bbs/newsdetail.asp?id=188837

关于提交表单和弹出页面的相关问题?

http://www.blueidea.com/bbs/newsdetail.asp?id=125600

一个页面中若有两个表单时,dw 就会出现黄色的警告符..

http://www.blueidea.com/bbs/newsdetail.asp?id=156951

用<SELECT>的onchange是否可以控制层的显示

http://www.blueidea.com/bbs/NewsDetail.asp?id=242314

怎样在Dreamweaver里控制按钮的宽度和高度

http://www.blueidea.com/bbs/NewsDetail.asp?id=230107

jumpmenu的_blank效果这么做?

http://www.blueidea.com/bbs/NewsDetail.asp?id=246708

我来现个宝:关于怎样改变多行文本框滚动条的颜色

http://www.blueidea.com/bbs/NewsDetail.asp?id=277709

禁止在输入框中输入中文

http://www.blueidea.com/bbs/NewsDetail.asp?id=285218

动态计算还能够输入多少字节的表单

http://www.blueidea.com/bbs/NewsDetail.asp?id=286230

限制复选框的最大可选数

http://www.blueidea.com/bbs/NewsDetail.asp?id=286237

请讲讲ACESSKEY的使用?

http://www.blueidea.com/bbs/NewsDetail.asp?id=302470

=================================================

陆,帧结构(框架)

超级简单实现框架滚动控制。

http://www.blueidea.com/bbs/newsdetail.asp?id=200184

同时刷新两个框架里面的窗口

http://www.blueidea.com/bbs/newsdetail.asp?id=130293

http://www.blueidea.com/bbs/NewsDetail.asp?id=253226

==================================================

柒,滚动条

有一种精巧的滚动条- 请问谁代码?

http://www.blueidea.com/bbs/newsdetail.asp?id=201690

请问如何在单元格里或层里出现滚动条?

http://www.blueidea.com/bbs/newsdetail.asp?id=25492

怎么改变滚动条的颜色

http://www.blueidea.com/bbs/newsdetail.asp?id=133458

超帅极酷的滚动条!!-赛扬的

http://www.blueidea.com/bbs/NewsDetail.asp?id=251048

爆帅的ie滚动条

http://www.blueidea.com/bbs/NewsDetail.asp?id=263438

如何控制不显示横向滚动条

<body style="overflow-x:hiddenoverflow-y:auto">

=====================================================

捌,排版

真正的文字竖排

http://www.blueidea.com/bbs/NewsDetail.asp?id=223192

配色方案

http://www.blueidea.com/bbs/newsdetail.asp?id=168012

有图层排版是不是没有表格好!

http://www.blueidea.com/bbs/newsdetail.asp?id=133771

利用<pre>标签对文本进行精确控制

http://www.blueidea.com/bbs/newsdetail.asp?id=14772

FW3里面切割的图片做的HTML到DW3里编辑,怎么保持原样

http://www.blueidea.com/bbs/newsdetail.asp?id=3722

怎样使文字环绕图片显示?

http://www.blueidea.com/bbs/newsdetail.asp?id=4502

做主页时到用表格好还是用层好?

http://www.blueidea.com/bbs/newsdetail.asp?id=24859

关于直线的问题[老Q篇]

http://www.blueidea.com/bbs/newsdetail.asp?id=10028

如何固定层和表格的大小

http://www.blueidea.com/bbs/newsdetail.asp?id=205142

段落首行缩进

http://www.blueidea.com/bbs/NewsDetail.asp?id=237121

LIST与CSS

http://www.blueidea.com/bbs/NewsDetail.asp?id=239525

自动缩放的字体

http://www.blueidea.com/bbs/NewsDetail.asp?id=248178

===================================================

揪,代码基础

键盘控制页面的代码是多少?如何控制?(高手请...)

http://www.blueidea.com/bbs/newsdetail.asp?id=182340

no wrap? 白痴问题,快来灌水

http://www.blueidea.com/bbs/newsdetail.asp?id=495

你了解多少HTML?

http://www.blueidea.com/bbs/newsdetail.asp?id=4613

请问<tbody>的用法?

http://www.blueidea.com/bbs/newsdetail.asp?id=740

在javascript中,this的用法,说说

http://www.blueidea.com/bbs/newsdetail.asp?id=23972

表格很少用的一些属性也许有人用的上

http://www.blueidea.com/bbs/newsdetail.asp?id=24198

有哪位大哥能具体说一下<span>标签的用法,先谢了!

http://www.blueidea.com/bbs/newsdetail.asp?id=23813

如何将页面设置成满屏显示

http://www.blueidea.com/bbs/newsdetail.asp?id=24702

DW中HEAD元素的使用

http://www.blueidea.com/bbs/newsdetail.asp?id=8135

如何实现主页的图标

http://www.blueidea.com/bbs/newsdetail.asp?id=1291

探讨一下showModelessDialog()

http://www.blueidea.com/bbs/newsdetail.asp?id=196570

25种出现方式的菜单详解。

http://www.blueidea.com/bbs/newsdetail.asp?id=192080

关于首字下沉问题如何解决?

http://www.blueidea.com/bbs/newsdetail.asp?id=173458

给大家一个小小的调试代码的网页

http://www.blueidea.com/bbs/NewsDetail.asp?id=244721

CSS3 W3C Working Draft

http://www.blueidea.com/bbs/NewsDetail.asp?id=240017

javascript、JScript、DOM中文文档下载

http://www.blueidea.com/bbs/NewsDetail.asp?id=246407

两个关于HTML和DHTML的电子文档

http://www.blueidea.com/bbs/NewsDetail.asp?id=199984

TextPopup

http://www.blueidea.com/bbs/NewsDetail.asp?id=246424

到底有几种空链接?

http://www.blueidea.com/bbs/NewsDetail.asp?id=272639

在页面里禁止选择的那句怎么写来的?

http://www.blueidea.com/bbs/NewsDetail.asp?id=275363

关于meta中的keyword属性,谁能讲解一下

http://www.blueidea.com/bbs/NewsDetail.asp?id=289308

<TITLE><ALT>里面如何换行?用转义字符\n不行呀?

http://www.blueidea.com/bbs/NewsDetail.asp?id=292152

===============================================

拾,Js特效

原创教程:图片随机显示技巧

http://www.blueidea.com/bbs/newsdetail.asp?id=140827

键盘控制页面的代码是多少?如何控制?(高手请...)

http://www.blueidea.com/bbs/newsdetail.asp?id=182340

zippy首页上的浮动菜单是如何作出来的,是mouse事件!

http://www.blueidea.com/bbs/newsdetail.asp?id=146

jet:你首页导航渐显的效果是怎么做出来的?

http://www.blueidea.com/bbs/newsdetail.asp?id=645

请问这个效果(类似QQ的好友栏)

http://www.blueidea.com/bbs/newsdetail.asp?id=16600

这样的功能是怎么样实现的!(全部选中功能)

http://www.blueidea.com/bbs/newsdetail.asp?id=212218

滚动和滤镜效果的结合!

http://www.blueidea.com/bbs/newsdetail.asp?id=202243

谁知道网页里震动的效果怎么做的?

http://www.blueidea.com/bbs/newsdetail.asp?id=15530

如何禁止ie的快捷键

http://www.blueidea.com/bbs/newsdetail.asp?id=175442

能在右键菜单中加入其他功能吗?

http://www.blueidea.com/bbs/newsdetail.asp?id=185675

Poorfish你的主页中,文字的颜色渐变是怎么做的?

http://www.blueidea.com/bbs/newsdetail.asp?id=133477

看累了,来敲几个灯泡玩

http://www.blueidea.com/bbs/newsdetail.asp?id=124629

实现页面真正 loading...效果!

http://www.blueidea.com/bbs/NewsDetail.asp?id=250202

http://www.blueidea.com/bbs/NewsDetail.asp?id=266438

=如何做到直接用鼠标拖动页面!!!=

http://www.blueidea.com/bbs/NewsDetail.asp?id=265964

createPopup方法(method)

http://www.blueidea.com/bbs/NewsDetail.asp?id=266480

那个叫什么slidermenu的,我也写了一个

http://www.blueidea.com/bbs/NewsDetail.asp?id=281534

表格单元格变色的示例,原来lnman在51js问我要的

http://www.blueidea.com/bbs/NewsDetail.asp?id=284848

录制光标轨迹效果!

http://www.blueidea.com/bbs/NewsDetail.asp?id=287500

经典原来首页上每日DW小知识一样的那个东西是怎么做的?

http://www.blueidea.com/bbs/NewsDetail.asp?id=268660

光标的帖子总结(Range的使用)

http://www.blueidea.com/bbs/NewsDetail.asp?id=603197

==========================================

拾壹,多媒体

客户要求做一些“网上视频点播”之类的东东,大家给点建议好吗?

http://www.blueidea.com/bbs/newsdetail.asp?id=2315

Dreamweaver中的flash4的控制参数设置

http://www.blueidea.com/bbs/newsdetail.asp?id=8130

DW插件应用----控制FLASH影片

http://www.blueidea.com/bbs/newsdetail.asp?id=141122

==================================================

拾贰,讨论

想和大家讨论一下个人站点的发展!!

http://www.blueidea.com/bbs/newsdetail.asp?id=1439

我觉得有必要讨论一下插件的制作了

http://www.blueidea.com/bbs/newsdetail.asp?id=3766

再谈从"FILE://"和"http://"链接下载的不同点

http://www.blueidea.com/bbs/newsdetail.asp?id=184121

做主页时到用表格好还是用层好?

http://www.blueidea.com/bbs/newsdetail.asp?id=24859

关于px与pt~

http://www.blueidea.com/bbs/newsdetail.asp?id=35926

layer and table's question?

http://www.blueidea.com/bbs/newsdetail.asp?id=33894

一个实验网页(关于定位)

http://www.blueidea.com/bbs/NewsDetail.asp?id=236397

一个实验网页之二

http://www.blueidea.com/bbs/NewsDetail.asp?id=239239

!关于DHTML~~~

http://www.blueidea.com/bbs/NewsDetail.asp?id=292109

===============================================

拾叁,教程

Behavior&HTC入门教程(一)

http://www.blueidea.com/bbs/newsdetail.asp?id=205461

微软栏目导航的制作!

http://www.blueidea.com/bbs/newsdetail.asp?id=206269

DW的网站管理--Check In/Out功能

http://www.blueidea.com/bbs/newsdetail.asp?id=8133

用dw做在线试衣的教程

http://www.blueidea.com/bbs/newsdetail.asp?id=176164

教程:谈DW制作电子像册

http://www.blueidea.com/bbs/newsdetail.asp?id=185158

================================================

拾肆,其他

如何加入收藏?

<INPUT name=Button onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夹>

如何设为首页?

<INPUT name=Button onClick="this.style.behavior='url(#default#homepage)'this.setHomePage('http://www.blueidea.com')" value=将本站设为首页>

如何在地址栏加入图标?(图标必须是.ico格式,并且要加入收藏后才有效)

在HEAD里加入 <link rel="shortcut icon" href="favicon.ico">

在dreamweaver中如何输入空格?

http://www.blueidea.com/bbs/NewsDetail.asp?id=243670

配色方案

http://www.blueidea.com/bbs/newsdetail.asp?id=168012

怎样在IE中的编辑里添加DW?

http://www.blueidea.com/bbs/newsdetail.asp?id=154909

网页设计的流程

http://www.blueidea.com/bbs/newsdetail.asp?id=91925

以往精化一

http://www.blueidea.com/bbs/newsdetail.asp?id=7485

请问滕老四,怎样缩小.png格式图片的体积?

http://www.blueidea.com/bbs/newsdetail.asp?id=728

请问大家如何做才能让点击链接后不出现那个虚线框阿?

http://www.blueidea.com/bbs/newsdetail.asp?id=1380

用Dreamweaver3进行数据的导入与排序

http://www.blueidea.com/bbs/newsdetail.asp?id=1755

WAP点滴

http://www.blueidea.com/bbs/newsdetail.asp?id=2620

FW3里面切割的图片做的HTML到DW3里编辑,怎么保持原样

http://www.blueidea.com/bbs/newsdetail.asp?id=3722

DW高级替换 求助!

http://www.blueidea.com/bbs/newsdetail.asp?id=6859

在DW中大家对这个问题是怎么解决的

http://www.blueidea.com/bbs/newsdetail.asp?id=7048

怎样清除没有用到的图片?

http://www.blueidea.com/bbs/newsdetail.asp?id=193156

DHTML库,受不了的好东西

http://www.blueidea.com/bbs/newsdetail.asp?id=23824

mac和pc之间的::兼容性问题::

http://www.blueidea.com/bbs/newsdetail.asp?id=23531

为什么我作的一个图片,在我的显示器显示跟页面背景一致,在别人。。。

http://www.blueidea.com/bbs/newsdetail.asp?id=24848

Dreamweaver2.01使用的几个小问题

http://www.blueidea.com/bbs/newsdetail.asp?id=8132

网页制作小资料

http://www.blueidea.com/bbs/newsdetail.asp?id=8136

shtml是什么文件?

http://www.blueidea.com/bbs/newsdetail.asp?id=8261

关于直线的问题[老Q篇]

http://www.blueidea.com/bbs/newsdetail.asp?id=10028

关于Insert==>Server-Side Include

http://www.blueidea.com/bbs/newsdetail.asp?id=6525

利用时间线可不可以作有弧度的路径?

http://www.blueidea.com/bbs/newsdetail.asp?id=13815

斑竹,能不能为大家多贴点关于“库“部件的文章:)

http://www.blueidea.com/bbs/newsdetail.asp?id=10514

修改Dreamweaver中Behaviors默认的Even

http://www.blueidea.com/bbs/newsdetail.asp?id=13789

Dreamweaver中替换原代码的技巧

http://www.blueidea.com/bbs/newsdetail.asp?id=13788

可折叠可拖动的树形导航栏(ie5+)

http://www.blueidea.com/bbs/newsdetail.asp?id=190779

介绍一种支持flash按钮输入中文的字体!

http://www.blueidea.com/bbs/newsdetail.asp?id=188763

可编辑窗口

http://www.blueidea.com/bbs/newsdetail.asp?id=183306

在页面上实现"另存为"的方法

http://www.blueidea.com/bbs/newsdetail.asp?id=176386

加入收藏夹时保存网页上的相关数据。

http://www.blueidea.com/bbs/newsdetail.asp?id=176020

看看这个。谁能解释一下?(园角表格)

http://www.blueidea.com/bbs/newsdetail.asp?id=186781

关于网页加密的一些方法

http://www.blueidea.com/bbs/newsdetail.asp?id=13844

Dreamweaver技巧精粹(转)

http://www.blueidea.com/bbs/newsdetail.asp?id=174676

如何去掉被修改了的浏览器标题?

http://www.blueidea.com/bbs/NewsDetail.asp?id=219921

谁能给我一个全国IP地址大全?

http://www.blueidea.com/bbs/newsdetail.asp?id=207744

关于团队工作的效率问题

http://www.blueidea.com/bbs/newsdetail.asp?id=156906

不同浏览器所支持的“事件”

http://www.blueidea.com/bbs/newsdetail.asp?id=50145

怎么样插入页中页?

http://www.blueidea.com/bbs/newsdetail.asp?id=44239

在html文件引入其它html文件的几种方法

http://www.blueidea.com/bbs/newsdetail.asp?id=123044

关于WIN里装了大量字体DW里的字体变化

http://www.blueidea.com/bbs/NewsDetail.asp?id=225489

解析IE地址栏中的about :blank

http://www.blueidea.com/bbs/NewsDetail.asp?id=84015

我刚下载了一个插件,可我不知道怎么装到DW中

http://www.blueidea.com/bbs/NewsDetail.asp?id=234597

网页设计制作规范

http://www.blueidea.com/bbs/NewsDetail.asp?id=253107

检测系统颜色与使用字体

http://www.blueidea.com/bbs/NewsDetail.asp?id=268545

IE6已支持自定义cursor!!!!!

http://www.blueidea.com/bbs/NewsDetail.asp?id=276063

我到什么地方能下载到更多的插件!

http://www.blueidea.com/bbs/NewsDetail.asp?id=294593

IE6图片工具条的问题

http://www.blueidea.com/bbs/newsdetail.asp?id=645736

==================================================

数据库编程

《跟我学做记事本》

http://www.blueidea.com/bbs/newsdetail.asp?id=140896

ASP 编程中 15 个非常有用的例子

http://www.blueidea.com/bbs/newsdetail.asp?id=109514

简单的用beans封装数据库操作(JSP)

http://www.blueidea.com/bbs/NewsDetail.asp?id=436248

用纯jsp操作服务器上的文本文件

http://www.blueidea.com/bbs/newsdetail.asp?id=420981

==================================================

资料范例

Javascript脚本收藏包下载(51windows提供)

http://www.blueidea.com/bbs/NewsDetail.asp?id=534567

==================================================

论坛Dreamweaver精华区:

http://www.blueidea.com/bbs/archivelist.asp?archiveid=1

蓝色理想FAQ-Dreamweaver部分:

http://www.blueidea.com/faq/showfaq.asp?fldAuto=7

第2章里面我们了解了document的结构和CSS选择器是如何查找定位对应的元素的。每一个合理的document都会生成一个结构树,基于此,选择器基于元素的祖先,属性,兄弟节点和更多的因素来定位元素。而且这一dom结构树也是CSS种实现继承的基础。

继承是(Inheritance)CSS属性如何从一个元素传递到它的所有子元素的过程。浏览器在决定给一个元素配置什么样式的时候,除了要考虑继承关系,同时也要考虑元素的特异性(Specificity,这个翻译需要斟酌下,但是意思很明显,存在于多个冲突样式中的优先级机制)。而考虑的这一过程就称为级联(cascade)。接下来我们就来探讨一下这三种机制-特异性,继承和级联。后两者的区别其实可以简单归纳为:h1{color:redcolor: blue}的结果就是级联,而在h1中创建一个span就是继承。

综上,别管这几个有多抽象,继续学习,会看到回报的。

从第二章我们看到选组元素的方式太多了,所有很有可能同一个元素被很多规则选中,来看看下面的例子:

上面的3对样式中每对都是作用在同一个元素上,那么到底浏览器该在元素上应用哪一个样式呢?结果就在每个选择规则的特异性中。浏览器逐条评估每条选择器规则的特异性,然后将样式声明应用到元素上。当同一个元素中包含多个存在冲突的属性声明时,有最高特异性的属性就会胜出,把其他冲突规则替换掉。

一个选择器的特异性有选择器的组成决定,而一个特异性的值可以分成4部分,就像这样:0,0,0,0。而真实的特异性是由下面这些决定的:

还是举例来说明吧,分别来看看不同的选择规则对应的特异性值:

既然刚学了如果计算特异性值,赶紧用在之前的例子上吧:

虽然我们一般在写CSS的时候会把多个属性都写在一起,例如:

然而实际上浏览器为了更好的计算特异性值实际会把聚合的属性进行单独的拆分:

咱们再来考虑一个稍微复杂的例子:

基于这个结构最终显示的效果是这样的:

从这个例子中,我们可以很好的看到浏览器按照之前说的特异性的规则展示对应不同值得样式结果。可以看到,浏览器要对每个元素进行拆分,然后计算特异性值后再确定对这个元素渲染那些样式,想想整个流程就很繁杂,幸好浏览器都自动帮我们做好了,而且这是我们后面讲到的级联的很重要的一环。同样,详细了解浏览器的渲染流程也对我们优美的书写CSS样式有很大助益。

通用选对特异性值是没有贡献的,但它是有值的,虽然值是0,0,0,0,但这和没有特异性值是有区别的,后面会在继承章节中详细讨论。所以下面的结果是显而易见的:

除了div的后代p显示为黑色外,其他都显示为灰色。而通用选择器是不贡献特异性值得,因此下面两个表达式的值也是一样的:

之前有提过直接的ID选择器和通过属性选择器设置ID值,他们最终计算的特异性值是不同的。我们先回到之前的一个例子:

因为直接用ID选择器贡献的特异性值为0,1,0,0,而属性贡献的值为0,0,1,0, 所以下面的结果也是显而易见的:

到现在肯定很多读者会想,之前计算的特异性值的4位里面第一位是什么时候设置的?答案就是为内联样式设计的,比其他的所有声明优先级都高。来看看下面的例子:

结果很明显h1就是绿的,因为内联样式的值更高,或者说优先级更高。

有时候特异性值更高的样式还并不是你想要的,这时候可使用!important来表示那些特别重要的样式,不过格式有严格的规定,就是必须在分号前面加,例如:

!important表达式必须正确,不然的话会报错。那如果存在对同一个样式有多个important声明会怎样呢?那么这些样式都不会被应用,所以需要保证important的唯一性。

其实浏览器是这么处理important样式和非important样式的:将它们单独分成两拨,important的一拨优先级更高,并且在这个组内处理自身的冲突啥的;同样的逻辑对应于非important组,组内采用特异性值来解决冲突。来看个例子:

继承,顾名思义就是属性在祖先-后代节点间的传递机制。比如说一个在h1标签中设定的颜色,那么h1中的所有后代文本都会继承。

上例中em就是继承了h1中的gray颜色。来看个ul标签的例子:

可以看到ul的所有li元素也都继承了这一特性。继承看似简单不过也需要注意几点:

有没有很意外em中的元素为啥还是灰的,照理说应该都是黑色才对,就是因为继承来的黑色属性没有特异性值,而被全局的样式给替换了。

有时候没有特异性值也会带来麻烦,比如看:

如果id=toolbar的元素下面有链接,那么就很有可能因为没有定义而采用浏览器的默认样式,一般来说是这样:

解决方案归根结底还是要有特异性值,可以有多种方法都是可以的:

再来考虑下个问题,如果两个具有完全相同特异性值的元素作用在同一个节点上,那该怎么办?比如说像这样:

还记得css为啥叫css么?Cascading Style Sheet,级联样式表,通过定义相关的规则来结合继承和特异性值。来看看都有哪些吧。

为了更好理解,我们对后四个规则进行详细说明:

虽然p本身有内联的样式,但因为标记了!important,所以还是显示为灰色。另外即使给内联样式加上了important也没啥用:

在上面权重相同的情况下对比源头,作者的优先级高于读者的。但如果在important情况下,读者的优先级要高于作者的,总结一下顺序就是:

如果上面的类型相同,则会进入到这一步,判断特异性值。

如果特异性值也一致,最后判断下出现的顺序,后出来的覆盖先前的。

结果就是blue颜色。而这一顺序对import进来的样式也是一样的。

而就是因为这个原因才会有链接推荐样式的顺序方案,一般称为LVFHA,就像下面这样:

这个顺序还可以有另一种玩法,实现的效果是只有未访问的链接才会有hover样式,而且所有链接都会有active样式,就像下面这样:

不过最好的办法就是使用串联的伪类来彻底消除这种情况,为不同的状态设定不同的样式:

不过如果引入了active类的话还是会触发冲突:

如果我们把最后两个active状态移到hover前面,那么它们就会被忽略,当然也是有办法解决的,就是引入更多的伪类:

可能对CSS来说最基本的就是本章所讲的级联机制本身,如何解决冲突,如何实现继承,如何实现排序,都有一套底层的规则在作用。