CSS语法: css由两部分组成,一部分是选择器,一部分是声明(属性和属性值),每个声明块中包含一个或多个声明;属性和属性值之间要用冒号连接,属性和属性之间用空格隔开。如下图所示: 选择符: 指的是要定义样式的对象(HTML里的标签),可以是一类元素,也可以是指定名称的元素,说白了就是帮助我们去找要找的那个对象(标签)。
CSS的常用选择符:标签选择符、类选择符、ID选择符、包含选择符。
类型选择符(元素选择符):用于选择特定类型的元素,只要写出需要添加样式的元素名即可。比如:div,p,body,h1,a,strong等 语法:标签名{}
p{
color:red;
}
id选择符:通过对应id属性的值来选择元素,id名具有唯一性,同一个id名在一个页面中只能出现一次。可以用来创建网页的外围结构。 语法:#id名{属性1;值1;属性2;值2;}
#p1{
font-size:12px;
}
class选择符(类选择符):用过元素的class属性值选中一组元素。使用class选择符时应该给对应的元素添加class属性,class名可以重复,多个元素可以拥有共同一个类名。 语法:.class名{属性1;值1;属性2;值2;}
.title p{
font-size:22px;
}
包含选择符:通过祖先级元素去找子元素,中间用空格隔开,找的是当前元素下的子元素。 如:.main li{属性1;值1;属性2;值2;}
.main li{
width:165px;
height:60px;
border:1px solid #d3d3d3;
float:left;
line-height:60px;
text-align:center;
}
子选择符:选择符1和选择符2必须是父子级关系,只能选择某元素的直接后代,中间不能隔代,选择符和选择符之间用大于号连接。 语法:选择符1>选择符2 {属性1;值1;属性2;值2; }
#nav>li{
float:left;
}
子选择符(>)和包含选择符(空格)的区别:都表示“祖先-后代”的关系,但是子选择符表示的是“爸爸>儿子”,而包含选择符不仅可以是“爸爸 儿子”,还能是“爷爷 儿子”、“太爷爷 儿子”。
群组选择符:提取同分类项;可以把具有相同属性的选择符,用逗号隔开的形式组成一组。
.top,.banner,.main,.bottom{
width:1000px;
margin:0 auto;
}
通配符:通配符是所有选择符中作用范围最广的,通配符能选中当前页面中的所有标签。 由于通配符选择器是设置界面上所有的标签属性,所以在设置之前会遍历所有的标签,如果界面上标签比较多时,性能会比较差,所以在开发中一般不会使用。 语法:*{属性1:属性值1;属性2:属性值2;}
/*控制全局样式的,让页面上的所有元素都清除一遍默认的外边界和填充值*/
*{
margin:0 ;
padding:0;
}
伪类选择符:基于文档结构以外的情形来为页面添加样式。以一个冒号开头,用于选择元素的特定状态或关系。 :link{} 超链接在访问前的状态 :visited{} 超链接在访问后的状态 :hover{} 鼠标悬停在元素上的状态 :active{} 鼠标点击元素不放时的状态 正常的顺序是::link :visited :hover :active
/*初始状态*/
a:link{
color: pink;
}
/*鼠标访问过的状态*/
a:visited{
color: pink;
}
/*鼠标滑过状态*/
a:hover{
color: pink;
}
/*鼠标激活状态,鼠标按下去没松开的状态*/
a:active{
color: pink;
}
|