??xml version="1.0" encoding="utf-8" standalone="yes"?>
q个文章只是为您介绍CSS的基应用Q指引您的一个入门的基础教程Q主要目的是?推进web标准贡献自己的微薄之力?/P>
说点我自q体会Q现在有好多人都在推qWEB标准Q其实对初学者来_不需要刚?的时候就学标准,学点单的q是Ҏ入门的,因ؓ现在HTMLq在照样用啊Q所以我希望初学 者学习时不要非遵循标准,当你入门之后Q你做网늚时候,发现使用表格牚w烦的时候你?该去L单方法了Q到时再学也不晚啊,如果你喜Ƣ新技术那么你初学时就学标准吧Q按?人的实际来行动吧。下面开始学习了
一、如何在HTML中应用CSS?/FONT>
您可以利用下?3 U方式将 CSS 指定的格式加入到HTML中:
1. ?HTML 文g里加一个超U连l,q接到外部的 CSS 文档?外部q结 CSS)
q个Ҏ最方便理整个|站的网风|它让|页的文字内容与版面设计分开。您 只要在一?CSS 文档内(扩展名ؓ .CSSQ定义好|页的风|然后在网中加一个超U连?q接到该文档Q那么你的网会按在CSS文档内定义好的风格显C出来了?
具体的用防范是Q
注意Qstyle.css文g的位|?
2. ?HTML 文g内的 <HEAD>.......</HEAD> 标签之间Q加一D?CSS 的描q内宏V?内定义CSS)
q个Ҏ适用于指定某个网,除了表现外部?CSS 文档定义好的|页风格外,同时 q要表现本n HTML 文档内指定的 CSS ?
如果内在d?CSS 描述与外部连接的 CSS 描述相冲H的话,|页的表现将以内?d?CSS 描述ZQ也是外部的描q就不再起作用了?
具体使用Ҏ是:
值得注意的是Qؓ了防止不支持 CSS 的浏览器误将标签间的 CSS 风格描述当成普?字串Q而表C|页上,您最好将 CSS 的叙q文字插入在<!--?->之间?/P>
3. ?HTML 文g的文本内容中Q随时有需要,随时加一段 CSS 的描q指定风根{? 文本间CSS)
q个Ҏ适用于指定网内的某一段文字的呈现风根{?
外部CSS与内定义CSS如果和此定义有相同的,那么以此定义?CSS 风格表现Q外?CSS文档与内定义CSS和此定义的没相同的项旉么还会正常显C,同时q会昄文本内容间的 CSS 风格?
具体使用Ҏ是:
上述?3 U?CSSQ可以同时ƈ用,也可以择您所好,单一或成双地使用。如果各 CSS 间的叙述相冲H,则内在定义的 CSS 会覆盖外部连l的 CSS Q文本间?CSS 会覆盖内在定 义的 CSS ?
二、挑选者、属性和倹{?/FONT>
先D个例子:H3{ COLOR : BLUE }表示在文本中只要使用H3标签的文字的颜色都是l?艌Ӏ其中H3为挑选者,COLOR为属性,BLUE为COLOR属性的倹{挑选者是套用样式的元Ӟ通常 为外部CSS或内定义CSS定义的风格的一个名字,在这个初U教E里理解Z个标{名字也可 以。属性是用语描述挑选者的Ҏ,相当于HTML语法中的标签的属性。值就是属性的具体内容 ?/P>
在CSS中当我们使用到属性值的时候,通常值是有一个度量依据的Q也是说值是有单 位的。比如我们通常说你从家到学校走1Q?什么呢Q米Q公里,q是?时。通常在CSS中的 单位有:相对单位与绝对单位两U单位具体如下:
“em?(比如 font-size: 2em) Q相对于字母高度的比例因子?/P>
??(比如 font-size: 80%)Q?相对于长度单位(通常是目前字型的大小Q的癑ֈ 比例?/P>
'px' (比如 font-size: 12px) Q像素(pȝ预设单位Q?/P>
'pt' (比如 font-size: 12pt)Q?像点?/P>
此外q有 'pc' (印刷zd单位), 'cm' (公分), 'mm' (公厘) ?'in' (英寸){单??/P>
当gؓ0Ӟ我们׃需要设|单位了Q比如你不想要边框那么我们直接设|border=0 ?/P>
在这我多说一句,是单位的用时Q当我自己制作的|页惛_分L率改变时Q?字体大小也随着改变那么我们׃用单?和emQ如果你x你的|页不管怎么调分辨率都是 固定大小的那么我们用px、pt{元素了。呵呵!
三、颜色的讄和用?/FONT>
CSS提供?6,777,216U颜色可以供我们来用,通常表现颜色的方式有三种Q颜色名 字、RGB(red/green/blue) 数值和十六q制数Ş式,具体表现如下Q?/P>
U色可以表示为:red、RGB(255,0,0)、rgb(100%,0%,0%)?ff0000 ?#f00 五种?式?/P>
#RRGGBBQ以三个00到FF的十六进位值分别表C??55十进位值的U、绿、蓝三原色数 倹{?/P>
#RGBQ简略表C法Q只用三?到F的十六进位值分别表C红、绿、蓝三原色数倹{?事实上,览器会自动扩展为六个十六进位的|如?ABC』将变ؓ?AABBCC』。但是,?见这L 表示法ƈ不精?/P>
rgb(R,G,B)Q以0?55十进位值的U、绿、蓝三原色数值来表示颜色?/P>
rgb(R%,G%,B%)Q以U、绿、蓝彼此相对的数值比例来表示颜色Q如rgb (60%,100%,75%)?/P>
Color_NameQ?直接以颜色名U来表示颜色Q共?41U标准的颜色名称?/P>
通常我们在设|颜色的时候通常是设|文字的颜色q有一个就是背景色。如按下图进 行设|:
四、关于文本的讄?/FONT>
我们可以使用多种属性来改变|页文本的大和形状,以ɾ|页文本内容看v来更加美 观?/P>
font-familyQ设定文字字?可以取family-name|范例QSPAN { family-name : " 楷体" }或范例:<SPAN style="family-name:楷体">?/P>
font-styleQ设定字体样式,可以取的值有normal 普通字、italic 斜体字;范例Q?SPAN { font-style : italic }?/P>
font-weightQ设定字型䆾量;可以取的值有normal 普通字 、bold _体?、bolder 相对于父元素E粗 、lighter 相对于父元素E细 ?00,200,300,400,500,600,700,800,900 数字由小到大代表W画q到粗Q例如:normal=400 bold=700 Q范例:SPAN { font- weight : bolder }?/P>
font-sizeQ设定文字大?/P>
text-decorationQ设定文字修饎ͼ可能值有 none 普通字 、underline 文字加底U?、overline 文字加顶U?、line-through 文字加删除线 、blink 讑֮文字闪烁 Q范例: SPAN { text-decoration : blink }
text-transformQ设定文字{?Q可能值有none 普通字 、capitalize 英文单?C个字母{换ؓ大写 、uppercase 所有文字{换ؓ大写 、lowercase 所有文字{换ؓ 写 Q范例:SPAN { text-transform : uppercase }?/P>
五、边~和区块的设|?/FONT>
MARGINQ边~,虽然是通透的部䆾Q但是可以藉p~宽度的调整来达到内容元素位 |调整的目的。PADDINGQ补白,也就是内容元素与框架之间的这D距MI间Q也可以利用 CSS指oL制大?/P>
把代码改为如图:
下面通过一个图来给大家说明Q?/P>
六、边框border性质讑֮?/FONT>
Ҏ也能应用到大多数的HTML标签中,可以来ɾ|页更加观Q边框的具体属性有 border-topQ综合设定上Ҏ性质 、border-rightQ综合设定右Ҏ性质 、border-bottom Q综合设定下Ҏ性质?border-leftQ综合设定左Ҏ性质?/P>
border-style l合讑֮Ҏ样式 Q可能|solid(实线), dotted(虚线), dashed( 短直U?, double(双直U?, groove (3d凹线), ridge (3d凸线), inset (3d嵌入) ?outset (3d隆v)?/P>
border-width l合讑֮Ҏ宽度,可以讄的有 border-top-width(讑֮上边框宽?), border-right-width(讑֮双框宽?, border-bottom-width(讑֮下边框宽? ?border-left-width(讑֮左边框宽?.
border-color l合讑֮Ҏ颜色?/P>
把下面代码加C的网中可以看到效果了: