来看看：CSS款式表教程-If you love css …

只看该作者 · 发表于 2015-1-16 06:39:52

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
注：本教程转自jorux.com，版权回作者和译者一切。
我想把本篇作为CSS基本教程的序曲，从明天入手下手翻译和收拾我从计划网页以来所学到的css基本常识。本教程会分红N个部分，独自宣布，其间大概会拔出几篇与教程有关的文章。没有详细的教程宣布进度,保举存眷本教程的伴侣定阅本站Feed。教程内容的30%-50%为Jorux原创，其他翻译部分均为意译,大概来历于多个外洋站点，并在教程停止时发布参考原文地点。
曾翻译过一篇css教程:十步学会用css建站，文章宣称能在十步学会建站，虽然说夸大点，但的确能学到一些器材，就像古代社会盛行速成一样，它只是一个css快餐，要到达自在使用css，没个百八十步生怕有点悬。
必要甚么软件进修css?
一个文本编纂器和Firefox
1.文本编纂器：这里所指的是诸如windows自带的记事本和Editplus等改善版记事本软件。不保举Dreamweaver,Frontpage等具有图形化可视操纵，不间接编纂css源代码的软件。这类软件的确能在进修css的早期匡助你敏捷告竣你的希望，可是不久你就会发明这些被Dreamweaver所主动天生的css代码冗杂烦琐，css文件体积增年夜。一旦分开这些软件你的思想就会像一张白纸，基础的css语法都想不起来。自己曾走过弯路，看初学css的伴侣自创。
自己利用Editplus编写网页代码，其属于增强版的记事本，具有多步打消，语法加亮，全体交换等功效，安装后无需设置，保举把屏幕字体改成14号Verdana，便利浏览编写。
2.Firefox：自己尽非Firefox的Fan，它也不是盏省油的灯(占用内存多)。但作为一个收费软件，再配上得当的插件，是网页计划者的必备工具，怎样利用和选择插件表现计划者专业本质的程度。保举安装以下插件：
必装插件:
IETab：调试网页在IE内核扫瞄器体现的优异插件，不论你喜不喜好，存候装！
激烈保举安装的插件：
WebDeveloper：其功效之壮大，以致于我还没用全它的功效，可是其间接检察网页css代码功效，页面信息的显现，和考证css和Html的功效十分有用。
ColorZilla：便利提取网页中任何元素的色彩。
HtmlValidator：安装这个插件后会在扫瞄器右下角天生一个图标，绿色对号暗示以后网页的Html经由过程考证，白色叉号暗示Html有毛病，黄色叹号暗示Html存在没法经由过程考证的告诫语句。双击图标就会高亮显现该网页存在的不克不及经由过程考证的语句数量、地位和修正倡议。作为计划者，最好养成随时察看这个图标的习气，你就会发明网上宣称能经由过程考证的网页，几近都是毛病或是告诫。本网站除极一般网页外均经由过程考证。
FireBug：安装这个插件后也会在扫瞄器右下角天生一个图标，绿色对号暗示以后网页的Javascript经由过程考证，并能对毛病的Javascript代码debug。我们临时其实不必要这个功效。必要用到的功效是其Inspector，你必要经由过程定制工具栏，把Inspector的"眼镜"图标拖进工具栏。点击Inspector图标后，将鼠标移到网页恣意地位，你就可以在靠下的窗口看到网页Html文件的响应源代码，在网页调试时十分有效。
装这么多插件是否是有点累，我光写都有点吃不用，以是歇息一下，鄙人一篇文章进进css教程的注释部分。
注:因为这段工夫被一些噜苏的事搅得不得安定,直到明天才公布《Ifyoulovecss…》的第一篇注释,再次向存眷本站的伴侣和访客暗示歉意,如在浏览过程当中发明毛病,请留言,Jorux会实时改正.
版权声明:因为在编纂和收拾本教程中发明本人原创的器材更能引发我的写作乐趣,在此声明本教程不再是译文,而是次要以Jorux.com为素材的原创文章,所利用图片也均为Jorux原创,若有意转载,请留言(准确填写您的Email地点)大概间接电邮Joe7419@gmail.com.
本教程次要先容css的基本常识,将逐一解说css的各个属性,历程大概对照单调,但会全力多举例申明.
css语法:例:用WebDeveloper的css检察功效检察Jorux.com首页的css文件,能够看到以下代码:
body{
font:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(images/bodybg.jpg)repeat-y;
}
是否是有点庞大,如今我们没有需要细究以上代码,先简化以上代码为:
body{text-align:left;}
这即是基础css语法布局:

