使用CSS技术【美化网页（三）】

Alika-snowr

已于 2024-02-18 09:26:44 修改

阅读量240

点赞数 3

分类专栏： Web应用开发文章标签： css 前端 css3 html html5

于 2024-02-16 20:14:13 首次发布

本文链接：https://blog.csdn.net/2301_81982769/article/details/136131733

版权

Web应用开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

4.设置文本样式

文本的样式包括字体的属性和文本的属性。字体的属性用于控制网页字符显示的方式，而文本属性用于控制段落格式和文本的修饰。

4.1字体属性

1. font-family属性

font-family属性用于确定要使用的字体样式。比如说黑体、宋体等就是了。不过，在显示字体时，一些特殊的字体不能在浏览器中正确的显示。这个时候就可以通过font-family属性预设多种字体类型。每个字体类型之间要使用逗号隔开。如果前面的字体类型不能正确的显示，则系统将自动选择后一种字体类型。

2.font-size属性

font-size属性用于控制文字的大小。默认值是medium。它的取值有4种类型——绝对大小、相对大小、长度值以及百分数。

绝对大小：可以是像xx-small、x-small、small、large、x-large等这样式的。

相对大小：是指像smaller和larger分别表示比上一级元素中字体小一号或大一号。

长度值和百分数：凭数字直接定大小。

3.font-style属性

font-style属性是用在控制字体的倾斜。其中包括normal、italic、oblique三种属性,默认值为normal表示普通字型，italic和oblique表示斜体字形。

~~看看italic和oblique的区别~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .d1{
      font-style: normal;
      color: plum;
    }
    .d2{
      font-style: oblique;
      color: pink;
    }
    .d3{
      font-style: italic;
      color: lightpink;
    }
  </style>
</head>
<body>
<div class="d1">I'm normal</div>
<div class="d2">I'm oblique</div>
<div class="d3">I'm italic</div>
</body>
</html>

两种斜体用肉眼看来似乎没有什么区别❀ 。

第一种oblique是真正上的斜体，就是把一个字母向右边倾斜一定角度产生的效果。
第二种italic为意大利体。我们平常说的斜体都是指“意大利体”。这就是各种文字处理软件中字体倾斜的按钮上面大多使用字母I来表示的原因。

4.font-weight属性

font-weight属性的取值可以是normal、bold、bolder、lighter,该属性默认值为normal表示正常粗细。当然也可以使用数值。

5.font复合属性

上述属性其实可以通过font属性一次性设置。其排列顺序为：font-weight、font-style、font-size、font-family。

4.2文本属性

文本属性	说明
word-spacing	用于设定单词之间的间隔。它的取值可以是normal或具体长度也可以是负值。
letter-spacing	与它属性与word-spacing类似。
text-align	该属性指定了所选元素的对齐方式取值是：left、right、center、justify。
text-indent	可以对特定选项的文本进行取值可以是长度值或百分比属性默认值为零，表示无缩进。
line-height	决定了相邻行的间距或者说是行高。
text-decoration	可以对特定选项的文本进行修饰，取值为： none、underline、overline、line-through以及blink(闪烁效果)。
text-transform	用于向文本添加一个或多个阴影。
text-shadow	用于转换文本。
word-wrap	允许超过容器的长单词换行到下一行，取值为：

1.word-spacing和letter-spacing对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="word-spacing: normal">如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
<p style="word-spacing: 10px">如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
<p style="word-spacing: -10px">如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
<p style="letter-spacing: -10px"> 如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
<p style="letter-spacing: 10px"> 如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
<p style="letter-spacing: normal"> 如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
    <p style="letter-spacing: 0">如果想征服生命中的焦虑，活在当下,活在每一个呼吸里。</p>
</body>
</html>

仔细观察它们甚至有着中英文的区别。

2.text-align的新增属性

text-align属性指定了所选元素的对齐方式，其属性的默认值由浏览器类型而定。CSS3中添加了start、 end，两个属性值分别表示向行的开始边缘对齐、向行的结束边缘对齐。

3.text-transform

取值有：capitalize、uppercase、lowercase、none。默认值none。 capitalize表示所选元素中文本的每个单词的首字母以大写显示。 uppercase表示选中文本的所有字母都以大写显示。 lowercase表示选中文本的所有字母都以小写显示。

4. text shadow

取值为color、length、opacity

text-shadow:X-Offset Y-Offset shadow color;

其中X- Offset表示阴影的水平偏移距离其值为正值时阴影向右偏移，负值时阴影向左偏移，Y- Offset表示阴影的垂直偏移距离其值为正值时阴影向下偏移，负值时阴影向上偏移。 shadow指阴影的模糊值，不能为负数，用来指模糊效果的作用距离值越大阴影越模糊反之阴影越清晰如果不需要阴影模糊可以将shadow值设为0。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 30px;
            font-family: "楷体";
            text-shadow: 5px 5px 0 pink;
        }
    </style>
</head>
<body>
<div>人</div>
</body>
</html>

运行效果

*5.word-wrap

