网页的修饰 - 码农教程

总第61篇

上一篇推送了网页的基本构成，链接地址：网页是怎么构成的？，这篇来讲讲网页的修饰，正如字面意思一般，本篇分享的内容是用来修饰网页的，是让网页变得更加好看。本文只是介绍一些基本的CSS，适合入门。

01|什么是CSS：

CSS 指层叠样式表 (Cascading Style Sheets)

样式是用来定义如何显示 HTML 元素

02|CSS怎么用：

CSS怎么用，也就是CSS的语法。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开，声明组以大括号({})括起来。

为了让CSS可读性更强，你可以每行只描述一个属性:

p
{color:red;
text-align:center;
}

CSS注释以 “/*“ 开始, 以 “*/“ 结束, 比如: /这是个注释/

03|CSS属性：

1、背景属性，即用来设置背景的。

背景颜色设定

<style>
body
{
    background-color:yellow;
}
h1
{
    background-color:#00ff00;
}
p
{
    background-color:rgb(255,0,255);
}
</style>

背景图片设定

<style>
body 
{
    background-image:url('paper.gif');
    background-color:#cccccc;
}
</style>

2、尺寸属性，用来设置元素的高度和宽度。

<style>
img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>

3、字体属性，用来设置元素的字体显示方式。

字体样式（font-style）

<style>
p.normal {font-style:normal;}/*浏览器正常字体*/
p.italic {font-style:italic;}/*斜体*/
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
</body>

字体宽度（font-weight）

<style>
p.normal {font-weight:normal;}/*正常的字体*/
p.light {font-weight:lighter;}/*稍微细一点的字体*/
p.thick {font-weight:bold;}/*粗细一点的字体*/
p.thicker {font-weight:900;}/*也可以通过传送具体的数值来设置*/
</style>

字体大小（font-size）

<style>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>

4、文本属性

文本颜色设置（color），即字体颜色

<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}/*p.ex表示元素p的属性ex,在元素p中可以直接调用*/
</style>
<body>

<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>

文本的方向设置（direction）

<style>
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>一些文本。默认的书写方向。</div>
<div class="ex1">一些文本。 Right-to-left 方向。</div>

</body>

ltr 为默认属性，文本方向从左到右；rtl 文本方向从右到左。

文本对齐属性（text-align）

<style>
h1 {text-align:center}/*居中对齐*/
h2 {text-align:left}/*左对齐*/
h3 {text-align:right}/*右对齐*/
h4 {text-align:justify}/*分散对齐*/
</style>

文本字符间距（letter-spacing）

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>

字符间距值默认情况为0，即字符之间没有间隔。也可以为负值，出现重叠的效果。