标签:
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>{}
标签:
原文地址:http://www.cnblogs.com/yyhh/p/4214797.html