取值为：normal、break-word，默认值为normal表示子在允许的段字点break-word表示长单词或者URL地址内部进行换行。

5.设置颜色背景

1.backgroung-color属性

该属性用于设置背景颜色，默认值就是没有颜色。

2.background-image属性

该属性用于设置背景图像。默认值为none，表示没有背景图像。如果要指定背景图像，需要将图像的位置及名字写在URL中。

3.background-attachment属性

该属性控制背景图像是否随内容一起滚动。取值为：scroll或fixed。该属性默认值为scroll，表示背景图像随内容一起滚动；fixed则表示图像静止，而内容可以滚动。

4.background-position属性

该属性指定了背景图像相对关联区域左上角的位置。取值可以使用关键字left/center/right和top/ center/bottom，也可以指定百分数值。

5.background-repeat属性

该属性用来表示背景图像是否重复显示取值可以是repeat/repeat-x/repeat-y /none。默认值为repeat。

6.background属性

与之前所提到的font属性类似它是一个组合属性可以同时设置background-color 、background -image、background-attachment、background-position、background-repeat等背景。排列顺序是任意的。

6.设置图片效果

6.1.圆角边框

圆角是网页设计中经常用到的技巧用于美化网页。使用border-radius属性来设置。如果给它赋予四个值的话，这四个值的顺序分别是：左上、右上、右下、左下。

如果只设置一个值，则表示四个角都相同
如果左下省略则效果与右上相同。
如果右下省略则效果与左上相同。
如果右上省略则效果与左下相同。

6.2.图像边框

图像边框使用border-image属性，该属性让处于随时变化状态下的边框使用一个图像文件来绘制，边框的长宽会随着承载内容自动调整。使用bored-image属性可以让浏览器在显示图像时自动将使用的图片边框分割成九个部分进行处理，不需要用户考虑边框与内容适应问题。

该属性的第一个参数需要指明边框图像的地址，接着四个参数是浏览器将边框图像分割时的上、右、下、左四个边距，最后一个参数是边框宽度。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            padding: 15px;
            border-image: url("QQ图片20240216182927.jpg") 5 10 15 20/25PX;
        }
    </style>
</head>
<body>
<div>图像边框使用border-image属性，该属性让处
    于随时变化状态下的边框使用一个图像文件
    来绘制，边框的长宽会随着承载内容自动调整。使用
    bored-image属性可以让浏览器在显示图
    像时自动将使用的图片边框分割成九个部分进行处理，不
    需要用户考虑边框与内容适应问题。</div>
</body>
</html>

运行效果

6.3.为图片添加边框

使用<img>标记的border元素可以为图片添加边框，属性值为边框的粗细，以像素为单位，从而控制边框的效果。当设置属性为零时，显示的为没有边框。

border-width：设置边框的粗细可以使用各种CSS中的长度单位，通常用的是像素
border-color：定义边框的颜色可以使用各种颜色
border-style：表示各种定义好的线型，像虚线、实线或点划线的等。

由此可以推出，我们也可以单独的定义边框的样式。比如使用border-top-style设置上边框样式，其他依此类推。

6.4.图片的缩放

网页显示一张图片时，默认情况下是按图片的原始大小显示的，页面排版时有时需要重新定义图片的大小。可以有以下三种方式来设定。

是用<img>标签的width和height属性，当仅设置width属性时，height属性会按等比例缩放，如果只设置height属性时也是一样的情况。只有同时设定width和height属性时才会按不同比例缩放。
使用CSS3中的max-width属性和max-height属性，他们分别用来设置图片宽度最大值和高度最大值。在定义图片大小时，如果设置图片的尺寸超过了max-width设定的大小，那么就按照max-width所定义的宽度显示，而图片高度将同比例变化。
使用CSS中的width和height属性。

6.5.图文排列

CSS使用float属性来实现文字围绕效果，float属性主要定义图像向哪个方向浮动。

float:none/left/right

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 16px;
            background-color: pink;
        }
        img{
            float: left;
            margin: 10px;
            padding: 5px;
        }
        p{
            color: deepskyblue;
            margin: 0;
            padding-top: 10px;
            padding-left: 5px;
            padding-right: 5px;
        }
        span{
            float: left;
            font-size: 38px;
            font-family: "楷体";
            padding-right: 5px;
        }
    </style>
</head>
<body>
<p><span>世</span>界（world）广义上来讲，就是指全部、所有、<br>一切。一般来讲世界指的是人类赖<br>以生存的地球
    。世界还代称的有天地、天下、此岸、世间、万物、世上等。
    <img src="QQ图片20240216182927.jpg" height="108" width="192"/>
<p>  世界也可解释由可感知的、不可感知的客观存在的总和</p>
<p> 以及用于描述客观存在及其相互关系的概念<br>总和，客观存在是不以人或其他物意</p>
 <p>   志转移而存在的。世界由概念世界和物</p>
     <p>质世界组成，概念世界包含所有生命对客观世界的
    认知以及为记录认知而存在的事物的总和。</p>
</body>
</html>

运行效果