登录/注册后可看大图

援用css:css文件的感化就在于把持Html文件的体现,而从Html文件中援用css文件的办法大抵有三种:外联(external),嵌进(in-line)和内联(internal),这里限于篇幅和使用频度,只先容外联办法.
例:一样翻开Jorux.com的主页,点击Firefox工具栏C>检察C>页面源代码,在<head></head>能够看到以下代码:
<linkrel="stylesheet"href="http://jorux.com/wp-content/themes/j_notebook/style.css"type="text/css"media="screen"/>

herf后的地点即为本网站css的地点,这里使用的地点为相对地点,而在当地调试时一样平常用绝对地点,将在后文申明.

复制代码

创建当地调试的文件布局:以下图所示创建名为local的文件夹,和其子文件夹style和image,分离用于寄存css文件和图片文件,在local文件夹的根目次下创立Html文件index.htm,在style文件夹的根目次下创立css文件style.css:

登录/注册后可看大图

用文本编纂器翻开index.htm,写进以下代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Myfirsthomepage</title>
<linkrel="stylesheet"href="style/style.css"media="screen"/></head>
<body>
<h1>Myfirsthomepage</h1>
</body>
</html>
然后翻开style.css,输出以下代码:
body{
background-color:#333;
}
h1{
color:#F00;
background-color:#FFF;
}
用Firefox翻开index.htm,假如你看到Example1的效果,那末祝贺你,一个基础的当地调试情况创建了.
上面入手下手逐一先容css属性:
色彩(color):css可以把持的色彩次要包含文本色彩,边框色彩等,关于背景色彩和边框色彩会在今后申明,在这次要注释文本色彩的体现.
在如上所示style.css的选择器h1中,文本色彩的属性是用color暗示的,h1的色彩的属性值为#FF0000(一个#加上十六进制值),简写为#F00.我们乃至能够用英文单词red暗示属性值:color:red;效果是一样的.色彩的其他属性值另有RGB值,在css中不太经常使用,这里就不再叙说.
例:检察Jorux.com首页的css文件,能够看到以下代码:
a{
color:#545454;
text-decoration:none;
}
a:hover{
color:#919191;
}
在选择器a中,文本色彩的属性值为#545454,即存在超等链接的文本色彩为#545454;而a:hover为伪类选择器(体现依附于扫瞄器的形态),它的属性值为#919191,即鼠标在超等链接上悬停时文本的色彩.你能够用ColorZilla考证本站首页的题目笔墨色彩.
文本(text):css把持的文本属性次要包含以下四个:text-indent,text-align,text-decoration,text-transform;
1.text-align:属性text-align指文本的对齐体例,其有向左,向右,居中对齐和主动顺应四种对齐体例:
text-align:left;
text-align:right;
text-align:center;

123456下一页

声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。

