怎样⽤css来美化⼀个html页⾯
# 转载请留⾔联系
我们都知道html写出来的东西是⼀个⽂本内容，很单调。和我们平时刷⽹页看到的内容不⼀样。那普通的⽹页是怎样对html超⽂本进⾏装饰的呢？没错，就是CSS。
css的基本语法
选择器{
样式属性：样式值;
样式属性：样式值;
样式属性：样式值;
}
实际效果，例如：
div{
width:100px;
height:100px;
html导航源码
background:gold;
}
CSS的引⼊⽅式
1.内联式：通过标签的style属性，在标签上直接写样式。
<!DOCTYPE html>
<html lang="en">
<head><!--在<head></head>>⾥⾯写CSS样式-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p >我是段落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="www.baidu">百度</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. 如果同⼀个标签中，存在同样的样式属性，但是值不⼀样，则采⽤最后声明的那⼀个

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。