第6章css

6.1.1.字体类型
字体具有两方面作用：一是传递语义功能，而是有美学效应

CSS 提供 font-family属性来控制文本的字体类型。
格式如下：
font-family:字体名称;
参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号
括起。
说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于
Windows 系统，其字体名就如Word中的“字体”列表中所列出的字体名称。

 

6.1.2.字体大小
在设计页面时，通常使用不同大小的字体来突出要表现的主题，在CSS样式中使用font-size 属性设置字体的大小，其值可以是绝对值也可以是相对值。常见的有“px”（绝》位)、“pt”（绝对单位）、“em”（相对单位）和“%”（相对单位）等。
语法：
font-size：绝对尺寸|相对尺寸;
参数：绝对字体尺寸是根据对象字体进行调节的，包括xx-mal1、x-small，small、me.dium,large,x-large 和xx-large的7种字体尺寸，这些尺寸都没有精确定义，只是相对而言的，在不同的设备下，这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em以相对父元素大小的方式来设置字体尺寸。

6.1.3.字体粗细
CSS样式中使用font-weight 属性设置字体的粗细，它包含normal、bold、bolder、
lighter、100、200、300、400、500、600、700、800和900多个属性值。

语法：
font-weight; bold number | normal | lighter| 100-900;
参数：normal 表示默认字体，bold 表示粗体，bolder 表示粗体再加粗，lighter 表示比默认字体还细，100~900共分为9个层次（100、200、…、900，数字越小字体越细、数字越大字体越粗，数字值400相当于关键字normal，700等价于bold）。
说明

 

6.1.4.字体倾斜
CSS中的 font-style 属性用来设置字体的倾斜

语法：font-style:normal | italic | oblique;

参数：normal为“正常”（默认值），italic为“斜体”，oblique为“倾斜体 ”

 

 

6.2 使用CSS设置文本样式

网页的排版离不开对文本的设置，本节主要讲述常用的文本样式，包括文本对齐方式行高、文本修饰

6.2.1.文本水平对齐方式
使用text-align属性可以设置元素中文本的水平对齐方式。语法：
text-align:left | right I center I justify;
参数：leftr 为左对齐，right 为右对齐，center为居中，justify为两端对齐。
说明

 

6.2.2.行高
段落中两行文本之间垂直的距离称为行高。在HTML中是无法控制行高的，在CSS样
式中，使用line-height 属性控制行与行之间的垂直间距。

语法：
line-height; length | normal;
参数；length为由百分比数字或由数值、单位标识符组成的长度值，允许为负值。其百
分比取值是

6.2.3.文本的修饰.
使用CSS样式可以对文本进行简单的修饰，text属性所提供的text-decoration属性，主
要实现文本加下划线、顶线、删除线及文本闪烁等效果。语法：
text-decoration: underline | blink | overline | line-through | none;
参数：underline 为下划线，blink 为闪烁，overline 为上划线，line-through 为贯穿线，
none 为无装饰。
说明：设置对象中文本的修饰。对象a、u、ins的文本修饰默认值为underline。对象strike、s、del的默认值是line-through。如果应用的对象不是文本，则此属性不起作用。

 

6.2.4.段落首行缩进
首行缩进是指段落的第一行从左向右缩进一定的距离，而首行以外的其他行保持不变，
其目的是便于阅读和区分文章整体结构。
在Web页面中，将段落的第一行进行缩进，同样是一种最常用的文本格式化效果。在CSS样式中text-indent属性可以方便地实现文本缩进。可以为所有块级元素应用text-indent，但不能应用于行级元素。如果想把一个行级元素的第一行缩进，可以用左内边距或
外边距创造这种效果。

语法：
text-indent: length;
参数：length 为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。
说明：设置对象中的文本段落的缩进。本属应用于整块的内容。

6.2.5.首字下沉

在许多文档的排版中经常出现首字下沉的效果，所谓首字下沉是指设置段落的第一行第一个字的字体变大，并且向下一定的距离，而段落的其他部分保持不变。
在CSS样式中

