CSS基础：属性和关系选择器

字体属性

color

文本颜色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size

文本大小

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

注意：chrome浏览器接受最小字体是12px

font-weight

文本粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同于bold

H1{font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style

文本字体样式

值	描述
normal	默认值
italic	定义斜体字

font-family

指定一个元素的字体

每个值用逗号分开
如果字体名称包含空格，它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";

背景属性

background-color属性

背景颜色

<div class="box"></div>
.box{width: 300px;height: 300px;background-color: palevioletred;
}

background-image属性

背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{width: 600px;height: 600px;background-image: url("images/img1.jpg");
}

background-repeat属性

该属性设置如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

.box{width: 600px;height: 600px;background-color: #fcc;background-image: url("images/img1.jpg");background-repeat: no-repeat;
}

background-size属性

设置背景图像大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

.box{width: 600px;height: 600px;background-image: url("images/img1.jpg");background-repeat: no-repeat;background-size: 100% 100%;
}

background-position属性

该属性设置背景图像的起始位置，其默认值是：0% 0%

值	说明
left top	左上角
left center	左 中
left bottom	左 下
right top	右上角
right center	右 中
right bottom	右 下
center top	中 上
center center	中 中
center bottom	中 下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%
xpos ypos	单位是像素

.box{width: 600px;height: 600px;background-color: #fcc;background-image: url("images/img1.jpg");background-repeat: no-repeat;background-position: center;
}

文本属性

text-align

指定元素文本的水平对齐方式

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration

添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform

控制文本的大小写

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent

text-indent 属性规定文本块中首行文本的缩进

p{text-indent:50px;
}

负值是允许的。如果值是负数，将向页面左缩进

表格属性

表格边框

指定CSS表格边框，使用border属性

table, td {border: 1px solid black; 
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性，向左，右，或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐

td { height:50px; vertical-align:bottom; }

表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px; }

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色

table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

关系选择器

关系选择器分类

1. 后代选择器
2. 子代选择器
3. 相邻兄弟选择器
4. 通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素，中间用空格隔开

语法

E F{}

<ul><li>宝马</li><li>奔驰</li>
</ul><ol><li>奥迪</li>
</ol>

ul li{color:green;
}

子代选择器

定义

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法

E>F{}

<div> <a href="#">子元素1</a><p> <a href="#">孙元素</a> </p><a href="#">子元素2</a>
</div>

div>a{color:red
}

相邻兄弟选择器

定义

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

语法

E+F{}

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

h1+p{color:red;
}

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

语法

E~F{}

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>

h1~p{color:red;
}