怎样用css来美化一个html页面

# 转载请留言联系

我们都知道html写出来的东西是一个文本内容，很单调。和我们平时刷网页看到的内容不一样。那普通的网页是怎样对html超文本进行装饰的呢？没错，就是CSS。

css的基本语法

选择器{
样式属性:样式值;
样式属性:样式值;
样式属性:样式值;
}

实际效果，例如：
div{
    width:100px;
    height:100px;
    background:gold;
}

CSS的引入方式

1.内联式：通过标签的style属性，在标签上直接写样式。

<!DOCTYPE html>
<html lang="en">
<head>             <!--在<head></head>>里面写CSS样式-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="font-size: 50px;
            color:greenyellow;
            background: black;
            height:150px;
            width: 250px;">我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</body>
</html>

这种方式会使HTML源代码过于杂乱，而且不能进行拓展，所以基本不用。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.嵌入式：通过style标签，在网页上创建嵌入的样式表。

<!DOCTYPE html>
<html lang="en">
<head>             <!--在<head></head>>里面写CSS样式-->
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 50px;
            color:greenyellow;
            background: black;
            height:150px;
            width: 250px;
        }
    </style>
</head>
<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</body>
</html>

这种方式也会是HTML代码过于冗长，也很少用。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3.外链式：通过link标签，链接外部样式文件到页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo.css"/>
</head>
<body>
    <p href="http://www.baidu.com">百度</p>
    <p class="odd">第一段</p>
    <p class="bg">第二段</p>
    <h1 class="odd bg">大标题</h1>
    <div class="onediv">
        <p>啦啦啦</p>
        <p>bibibi</p>
        <h3>pipipi</h3>
    </div>
    <div class="twodiv">
        <p>嘟嘟嘟</p>
        <p>jijiji</p>
    </div>
</body>
</html>

div{             <----------------标签选择器，使用标签名作为选择器，意指给同名的标签统一加上外观样式。
    width: 250px;
    height: 250px;
    background: aqua;
}

.odd{             <----------------类选择器，可以使用class的属性，把html网页中的标签进行指定分类，选择器就是分类名称。
    color: crimson;
}

.bg{
    background: darkcyan;
    color: aquamarine;
}

div p{        <---------层级选择器，我们可以多个不同的范围的选择器写在一起，来控制样式的效果范围。层级选择器可以有2层，3层或者多层，例如，div  p  则表示是div包含的p标签会被指定样式。
    font-size: 60px;
}

.onediv{
    color: coral;
}

注意：

1. 使用类名作为选择器的时候，类名左边必须有一个英文的圆点( . )
2. 类名的设置，是不区分标签，也就是说，p和h1之类的标签，都可以设置为同一个类
3. 同一个标签，可以在class属性中，设置属于多个类的，类名之间使用空格隔开
4. 如果同一个标签中，存在同样的样式属性，但是值不一样，则采用最后声明的那一个

怎样用css来美化一个html页面

css的基本语法

CSS的引入方式

猜你喜欢