只看该作者 · 发表于 2015-1-16 07:42:54

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
text-align:justify;</p>例:检察Jorux.com首页的css文件,能够看到以下代码:
body{
font:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(images/bodybg.jpg)repeat-y;
}
在选择器body中声明属性text-align为left,能够制止在其他必要文本左对齐的选择器中反复声明.
2.text-indent:属性text-indent指段落首行的缩进,既然是段落的属性,一样平常用于选择器p(段落)中,代码以下:
p{
text-indent:26px;
}
本站的段落缩进为0,以是在css文件中能找到text-indent:0;,不声明即此属性,即默许为0.
3.text-decoration:属性text-decoration为文本润色,其包含下划线,上划线,中划线和无四种润色体例,代码以下:
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
在这就不例举详细的下划线,上划线,中划线的例子,信任人人很简单想像的到它的效果.必要夸大的是属性值none,假如你检察本站css的话,能够看到一切属性text-decoration的值均为none.这是由于今朝的扫瞄器关于选择器a(即超等链接),默许text-decoration属性值为underline.这就会使良多你不但愿呈现的下划线大批出现,并且因为没法束缚下划线的粗细,和扫瞄器之间的差别,乃至会呈现各类粗细,分歧扫瞄器显现分歧的下划线.
例:你能够看到本站文章内的超等链接的文本润色是点划线,这个效果不是属性text-decoration所能完成的,其必要下边框属性的撑持,将会在边框属性时申明.完成办法以下(请检察本站css代码):
1.在全局声明中将选择器a的text-decoration属性值设为none,代码以下:
a{
color:#545454;
text-decoration:none;
}
2.为使文章注释部分的超等链接显现蓝色点划线的效果,代码以下(读者今朝只需懂得,今朝暂不申明):
.post_bodya{
color:#0061CA;
padding:0;
border-bottom:1pxdotted#0061CA;
}
4.text-transform:这个属性大概人人不太熟习,由于这个属性是只为英文服务的,用于转换字母巨细写之用.其包含首字母年夜写,年夜写,小写和无变更四种属性值,代码以下:
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;
text-transform:none;
例:假如你再本站留过言,并且用的是英文名的话,你就会发明不管你输出的姓名是有无将首字母年夜写,显现批评者姓名时首字母均被转化为年夜写,检察本站css代码以下:
.comment_author{
text-transform:capitalize;
}
<p/>1234下一页

前次次要申明了css关于色彩和文本属性的把持,此次先容css关于字体,背景等属性的把持.
字体(Font):css把持的字体属性包含font-family,font-style,font-variant,font-weight,font-size.
1.font-family:由字体名(family-names)和字组名(genericfamilies)两个部分构成.起首来看个实例,例:检察Jorux.com首页的css文件,能够看到以下代码:
body{
font:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(images/bodybg.jpg)repeat-y;
}
蓝色加亮部分就是font的属性值,这类写法为简写,可将其复原为:
font-weight:normal;
font-size:12px;
line-height:1.5;
font-family:Georgia,sans-serif;
行高(line-height)实在其实不属于font属性,但能够在简写时回进font属性值内.如今我们先只看最初一行font-family的部分.“Georgia“即为字体名(有simhei,arial,verdana等),“sans-serif“即为字组名(包含衬线字体(Serif),非衬线字体(Sans-Serif)和等宽字体(MonoSpace)三种).
因为Windows自带的汉字字体极其无限.但一样平常中文Windows体系都撑持宋体(默许,SimSun)和黑体(SimHei)和楷体(kaiti_gb2312).我们来看看这几种汉字字体(要注重这几种字体名,楷体的英笔墨体名为kaiti_gb2312,Firefox对汉字字体撑持不良):
宋体楷体黑体默许
中国人看到东方字体名大概会对照利诱,但就好像进修英文时所碰到的英文名一样,一些经常使用的字体名的体现和拼写必需要把握,关于中文进修者,今朝只保举把握以下几种英笔墨体:
ArialVerdanaGeorgiaCourier
这几种字体的一样平常用法以下:
1.Arial:是今朝最为盛行的注释字体,几近一切的web2.0站点(如Google,Flickr,Wikipedia等)都利用arial字体作为注释乃至是题目的字体.特性是亲和力对照强,浏览起来不容易委靡;
2.Verdana:是1996年微软约请顶级字体计划师花了两年工夫出品的字体,收费供应给windows用户.和arial用法对照类似,是今朝利用最为普遍的字体,几近能在任何中央看到;
3.Georgia:这个后起之秀,因为其花梢的衬线(后申明),被良多网页计划师所喜爱,渐渐代替了TimesNewRoman在serif字组中的中心位置.本网站的题目也利用的是Georgia字体.
4.Courier:从属于Monospace字组,因为其字母的宽度均一,一样平常用于对单词长度把持对照严厉的中央,好比网页导航条和报纸(印刷品).
英文有那末多字体,但都从属于serif,sans-serif和monospace三种字组.因为英文自己的特性,分歧于方块字(汉字),英笔墨母的宽度是不相称的,这就给出书业如报纸的排版事情增添了难度,因而创造了等宽字体(monospace).
字组及字体干系图以下:

