CSS基础介绍
CSS介绍
CSS是指层叠样式表，CSS样式表极大的提高了工作效率
CSS基础语法
1. 首先选择一个属性
2. 选择了属性以后，用大括号括起来
3. 括号里面是对应的属性和属性值，如：
selector { property: value; }
举一个实际的例子，就像这样：
h1是属性，然后一个大括号，括号中的color是属性，后面跟着对应的属性值red，设置结束后需要用;来分别各个属性
h1 { color: red; font-size: 14px; }
使用CSS样式：
需要在html中来使用CSS样式，可以用<link>标签来调用CSS文件，如：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 调用CSS样式表 --> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <h1>我被CSS改变了。</h1> </body> </html>
CSS选择器分组：
选择器分组就是将一堆页面元素，一起定义：
h1, h2, h3, p, a{ color: red; font-size: 14px }
CSS派生类选择
根据元素在其位置的上下文关系来定义样式，就比如标签中的标签，如果直接定义body元素，就会把其中所有的值都改变，但是单单针对某些元素来定义，也是可以的。当然针对一个元素定义的样式的优先级，要比定义<body>全部样式的优先级高。所以即使是<body>修改了样式，也可以针对单个元素进行修改。
如下代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 调用CSS样式表 --> <link rel="stylesheet" type="text/css" href="test.css"> </head> <!-- 标签中的标签 --> <body> <p>我是小p，我是body p{}指定的标签改变的</p> <h1>我是标题</h1> </body> </html>
然后我们用CSS样式来修改
body{ color: green; } body p{ color: red; }
可以看到，将body全部定义成绿色了，但是如果指定body中的p元素进行定义，还是可以将其改变颜色的。所以指定的元素的优先级要比全部定义的高。相反没有指定定义的h1标题，就是绿色。
ID选择器
id选择器可以为标有id的HTML元素指定特定的样式，id选择器以“#”来定义。id选择常常用于简历派生选择器，他们经常一起来使用
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 调用CSS样式表 --> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div id="testid"> 呵呵呵呵 <p>哈哈哈，我被指定定义了颜色，id与元素经常一起使用！</p> </div> </body> </html>
/*id可以直接用#号来表示*/ #testid{ color: green; } #testid p{ color: red; }
CSS类选择器
类选择器是以一个点“.”来显示的，class也可以结合派生选择器来一起使用，比如定义了一个元素<div class="testclass">
利用CSS可以如下修改：
/*class可以需要用“.”来表示*/ .testclass{ color: green; } .testclass p{ color: red; }
属性选择器：
属性选择器就是针对标签中的属性来进行修改，当然，也可以根据属性的值，来针对性的修改：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 调用CSS样式表 --> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <ol type="I"> <li>属性选择器</li> <li>属性选择器</li> <li>属性选择器</li> </ol> <ol type="1"> <li>属性选择器</li> <li>属性选择器</li> <li>属性选择器</li> </ol> <ol type="a"> <li>属性选择器</li> <li>属性选择器</li> <li>属性选择器</li> </ol> </body> </html>
然后用CSS来修改
/*如果没有值，通过属性修改全部的样式*/ [type]{ color: red; } /*有值的话，就是针对值进行修改*/ [type="a"]{ color: green; }
总结：
主要学习了CSS的用法，已经派生选择器的使用，id选择器的使用，class选择器的使用和属性选择器的使用
id---以“#”开头
class---以“.”开头
属性选择器---以[]在括号类填写属性和值
派生选择器---直接调用标签，如：<p>{}
