一、css的基本构成
选择器{属性:属性值}
css的语句就是由以上三部分组成选择器写在花括号前,花括号内为声明,如果有多个声明,属性前会用“;”隔开。先列举个例子:
body
{
background:#2CA4CF;
font-family:"黑体";
color:#ffffff;
}
我们之前学过元素内嵌入style改变样式的用法,style跟花括号内声明的用法相同。当外部样式表或内部样式表时,就要以这样的形式书写。这段代码的意思是body元素的背景为#2CA4CF色,字体为黑体,字体颜色为#ffffff(黑色)。
二、css中的选择器
1.标签选择器
p{color:black;}
标签选择器是给特定标签确定样式的选择器,这个例子就是让所有p标签应用了黑色字体的样式。
2.类选择器
.class1{color:black;}
类选择器就是根据类名(class)来选择的,在类名前加一个“.”。
3.ID选择器
#id1{color:black;}
ID 选择器可以为标有特定ID的元素指定特定的样式。id在一个html文档页面中只能出现一次,例如,你将一个元素的id取值为”id1”,那么在同一页面你就不能再将其他元素id取名为“id1”了。尽管你会发现即使命名好几个id,css选择器还是会把这些id全都应用样式,就像标签选择器那样。请保持良好的习惯,id不要出现重复。
4.后代选择器
div.class1 p{color:red;}
后代选择器又叫包含选择器。外层的标签在前面,内层的标签在后面,之间要留一个空格,内层标签为嵌套在外层内的标签,该内层标签就是外层标签的后代。该句子会将class为class1的div内所有p标签应用字体颜色红色的样式。
5.子代选择器
div.class1>p{color:red;}
子代选择器用法跟后代选择器很像,标签之间用“>”大于号连接。区别是子代选择器只会选择div.class1的子元素中的
,不包括子元素的子元素等,,不会选择孙子和更晚的备份,故名子代选择器。
6.群组选择器
p,div,.class1,#id1{color:red;}
群组选择器选择许多个标签,之间用“,”小写的逗号隔开,选择器会选择写下来的所有的标签或类。
7.通用选择器
*{color:red;}
通用选择将样式适用去整个html文档,是最强大的选择器。语法是在花括号前写一个“*”星号。
这篇课程讲解了css中基本的语法结构和最基础的选择器功能。学过html的同学一定已经能看懂很多css代码了!