登录/注册后可看大图

如今有需要注释一下serif和sans-serif的区分.“sans”来历于古法语,意为”without”,即”非”.而”serif”来历于荷兰语,译为衬线,指字母的拐角或端点地位的润色线,如图所示:

登录/注册后可看大图

以是非等宽字组又分为有衬线(serif)和无衬线(sans-serif)两组.verdana和arial均属于无衬线组.
关于字组和字体的选择,实际上是很本性化的,读者能够依据本人的喜欢,天真搭配,但总的准绳是不要拔取一些稀有的字体,假如会见者没有这类字体的话,就会和你的计划企图相悖.
例:如font-family的属性值以下:
font-family:verdana,arial,sans-serif;
扫瞄器起首在字体库中寻觅verdana字体,假如没找到则寻觅arial字体,假如还没找到就在sans-serif字组中的选择其他字体显现.
2.font-style:包含no

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

只看该作者 · 发表于 2015-1-16 07:44:16

每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。
rmal,italic和oblique三个属性值.css代码以下:
</p>font-stye:normal;
font-stye:italic;
font-stye:oblique;
体现以下:
normalitalicoblique
能够看到italic和oblique都是向右倾斜的笔墨,但区分在于Italic是指斜体字，而Oblique是倾斜的笔墨，关于没有斜体的字体应当利用Oblique属性值来完成倾斜的笔墨效果。次要用于一些必要区分于注释的备注申明笔墨.
3.font-variant:包含normal和small-caps两种属性值.非英文用户大概很罕用到这个属性.small-caps是指小型年夜写字母,是介于年夜写字母和小写字母之间的一种字母体现情势,css代码以下:
font-variant:normal;
font-variant:small-caps;
体现以下:
NORMALsmall-caps
能够看到小型年夜写字母比一般的年夜写字母要矮一截,必要注重的是,要完成此效果,html中的中必需利用小写字母,在css顶用font-variant:small-caps;就可以主动转化为小型年夜写,不然就会显现为一般的年夜写字母.
4.font-weight:包含normal和bold两种属性值.blod属性值即指粗体.css代码以下:
font-weight:normal;
font-weight:bold;
体现以下:
normalbold
5.font-size:用于把持字体巨细的属性,属性值的单元次要有px,pt,cm,mm,%,em,个中pt,cm,mm为字体相对巨细单元,px,%,em为绝对巨细单元.这两种单元各有裨益,相对巨细单元的上风在于,不论用户的扫瞄器设置怎样,均能坚持原本的计划款式,但关于一些有浏览停滞,习气于年夜字体的用户就显得有点古板.而绝对巨细单元固然在可读性上有上风,但网页界面庞易被增年夜的字体所冲散.
在这里,限于篇幅就不再注释每一个单元的区分和用法.能够参考Lengthunits.
这里只是夸大一点,假如你的网页次要是在电脑屏幕上显现,首推px作为你的首选单元,由于px可以准确地暗示元素在屏幕中的地位和巨细.假如你的网页次要用于打印,则保举利用相对单元pt(1pt=1/72英寸)来作为首选单元,这是由于不论屏幕的分辩率是几,打印出来的巨细都是一样的.
Summary:如今总结一下font的属性,假如想让”FontProperty”体现为32px,行高为150%,粗体,斜体,字体为Georgia,字组为serif,代码以下:
font-size:32px;
line-height:1.5;
font-style:italic;
font-weight:bold;
font-family:Georgia,serif;
简写为:

font:italicbold32px/1.5Georgia,serif;
体现以下:
FontProperty
背景(background):包含background-color,background-image,background-repeat,background-attachment,background-position五种属性.
1.background-color:指背景色彩,其属性值有三种情势,十六进制,色彩称号,rgb值.今朝最为经常使用的是”#+十六进制数”.例:本站显现代码的段落背景为#EEEEEE的灰色,代码及示比方下:

