4 id和class选择器 ID选择器:
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证一样具有唯一性。
HTML元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。注意: id 属性不能以数字开头。
语法: #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
class选择器: class 选择器用于描述一组元素的样式,也叫做类选择器。
class 可以在多个元素中使用,并且一个元素也可以指定多个类名。
在 CSS 中,类选择器以一个点 "." 号来定义。
同样的类名的第一个字符也不能使用数字。
语法: 类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID 选择器和类(class)选择器的区别: 相同点:
- 都可以应用于任何元素
不同点:
- ID 选择器只能在文档中使用一次,而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而ID只能指定一个。
5 CSS元素选择器
最常见的CSS选择器就是元素选择器,也就是标签选择器,也就是在HTML中元素的最基本的选择器。
语法: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
6 CSS背景(background)
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种:
background-color 背景颜色 background-image 背景图像 background-repeat 背景图像设置水平或垂直平铺或不平铺 background-position 背景图像设置定位 background-attachment 背景图像设置固定或滚动
背景属性简写: body{ background:green url('images/fix.gif') no-repeat fixed 12px 24px; } 当使用简写属性时,属性值的顺序依次为: background-color --> background-image --> background-repeat --> background-attachment --> background-position