CSS常用样式说明（属性）_css样式说明-html-CSDN博客

本篇博客将教大家如何通过CSS修改html外观，是html页面更加美观。

一、设置字体样式

CSS的网页排版功能十分强大，不仅可以控制文本的大小、颜色、对齐方式、字体，还可以控制行高、首行缩进、字母间距和字符间距。以下是字体样式的常用属性。

font-family	设置字体的类型
font-size	设置字体的大小
font-weight	设置字体的粗细
font-style	设置字体的倾斜

1、字体类型

字体具有两方面的作用：一是传递语义功能，二是美学效应。一般访问者的计算机不会安装一些特殊的字体，如果网页开发者使用了这些访问者计算机没有安装的特殊字体，则可能会使访问者看到的页面与设计者的有很大差异，所以设计者会使用系统默认的宋体，仿宋体，黑体，楷体等字体。

<head>
    <style>
        p{
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <p>这是一段文本。</p>
</body>

2、字体大小

在设计页面的时候，设计者通常会用不同大小的字体来区分需要突出表现的主题和普通内容。常用的有px（绝对单位），pt（绝对单位），em（相对单位）和%（相对单位）。

<head>
    <style>
        #p1{
            font-size: 20px;
        }
        #p2{
            font-size: 20pt;
        }
        #p3{
            font-size: 10em;
        }
        #p4{
            font-size: 20%;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
    <p id="p3">这是一段文本。</p>
    <p id="p4">这是一段文本。</p>
</body>

3、字体粗细

通过font-weight来设置，常见的属性值有normal，bold，bolder，lighter，100，200，300等。

<head>
    <style>
        #p1{
            font-weight: normal;
        }
        #p2{
            font-weight: lighter;
        }
        #p3{
            font-weight: bolder;
        }
        #p4{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
    <p id="p3">这是一段文本。</p>
    <p id="p4">这是一段文本。</p>
</body>

4、字体倾斜

常见参数有normal（正常），italic（斜体），oblique（倾斜体）。

<head>
    <style>
        #p1{
            font-style: normal;
        }
        #p2{
            font-style: italic;
        }
        #p3{
            font-style: oblique;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
    <p id="p3">这是一段文本。</p>
</body>

二、设置文本样式

常用的文本样式有文本水平对齐方式，行高，文本的修饰，段落首行缩进，首字下沉，文本的截断，文本的颜色及文本的背景颜色。以下是属性和说明。

text-align	设置文本的水平对齐方式
line-height	设置行高
text-decoration	设置文本的修饰效果
text-indent	设置段落的首行缩进
first-letter	设置首字下沉
text-overflow	设置文本的截断
color	设置文本的颜色
background-color	设置文本的背景颜色

1、文本的水平对齐方式

常用参数有left（左），righ（右），center（居中），justify（两端对齐）。

<head>
    <style>
        #p1{
            text-align: center;
        }
        #p2{
            text-align: left;
        }
        #p3{
            text-align: right;
        }
        #p4{
            text-align: justify;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
    <p id="p3">这是一段文本。</p>
    <p id="p4">这是一段文本。</p>
</body>

2、行高

常见参数有length（允许负值）和normal（默认行高）。

<head>
    <style>
        #p1{
            line-height: normal;
        }
        #p2{
            line-height: 1000%;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
</body>

3、文本修饰

常见参数有underline（下划线），blink（闪烁），overline（上划线），line-through（贯穿线），

none（无）。

<head>
    <style>
        #p1{
            text-decoration: underline;
        }
        #p2{
            text-decoration: blink;
        }
        #p3{
            text-decoration: overline;
        }
        #p4{
            text-decoration:line-through;
        }
        #p5{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
    <p id="p3">这是一段文本。</p> 
    <p id="p4">这是一段文本。</p>
    <p id="p5">这是一段文本。</p>
</body>

4、段落首行缩进

参数为length，允许负值。

<head>
    <style>
        #p1{
            text-indent: 5%;
        }
        #p2{
            text-indent: -5%;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
</body>

5、首字下沉

<head>
    <style>
        #p1:first-letter{
            font-size: 2em;
        }
        #p2{
            font-size: ;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
</body>

6、文本的截断

参数：clip（简单裁切）和ellipsis（...标记）。由于该元素使用较少，暂不举例。

7、文本颜色

只需添加color属性即可

8、文本背景颜色

参数：color（指定颜色）和transparent（透明）。

<head>
    <style>
        #p1{
            background-color: blue;
        }
        #p2{
            background-color: transparent;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文本。</p>
    <p id="p2">这是一段文本。</p>
</body>

三、设置图像样式

以下是图像控制的常用属性。

width、height	设置图像的缩放
border	设置图像边框样式
opacity	设置图像的不透明度
background-image	设置背景图像
background-repeat	设置背景图像重复方式
background-position	设置背景图像定位
background-attachment	设置背景图像固定
background-size	设置背景图像大小

图像缩放实例：

<head>
    <style>
        #t1{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="G:\web\CSS\R-C.jpg" alt="" id="t1">
    <br>
    <img src="G:\web\CSS\R-C.jpg" alt="">
</body>

图像边框示例;

<head>
    <style>
        #t1{
            width: 100px;
            height: 100px;
        }
        #t2{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="G:\web\CSS\R-C.jpg" alt="" id="t1">
    <br>
    <img src="G:\web\CSS\R-C.jpg" alt="" id="t2" border="5">

图像不透明度示例：

<head>
    <style>
        #t1{
            width: 100px;
            height: 100px;
        }
        img{opacity: 0.5;}
    </style>
</head>
<body>
    <img src="G:\web\CSS\R-C.jpg" alt="" id="t1">
</body>

背景综合示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #t1{
            width: 200px;
            height: 200px;
            background-color: blue;
            background-image: url(../643f756a797a58Gi.gif);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left;

        }
    </style>
</head>
<body>
    <div id="t1"></div>
</body>