# 转载请留言联系
我们都知道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. 如果同一个标签中,存在同样的样式属性,但是值不一样,则采用最后声明的那一个
来源:https://www.cnblogs.com/chichung/p/9651953.html