background-color:#EEEEEE;
2.background-image:指背景图片,其属性值为背景图片的地点,代码和格局以下:
background-image:url(http://jorux.com/back.png);
例:本站首页的第一篇文章题目前有个”NEW”图标,检察css可见以下代码:
#homeheadlinea{
color:#444;
padding:30px68px040px;
margin:0;
background:url(images/new.png)no-repeat016px;
}
3.background-repeat:指背景图片的反复与否和反复体例,有no-repeat,repeat,repeat-x,repeat-y四种属性值.
no-repeat:即不管背景图片的巨细,只显现单个背景图片,如首页的第一篇文章题目前的”NEW”图标,代码如上所示;
repeat:指背景图片横向和纵向反复一连显现;
repeat-x:指背景图片横向反复一连显现;
repeat-y指背景图片纵向反复一连显现;例:检察本站css文件,能够看到以下代码:
body{
font:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(images/bodybg.jpg)repeat-y;
}
能够看到背景图片bodybg.jpg是纵向反复显现的,并随页面的长度的增添而增添.
4.background-attachment:指背景图片的附着体例,有scroll(默许属性)和fixed两种属性值.scroll指背景图片随页面的转动而转动,而fixed属性值则可以使背景图片流动于扫瞄器的某个地位,不随页面转动而转动.以下例所示,您能够试着转动本页面来看看两图的不同,右边为scroll,右侧为fixed(请用IE寓目以下演示):
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX5.background-position:指背景图片的地位属性.属性值能够有百分比,地位称号和详细数值三种情势,以下图所示(蓝色部分暗示间隔右边框的数据,玄色部分暗示间隔上边框的数据):

登录/注册后可看大图

能够看到,要使背景图片位于左上角有三种办法,代码以下:
background-position:0%0%;
background-position:topleft;
background-position:00;
实践上,不声明此属性,即默许背景图片为左上角显现.值得注重的是,当用属性值为地位称号时,先写间隔上边框的数据(top),后写间隔右边框的数据(left).而当用百分比或是详细数值暗示时,则反过去写.请读者细心看看上图的蓝色和玄色部分的按次.
不要小视这个属性,在导航条的制造中,这个属性将是完成一些静态变更的关头手腕(将在今后的实例篇中申明).
Summary:如今总结一下background的属性,假如想让某背景图片体现为流动,位于右上角,不反复,背景色彩为#CCC,代码以下:
background-image:url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg);
background-color:#CCC;
background-attachment:fixed;
bac

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。

只看该作者 · 发表于 2015-1-16 07:45:51

目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
kground-position:topright;
background-repeat:no-repeat;</p>简写为:

background:url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg)#CCCfixedno-repeattopright;
体现以下(请用IE寓目以下演示):

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX上一页1234下一页

本篇次要先容css对边框(border)的属性把持和链接(link)的伪类选择器.
边框(border):css把持的边框属性包含border-width,border-color,border-style.
Border之以是让人很狐疑次要源于IE5扑朔迷离的BUG,因为IE5是一个”willsoonbedead“的扫瞄器,这里只例举一个最为出名的关于border-width的BUG,让人人更好的了解border的寄义,先看下图:

登录/注册后可看大图

