一、CSS简介 |
css我们称呼层叠样式表(英文全称:Cascading Style Sheets)。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。如果html是一个人,那么CSS就相当于衣服,有了它我们可以让HTML样式丰富多彩。
css语法主要由两部分组成:选择器和声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
selector { property1:value1 property2:value2 …… }
元素内联:直接在元素中置顶CSS
页面嵌入:通过在head标签中定义,提供后续使用
外部引入:通过外部文件,是head标签中使用link引入,本质引入都是一样。
/*代码块*/
/*.c1{
height: 30px;
}*/
二、CSS选择器 |
分类:
1.元素选择器
通过不同的元素定义选择器,如p、div、span、hr、table等等,只要定义了元素选择器,所有该元素都会引用定义的样式。
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <style> p{ background-color: aqua ; height: 20px; } div{ background-color: red; height: auto; } </style> </head> <body> <div>wd</div> <p>name</p> <!--head中定于了p、div标签的样式,body中所有的div和p都会引用到其样式--> </body> </html>
2.id选择器
通过使用#+名字定义样式,引用使用id=“名字”引用该样式。
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello wd</title> <style> #i1{ background-color: red; height: 50px; } </style> </head> <body> <div id="i1">python</div> <!--引用i1中的样式--> </body> </html>
3.class选择器
通过.+名字定义,使用class=“名字”来引用样式
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello wd</title> <style> #i1{ background-color: red; height: 50px; } </style> </head> <body> <div id="i1">python</div> <!--引用i1中的样式--> </body> </html>
原文:http://www.cnblogs.com/wdliu/p/7231412.html