一、In-line行内
行内样式是在html标签里直接使用style属性
ExampleSourceCode[]
设定段落文字红色。
但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避
免。
二、Internal内部
使用于整个页面的植入内部样式在head标签里面，style标签包围样式。
ExampleSourceCode[]
"/TR/xhtml1/DTD/">
p{
color:red;
}
a{
color:blue;
}
...
所有段落文字红色，链接蓝色。
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下救星。
三、外部
外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：
ExampleSourceCode[]
p{
color:red;
}
a{
color:blue;
}
如果上面保存为“”，HTML里面的链接就像下面：
ExampleSourceCode[]
"/TR/xhtml1/DTD/">
...
后面教程里会讲到其他外联样式的方法，现在已经足够了。
从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，
保存为""在html目录。
ExampleSourceCode[]
"/TR/xhtml1/DTD/">
...
保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。
当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。
CSS教程2、CSSSelectors,Properties,andValues选择器、属性、值[翻译Htmldog]
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。
每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。
值在冒号（不是等号）后面，分号分离属性。
ExampleSourceCode[]
body{
font-size:0.8em;
color:navy;
}
上面的意思是为body选择器设置font-size字体大小和color字体颜色。
所以基本的，当它作用与HTML页面时，在body标签（整个窗口中的内容）之间的文字颜
色是navy字体大小是0.8ems。
长度和百分比
CSS里面有许多属性值要指定单位，但有些基本单位被使用在一些属性上，在这之前值得属
性下它们。
em比如font-size:2em给于字体计算出的大小，所以2em就是实际字体大小的两倍。
px比如font-size:12px是pixel像素的单位。
pt比如font-size:12px是points镑的单位。
%比如font-size:80%是百分比
其他单位包括pc（12点西文活字）、cm（厘米）、mm（毫米）和in（英寸）
当值是零的时候，不需要单位，例如：border:0意思没有边框。
网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方
式，包括字体大小和屏幕大小。
因为这样，建议使用"em"和"%"在font-size上（宽度和高度），相比下px不能够在大部分
浏览器改变大小，所以要少用，可以用在边框的大小上。
css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。
ExampleSourceCode[]
red红色
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00
有17个预先确定的颜色，它们是：
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,
olive,orange,purple,red,silver,teal,white,andyellow.
transparent也是一个正确的值。
rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。
我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。
十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是
ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，
第三个蓝色。但六位数给于更多的颜色控制。
color和background-color
颜色可以使用color和background-color，是美国英语中"color"不是"colour"。
蓝色背景，黄色文字：
ExampleSourceCode[]
h1{
color:yellow;
background-color:blue;
}
这些颜色可能比较粗糙，你可以使用另外的色度：
ExampleSourceCode[]
body{
font-size:0.8em;
color:navy;
}
h1{
color:#ffc;
background-color:#009;
}
你可以看到h1已经变成黄色和蓝色。
color和background-color可以使用在绝大部分html元素，包括body。
有一系列属性可以改变网页文字的大小和形状，概要如下：
font-family
文字使用的字体，比如宋体，TimesNewRoman，Arial等等
这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和
timesnewroman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，
如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑
拥有不同的字体。例子font-size:arial,helvetica，pc用户可以使用arial而苹果mac用户可以使
用helvetica。
注意：如果字体的名称有许多单词组成，使用双引号组合，比如，
font-family:"TimesNewRomes"。
font-size
字体的大小，要小心使用。比如标题不会和段落一样，它要用大字体，你可以使用h1h2等
等。
font-weight
这个属性决定字体是否加粗。在实际运用中通常使用font-weight:bold或
font-weight:normal。理论上还可以使用
bolder,lighter,100,200,300,400,500,600,700,800or900，但有些浏览器不认，仍坚持bold
和normal。
font-style
这个属性决定字体是否是斜体，可能是font-style:italic或font-style:normal。
text-decoration
这个属性决定是文本否需要下划线。可以是：
ExampleSourceCode[]
text-decoration:overline，加上划线
text-decoration:line-through，加通过文本的线条。
text-decoration:underline，这应该使用在链接上，因为用户习惯认为它代表链接。
text-transform改变文本的情况。
ExampleSourceCode[]
text-transform:capitalize，让每个字的第一个字母大写。
text-transform:upperca，所有大写。
text-transform:lowerca，所有小写。
text-transform:none;，这个属性不起作用。
ExampleSourceCode[]
body{
font-family:arial,helvetica,sans-rif;
font-size:0.8em;
}
h1{
font-size:2em;
}
h2{
font-size:1.5em;
}
a{
text-decoration:none;
}
strong{
font-style:italic;
text-transform:upperca;
}
Textspacing
letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或
normal。
line-height属性设定元素的行高，比如一个段落，没有调准字体的大小。它可以是数字（字
体大小的倍数），长度，百分比或normal。
text-align设定元素位置，left,right,center或justify。
text-indent属性缩进段落的首行。这在打印时经常设置，但网页里通常用不上。
ExampleSourceCode[]
p{
letter-spacing:0.5em;
word-spacing:2em;
line-height:1.5;
text-align:center;
}
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。
例子h2：
ExampleSourceCode[]
h2{
font-size:1.5em;
background-color:#ccc;
margin:1em;
padding:3em;
}
元素四边可以设置的属性：
margin-top,
margin-right,
margin-bottom,
margin-left,
padding-top,
padding-right,
padding-bottom
padding-left
width和height定义的是Content部分的宽度和高度，paddingbordermargin的宽度依次加在
外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效
果会有些不同。左右Margin加倍的问题当box为float时，IE6中box左右的margin会加倍
W3C定义的盒模式如下：
width和height定义的是Content部分的宽度和高度，paddingbordermargin的宽度依次
加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时，IE6中box左右的margin会加倍。比如：
ExampleSourceCode[]
/xhtml1/DTD/">
左面的inner的左面margin明显大于5px。
这时候，定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层
最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。
比如：
ExampleSourceCode[]
/xhtml1/DTD/">
上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上
一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，
通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额
外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，
这样就不会增加额外的高度了。如下：
ExampleSourceCode[]
/xhtml1/DTD/">
因此，外层css要定义overflow属性，内层最后要加上clear属性。
居中问题
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象
这样：
你可以这样定义使它横向居中：
ExampleSourceCode[]
#wrap{
width:760px;/*修改为你的层的宽度*/
margin:0auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用
text-align属性。就象这样：
ExampleSourceCode[]
#outer{
text-align:center;
}
#wrap{
width:760px;/*修改为你的层的宽度*/
margin:0auto;
text-align:left;
}
第一个#outer的text-align:center;规则定义IE5/Win中#outer的所有元素居中(其他浏览
器只是将文字居中)，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用
margin:xautoxauto定义，并重新定义text-align。
CSSBorders边框
边框可以运用到body里的大部分HTML元素。
制作一个元素的边框，你需要border-style边框样式。值可以
是：solid,dotted,dashed,double,groove,ridge,intandoutt，具体样式大家可以实际下。
border-width设定宽度，通常使用pixels即单位是px，同样有四边属性：
border-top-width,border-right-width,border-bottom-widthandborder-left-width。
border-color设定边框颜色。
例子
ExampleSourceCode[]
h2{
border-style:dashed;
border-width:3px;
border-left-width:10px;
border-right-width:10px;
border-color:red;
}
设定红色样式为dashed的边框，上下边框宽度为3px，而左右为10px（后面的属性覆盖了
前面）。
本文发布于:2022-11-22 16:56:38，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/90/394.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