如上图所示,工具A(红色矩形)四周有蓝色边框B,能够看出A的实践宽度为ef,而IE5不这么以为,它把cd的长度界说为工具A的宽度,这个bug在边框的宽度小时几近发觉不到,但在边框与工具宽度相差不年夜时显得尤其分明.
如今,分离以上申明,能够看出border是自力于工具以外,位于magin与padding之间(后申明),具有流动宽度,色彩和款式的地区.
1.border-width:其可有详细数值(如1px,2px等)或是形貌性(thin,medium,thick)的属性值.因为扫瞄器及团体设置的分歧招致thin,medium,thick这些属性值的体现纷歧,不保举利用.css代码以下:
border-width:1px;
border-width:2px;
border-width:thin;
border-width:medium;
border-width:thick;
宽度效果以下(注重分歧扫瞄器下的区分):
1px2pxthinmediumthick
2.border-style:边框款式包含solid,dashed,dotted,double,groove,ridge,inset,outset等,代码以下:
border-style:solid;
border-style:dashed;
border-style:dotted;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;
款式效果以下(你大概必要Firefox或是Opera才干看到后四种效果):
solid
dashed
dotted
double
groove
ridge
inset
outset
3.border-color:边框色彩属性和一样平常色彩属性是一样的,能够参看属性篇(1).
Summary:以上例举的都是四边不异款式的情形,实在能够分离设置border-top,border-right,border-bottom,border-left四边的属性,例如说想要体现一个宽2px,蓝色(blue),款式为solid的高低边框,代码以下:
border-top-width:2px;
border-top-color:blue;
border-top-style:solid;
border-bottom-width:2px;
border-bottom-color:blue;
border-bottom-style:solid;
简写为:
border-top:blue2pxsolid;
border-bottom:blue2pxsolid;
体现以下:
宽2px,蓝色,款式为solid的高低边框
以下内容不再属于css属性,但临时回进属性篇中.
链接(link):在html里用<a></a>标明链接,在css里用a作为链接的选择器名.
css的弱点和它的长处一样分明,其最年夜的缺点就在于网页的静态体现不敷,在这一点上和Flash差异尤其凸起.
幸亏css仍是留了一手,那就是链接的伪类选择器,所谓伪类就是指依附于扫瞄器或是用户的形态.关于链接来说,存在link,hover,visited,active四种形态,即四种伪类选择器:a:link(存在链接,但无鼠标举措),a:visited(被点击或会见过),a:hover(鼠标悬停于链接上时的形态),a:active(鼠标点击与开释之间的形态).
css即是以这几个伪类选择器完成了其为数未几的静态效果.今朝最为经常使用的就是导航条和按钮的静态显现.以下用一个静态按钮的实例来讲明这四个伪类选择器.
1.起首筹办一副图片(button.png),以下图(160px*240px),其由四幅160px*60px的小图自上而下分列而成.

登录/注册后可看大图

2.接着必要往你的当地调试文件夹(调试情况的创建办法参考属性(1)中的申明)的index.htm中写进html代码,以下:
<divid=”button”><ahref=”#”></a></div>
3.在style.css中写进以下代码:
body{background-color:#FFF;}
#buttona{
width:160px;
height:60px;
display:block;
background:url(../image/button.png)no-repeat00;
}
#buttona:link{background-position:00;}
#buttona:hover{background-position:0-60px;}
#buttona:active{background-position:0-120px;}
#buttona:visited{background-position:0-180px;}
能够看到如Example2的效果.
4.代码注释:
<divid=”button”><ahref=”#”></a></div>
在index.htm写进如上代码,目标在于拔出一个id名为”button”的盒子(div),且其内含有一个链接<ahref=”#”></a>.
#buttona{
width:160px;
height:60px;
display:block;
background:url(../image/button.png)no-repeat00;
}
在css文件中写进以上代码,目标在于把持盒子

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。

只看该作者 · 发表于 2015-1-16 07:47:42

目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
中链接的体现,经由过程名为”#buttona”的选择器来完成.链接的宽高为160px*60px,背景为图片button.png.</p>在这夸大一下display:block的感化.因为在html文件中,链接<ahref=”#”></a>中没有任何的内容(content)添补,假如没有声明”display:block”,那末即便声了然选择器”#buttona”的宽高,扫瞄器也会由于html文件中没有内容而没法显现链接.以是”display:block”在这里的感化就在于强迫扫瞄器显现没有内容添补的链接.
#buttona:link{background-position:00;}
用伪类选择器a:link声明链接的背景图片在左上角显现,即间隔右边和顶边分离0,0.但因为已在选择器“#buttona”中声了然图片地位,此代码无关紧要.
#buttona:hover{background-position:0-60px;}
#buttona:active{background-position:0-120px;}
#buttona:visited{background-position:0-180px;}
用伪类选择器a:hover声明鼠标悬停时,背景图片上移60px,而使排在第二位的绿色小图片显现出来;
用伪类选择器a:active声明在鼠标点击与开释之间的形态时,背景图片上移120px,而使排在第三位的白色小图片显现;
用伪类选择器a:visited声明在链接被点击或会见过期,背景图片上移180px,而使排在第四位的灰色小图片显现;
如今你基础懂得了css静态按钮的制造历程,但以上css代码还存在一个严峻的缺点,信任你会很快发明成绩地点――这个按钮竟然是一个”一次性按钮“,也就是说这个按钮在点击第一次后,就一向显现谁人灰色小图片,你能想出办理办法吗?请在留言中指出.
谜底会鄙人一篇文章中申明!下篇将会触及css的中心内容――盒子模子,margin和padding属性.
上一页1234下一页

本文作为属性篇的最初一篇文章,将报告HTML和CSS的关头―盒子模子(Boxmodel).了解Boxmodel的关头即是margin和padding属性,而准确了解这两个属性也是进修用css结构的关头.
注:为何不翻译margin和padding?缘故原由一,在汉语中并没有与之绝对应的词语;缘故原由二:即便有如许的词语,因为在编写css代码时,必需利用margin和padding,假如我们总用汉语词语取代其来注释的话,到了实践使用时简单搅浑margin和padding的观点.
假如有一点Html基本的话,就应当懂得一些基础元素(Element),如p,h1~h6,br,div,li,ul,img等.假如将这些元素细分,又能够分离回为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.
1.Block-levelelement:指可以自力存在,一样平常的块级元素之间以换行(如一个段落停止后另起一行)分开.经常使用的块级元素包含:p,h1~h6,div,ul等;
2.Inlineelement:指依靠其他块级元素存在,紧接于被联元素之间显现,而不换行.经常使用的内联元素包含:img,span,li,br等;
3.Top-levelelement:包含html,body,frameset,体现如Block-levelelement,属于初级块级元素.
块级元素是组成一个html的次要和关头元素,而恣意一个块级元素都可以用Boxmodel来注释申明.
BoxModel:恣意一个块级元素均由content(内容),padding,background(包含背景色彩和图片),border(边框),margin五个部分构成.平面图以下(Fig.1):

登录/注册后可看大图

该平面图引自:http://www.hicksdesign.co.uk/(UndertheCreativeCommonsLicense)
立体图以下(Fig.2):

登录/注册后可看大图

依据以上两图,信任人人关于Boxmodel会有个直不雅的熟悉.
以下申明margin和padding属性:
1.Margin:包含margin-top,margin-right,margin-bottom,margin-left,把持块级元素之间的间隔,它们是通明不成见的,关于Fig.2所示的上右下左margin值均为40px,因而代码为:
margin-top:40px;
margin-right:40px;
margin-bottom:40px;
margin-left:40px;
依据上,右,下,左的顺时针划定规矩,简写为
margin:40px40px40px40px;
为便于影象,请参考下图:

登录/注册后可看大图

当高低,摆布margin值分离分歧,可简写为:
margin:40px40px;
前一个40px代表高低margin值,后一个40px代表摆布margin值.
当高低摆布margin值均分歧,可简写为:
margin:40px;
2.Padding:包含padding-top,padding-right,padding-bottom,padding-left,把持块级元素外部,content与border之间的间隔,其代码,简写请参考margin属性的写法.
至此,我们已基础懂得margin和padding属性的基础用法.可是,在实践使用中,却老是产生一些让你揣摩不透的事,而它们又或多或少的与margin有关.
注:当你想让两个元素的content在垂直偏向(vertically)分开时,既能够选择padding-top/bottom,也能够选择margin-top/bottom,再此Jorux倡议你只管利用padding-top/bottom来到达你的目标,这是由于css中存在Collapsingmargins(折叠的margins)的征象.
Collapsingmargins:margins折叠征象只存在于邻近或有附属干系的元素,垂直偏向的margin中.笔墨申明大概让人隐晦,上面用一个例子申明margin-collapsing征象.
例:在html文件的<body></body>之间写进以下代码:
<divid=”ID1″>
<h1id=”ID2″>MarginsofID1andID2collapsevertically.<br/>元素ID1与ID2的margins在垂直偏向折叠.</h1>
</div>
在与其外联的css文件中写进:
*{
padding:0;
margin:0;
}
#ID1{
background-color:#333;
color:#FFF;
margin-top:10px;
margin-bottom:10px;
}
#ID2{
font:normal14px/1.5Verdana,sans-serif;
margin-top:30px;
margin-bottom:30px;
border:1pxsolid#F00;
}
代码注释:
1.在html写进的代码暗示,在html中拔出id分离为ID1和ID2的两个块级元素div,h1;
2.*{padding:0;margin:0;}:使扫瞄器默许的元素padding和margin值均回零;
3.#ID1{…}:使id为ID1的元素div的背景色彩为#333,字体色彩为#FFF,margin-top/bottom为10px;
4.#ID2{…}:使id为ID2的元素h1的字体巨细为14px,verdana字体,行高为字体高

