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

戏子无情 提交于 2019-12-25 00:25:49

# 转载请留言联系

我们都知道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. 如果同一个标签中,存在同样的样式属性,但是值不一样,则采用最后声明的那一个

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!