CSS | xuzhen

CSS规则：选择器(Selector) + 声明(Declaration)

Declaration: property + value

/*注释*/
selector {
property:value;
property:value;
}

id选择器

#id {
property:value;
}

class选择器

.class {
property:value;
}

外部样式表

该样式将用于多个页面时，可用此类样式表

<head>
<link rel="stylesheeet" type="text/css" href="mystyle.css">
</head>

内部样式表

单个页面的特殊样式

<head>
<style>
selector {
property:value;
property:value;
}
</style>
</head>

内联样式

样式只是在某一个元素上应用一次

<p style="property:value;property:value;">XXXX</p>

多重样式

不同样式表定义了同样的选择器：将从更具体的样式表中继承。层叠次序：浏览器缺省设置 –> 外部样式表 –> 内部样式表 –> 内联样式

背景属性

background-color

三种颜色定义方式

selector {
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: red;
background-color: transparent;		/*透明  默认*/
background-color: inherit;		/*从父元素继承*/
}

background-image

默认平铺重复显示

selector {
background-image: url('XXX.jpg');
background-image: none		/*无 默认*/
background-image: inherit	/*从父元素继承*/
}

background-repeat

selector {
background-repeat: repeat;		/*垂直和水平重复 默认*/
background-repeat: repeat-x;		/*水平重复*/
background-repeat: repeat-y;		/*垂直重复*/
background-repeat: no-repeat;		/*不重复*/
background-repeat: inherit;		/*从父元素继承*/
}

background-attachment

设置背景是否固定

selector {
background-attachment: scroll;		/*滚动 默认*/
background-attachment: fixed;		/*固定*/
background-attachment: inherit;		/*从父元素继承*/
}

background-position

selector {
/*仅指定一个关键字，其他默认为center*/
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
/*x: 水平位置，y：垂直位置。左上角：0%0%，右下角：100%100%。仅指定一个值，其他默认为50%，默认值：0%0%*/
background-position: x% y%;
/*从父元素继承*/
background-position: inherit;
}

简写背景属性

selector {
background: color image repeat attachment position
}

文本属性

文本颜色

selector {
color: red;
color: #000000;
color: rgb(0, 0, 0);
}