6.2.6.字符间距
letter-spacing 为字符间距属性，可以设置字符与字符间的距离。语法：
letter-spacing: length | normal;
参数：normal为默认值，定义字符间的标准间距。length表示由浮点数字和单位标识符组成的长度值，允许为负值。
说明：该属性定义元素中字符之间插入多少空白符。如果指定为长度值，会调整字符之
间的标准间距，允许指定负长度值，这会让字符之间变得更拥挤。

6.2.7.文本的截断
在CSS 样式中 text-overfow属性可以实现文本的截断效果，该属性包含clip和elipsis 两个属性值。前者表示简单的裁切，不显示省略标记（)；后者表示当文本溢出时显示省鹏标记（…)。语法：
text-overflow:clip | ellipsis;
参数：clip 定义简单的裁切，不显示省略标记。ellipsis定义当文本溢出时显示省略标记。
说明：设置文本的截断。要实现溢出文本显示省略号的效果，除了使用text-overlow属性以外，还必须配合white-space：nowrap（强制文本在一行内显示）和 overflow:hidden（溢出内容为隐藏）同时使用才能实现。

6.2.8.文本的颜色
在CSS样式中，对文本增加颜色修饰十分简单，只需添加color 属性即可。color 属性的 语法：color:颜色值;
这里颜色值可以使用多种书写方式：
color:red;                                             /*规定颜色值为颜色名称的颜色*/
color:#000000;                                    / *规定颜色值为十六进制值的颜色*/
color:rgb(0,0,255);                               /*规定颜色值为rgb代码的颜色*/
color:rgb(0%,0%,80%);                       /*规定颜色值为rgb百分数的颜色*/
 

6.2.9.文本的背景颜色
在HTML中，可以使用标签的bgcolor 属性设置网页的背景颜色。而在CSS里，不仅可以用background-color 属性来设置网页背景颜色，还可以设置文本的背景颜色。

语法：background-color:color | transparent
参数：color 用于指定颜色。transparent 表示透明的意思，也是浏览器的默认值。
说明：background-color不能继承，默认值是transparent。如果一个元素没有指定背景
色，那么背景就是透明的，这样其父元素的背景才能看见。

6.3 使用CSS设置图像样式

图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图像风格样式的方法，包括图像的边框、图像的缩放和背景图像等。

6.3.1.设置图像边框
图像的边框就是利用border 属性作用于图像元素而呈现的效果。在HTML中可以直接通过<img>标记的border 属性值为图像添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的粗细。当设置border 属性值为0时，则显示为没有边框。例如以下代码：
< img src="images/fields. jpg" border="0”>       <！--显示为没有边框-->
< img src="images/fields. jpg" border="1">      <！--设置边框的粗细为 1px-->< img src="images/fields. jpg”border=”2”>                  <！--设置边框的粗细为2px-->< img src="images/fields. jpg" border="3”>                 <！--设置边框的粗细为3px-->
通过浏览器的解析，图像的边框粗细从左至右依次递增。
使用这种方法存在很大的限制，即所有的边框都只能是黑色，而且风格十分单一，都是
实线，只是在边框粗细上能够进行调整。
如果希望更换边框的颜色，或者换成虚线边框，仅仅依靠HTML都是无法实现的

6.3.2.图像缩放
使用CSS样式控制图像大小，可以通过width和height两个属性来实现，需要注意的是当width和height 两个属性的取值使用百分比数值时，它是相对于父元素而言的，如果将这两个属性设置为相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。

6.3.3.设置背景图像
在网页设计中，无论是单一的纯色背景，还是加载的背景图片，都能够给整个页面带来丰富的视觉效果。CSS 除了可以设置背景颜色，还可以用background -image 来设置背景图像。语法:
background-image:url(url) |  none;
参数：ur 表示要插入背景图像的路径。nome 表示不加载图像。
说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<body

