css基础

白鸽_boy

已于 2023-03-27 16:31:13 修改

阅读量963

点赞数

分类专栏： CSS 文章标签： css 前端

于 2022-07-06 16:44:53 首次发布

本文链接： https://blog.csdn.net/qq_50452445/article/details/125642986

版权

本文介绍了CSS的基础知识，包括结构、语法、文字和文本属性、颜色、选择器及其特性，如继承性、层叠性和优先级。详细讲解了各种字体属性、文本对齐、颜色设置以及选择器的使用，如标签选择器、ID选择器、类选择器等，旨在帮助读者掌握CSS的基本应用。

摘要由CSDN通过智能技术生成

介绍

CSS(层叠样式表)

用于设置和布置网页-例如，更改内容的字体颜色，大小和间距，将其拆分为多个列，或添加动画和其它装饰功能。

结构

书写CSS结构有两种：

方式一(内嵌式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*书写css代码*/
    </style>
</head>
<body>
</body>
</html>

方式二(外链式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
</body>
</html>

语法

注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*注释的内容*/
    </style>
</head>
<body>
</body>
</html>

文字属性

font-style

描述：设置字体样式。

取值：

normal：默认值。定义标准的字符。

italic：设置字体样式为斜体。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .p1{
     
                font-style: noraml;
            }

            .p2{
     
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <p class="p1">我是段落1</p>
        <p class="p2">我是段落2</p>
    </body>
</html>

font-weight

描述: 设置字体的粗细程度。

取值：

normal：默认值。定义标准的字符。

bold：定义粗体字符。

bolder：定义更粗的字符。

lighter：定义更细的字符。

100~900：定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .p1{
     
                font-weight: normal;
            }

            .p2{
     
                font-weight: bold;
            }

            .p3{
     
                font-weight: bolder;
            }

            .p4{
     
                font-weight: lighter;
            }

            .p5{
     
                font-weight: 100;
            }
        </style>
    </head>
    <body>
        <p class="p1">我是段落1</p>
        <p class="p2">我是段落2</p>
        <p class="p3">我是段落3</p>
        <p class="p4">我是段落4</p>
        <p class="p5">我是段落5</p>
    </body>
</html>

font-size

描述：设置字体大小。

取值：

px：定义为像素值

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .p1{
     
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <p class="p1">我是段落1</p>
    </body>
</html>

font-family

描述：设置字体系列。

可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .p1{
     
                font-family: "Arial", "Times New Roman", "宋体";
            }
        </style>
    </head>
    <body>
        <p class="p1">我是段落1</p>
        <p class="p2">我是段落2</p>
    </body>
</html>

font

描述：字体属性的简写

取值：

font-style：设置字体样式。

font-weight：设置字体的粗细程度。

font-size：设置字体大小。

font-family：设置字体系列。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .p1{
   
                font: italic bold 100px "Arial", "Times New Roman";
            }
        </style>
    </head>
    <body>
        <p class="p1">我是段落1</p>
    </body>
</html>

文本属性

text-decoration

描述：设置文本的修饰。

取值：

none：默认。定义标准的文本。

underline：下划线。

overline：上划线。

line-through：删除线。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .p1{
     
                text-decoration: none;
            }

            .p2{
     
                text-decoration: underline;
            }

            .p3{
     
                text-decoration: overline;
            }

            .p4{
     
                text-decoration: line-through;
            }
        </style>
    </head>
    <body>
        <p class="p1">我是段落1</p>
        <p class="p2">我是段落2