你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

只看该作者 · 发表于 2015-1-16 07:48:18

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
的150%,一般粗细.margin-top/bottom为30px,边框为1px宽,白色实线.</p>根据以上注释,我们应当失掉以下效果(Fig.3):

登录/注册后可看大图

即ID1的margin-top/bottom=ab=ef=10px;
ID2的margin-top/bottom=bc=de=30px;
但用扫瞄器翻开html文件,却失掉Example4的效果,以下图(Fig.4):

登录/注册后可看大图

即ab=cd=30px,ID1的margin-top/bottom=10px被折叠了,并且ID1应有的margin玄色背景也一同被折叠消散了.
为何会折叠:形成以上征象的缘故原由是,我们在css中并没有声明id为ID1的元素div的height(高),因而它的高便被设为auto(主动)了.一旦其值被设为auto,那末扫瞄器就会以为它的高为子元素ID2的border-top到border-bottom之间的间隔,即Fig.4中bc的长度,以是子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1以外,呈现了Fig.4中ab与cd之间的空缺地区.因而父元素ID1的margin-top/bottom因子元素的”不安于室”而被折叠消散了.
怎样办理折叠成绩:大概人人最后想到的举措就是依据折叠产生的缘故原由―auto,来办理成绩.可是,在实践操纵中,某些元素如div,h1,p等,我们是不成能事后晓得它的高是几的,因而在css文件中是不克不及惯例经由过程声明元素的高来办理折叠成绩.
我们必要在css文件中到场以下代码(白色部分):
#ID1{
background-color:#333;
color:#FFF;
margin-top:10px;
margin-bottom:10px;
padding-top:1px;
padding-bottom:1px;
}
或是：
#ID1{
background-color:#333;
color:#FFF;
margin-top:10px;
margin-bottom:10px;
border-top:1pxsolid#333;
border-bottom:1pxsolid#333;
}
经由过程增添以上代码,即可使扫瞄重视新盘算ID1的高,使其为子元素ID2的margin-top/bottom外缘(outertop/bottom)之间的间隔,即Fig.3中be的间隔.
看得是否是有点含混,折叠成绩难度对照年夜,它也曾是困扰我多时的困难,加上自己的叙说申明才能不敷,加倍年夜了人人进修的难度,在此Jorux深表歉意.
为查验人人进修折叠成绩的效果,给读者留下一个成绩:
html文件代码为(请将css地点改成你的css文件寄存地点):
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>Myfirsthomepage</title>
<linkrel=”stylesheet”href=”….css”type=”text/css”media=”screen”/>
</head>
<body>
<h1id=”title”>
Atitle</h1>
<divid=”content”>
Sometexthere</div>
</body>
</html>
外联css文件代码为:
*{
padding:0;
margin:0;
}
body{
font:14px/1.5Georgia,serif;
}
h1#title{
float:right;
width:50%;
font:14px/1.5Georgia,serif;
margin-top:0;
background-color:#F00;
color:#fff;
}
div#content{
background-color:#333;
color:#FFF;
margin-top:30px;
border:1pxsolid#333;
}
请将此代码存为css文件,并与以上html文件联系关系,失掉如Example5的效果,请分离用IE与Firefox扫瞄,效果不尽不异,IE下的效果是我们想要的,但用Firefox扫瞄却发明元素h1嵌进到元素div中,你能办理这个Firefox不克不及一般显现的成绩吗?假如能够,能和方才学过的折叠征象接洽起来吗?请在留言给出你的谜底!(Jorux的注释会在留言中或是下篇文章中给出)
上一页1234</p>

上一页123456

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

只看该作者 · 发表于 2015-1-18 08:56:08

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-1-27 05:28:51

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-2-5 10:03:14

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-2-11 09:04:58

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-2 10:18:29

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-3-11 04:53:14

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-3-17 22:08:18

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-25 06:09:35

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS款式表教程-If you love css …

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子