6.3.4设置背景重复
背景重复（background-repeat）属性的主要作用是设置背景图片以何种方式在网页中显
示。通过背景重复，设计人员使用很小的图片就可以填充整个页面，有效地减少图片字节的
大小。
在默认情况下，图像会自动向水平和竖直两个方向平铺。如果不希望平铺，或者只希望
沿着一个方向平铺，可以使用 background-repeat 属性来控制。语法：
background-repeat: repeat I no-repeat I repeat-x I repeat-y;
参数：repeat 表示背景图像在水平和垂直方向平铺，是默认值；repear-x 表示背景图像
在水平方向平铺；repeat-y表示背景图像在垂直方向平铺；no-repeat 表示背景图像不平铺。
说明：设置对象的背景图像是否平铺及如何平铺，必须先指定对象的背景图像

6.3.5.背景图像定位
当在网页中插入背景图像时，每一次插入的位置，都是位于网页的左上角，可以通过
background-position 属性来改变图像的插入位置。语法：buskgound-posion:length I length;
oackground--pusiion:positional I position;
参数：lengt 为百分比或者由数字和单位标识符组成的长度值，position 可取 op.
cenier、botnom、leit、right之一

6.3.5.1.使用关键字进行背景定位
关键字参数的取值及含义如下：
top：将背景图像同元素的顶部对齐。
bottom：将背景图像同元素的底部对齐。
left：将背景图像同元素的左边对齐。
right：将背景图像同元素的右边对齐。
center：将背景图像相对于元素水平居中或垂直居中

6.3.5.2.使用长度进行背景定位

长度参数可以对背景进行更精确的控制，实际上定位的是图像左上角相对于元素左上角的位置

6.3.5.3.使用百分比进行背景定位

使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置
对齐。也就是说，百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度
单位定位时，使用背景图像和元素的左上角为对齐基点。

6.4 使用CSS设置表单样式
在前面章节中讲解的表单设计大多采用表格布局，这种布局方法对表单元素的样式控制
很少，仅局限于功能上的实现。本节主要讲解如何使用 CSS 控制和美化表单。

6.4.1.使用CSS修饰常用的表单元素
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。下面通
过一个实例讲解怎样使用 CSS 修饰常用的表单元素。

6.4.1.1.修饰文本域
文本域主要用于采集用户在其中编辑的文字信息，通过 CSS 样式可以对文本城内的字
体、颜色以及背景图像加以控制。下面以示例的形式介绍如何使用 CSS 修饰文本城

6.4.1.2.修饰按钮

按钮主要用于控制网页中的表单。通过css样式可以对按钮的字体、颜色、边框以及背景图像加以控制

6.4.1.3.制作登录表单

在许多网站中都有登录表单的应用，而登录表单所包含的元素通常由用户名文本域、密码域、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>会员注册</title>
        <link type="text/css" href="css/style.css" rel="stylesheet"/>
    </head>
    <body style="background: #fff;">
        <div class="loginLogo">
            <div class="logoMid">
                <h1 class="logo" style="height: 71px;padding-top: 10px;">
                    <a href="index.html">
                        <img src="img/logo.jpg"/>
                    </a>
                </h1>
                <div class="loginBox">
                    <img src="img/chengguo.jpg" width="295" height="393" class="chengnuo"/>
                    <form action="#.html" method="get" class="reg">
                        <div class="regList">
                            <label><span class="red">*</span>用户名</label>
                            <input type="text"/><span style="color: #999;">请输入邮箱/用户名/手机号</span>
                        </div>
                        <div class="regList">
                            <label><span class="red">*</span>请设置密码</label>
                            <input type="text"/>
                        </div>
                        <div class="regList">
                            <label><span class="password">*</span>请确认密码</label>
                            <input type="text"/>
                        </div>
                        <div class="regList">
                            <label><span class="red">*</span>验证码</label>
                            <input type="text" class="yanzheng"/>
                            <img src="img/yanzheng.jpg" width="103" height="38"/>
                        </div>
                        <div class="xieyi">
                            <input type="checkbox"/>我已经阅读并同意<a href="#">商城用户注册协议</a>
                        </div>
                        <div class="reg">
                            <input type="image" src="img/reg.jpg"/>
                        </div>
                    </form>
                    <div class="clears"></div>
                </div>
            </div>
        </div>
    </body>
</html>