不可能一个个为你解释了
.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来说最基本的就是本章所讲的级联机制本身,如何解决冲突,如何实现继承,如何实现排序,都有一套底层的规则在作用。