# 转载请留言联系
我们都知道html写出来的东西是一个文本内容，很单调。和我们平时刷网页看到的内容不一样。那普通的网页是怎样对html超文本进行装饰的呢？没错，就是CSS。
-
css的基本语法
选择器{
样式属性:样式值;
样式属性:样式值;
样式属性:样式值;
}
实际效果，例如：
div{
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; 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. 如果同一个标签中，存在同样的样式属性，但是值不一样，则采用最后声明的那一个