7.8 css 学习

7.8 css 学习
1.css 学习
i) 学习目的 : 为了把样式和内容剥离, 打包更好的处理样式
ii) 范例 :

<style>
	td{background-color:green;}	
</style>


<table border="1">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>

2. id 选择器 (保证唯一性)
   i) 范例

<style>
#tdx {
	color: green;
}

#td1 {
	color: blue;
}

#td2 {
	color: red;
}
#td3 {
	color: black;
}
</style>


<table border="1">
	<tr>
		<td id="tdx'">1</td>
		<td id="td1">2</td>
	</tr>
	<tr>
		<td id="td2">3</td>
		<td id="td3">4</td>
	</tr>
</table>

3. 类选择器 (多个格式用同一个样式的时候使用)
   i) 范例

<style>
.han1{
color : red;
}
.han2{
color : blue;
}
# td1{
color : green;
}
</style>


<table border="1">
	<tr>
		<td class="han1">1</td>
		<td id="td1">2</td>
	</tr>
	<tr>
		<td class="han2">3</td>
		<td class="han2">4</td>
	</tr>
</table>

4. 注释
   i) 范例

<style>
/* css中的注释可以使用这种 */
.han1{
color : red;
}
.han2{
color : blue;
}
# td1{
color : green;
}
</style>

5. 尺寸(宽和高)
   范例

<style>
/* css中的注释可以使用这种 */
/* 这里的100% 和 30% 是以屏幕为准的, 是屏幕的100%或者30%*/
.div1{
	width : 100%;
	height : 30%;
	background-color : green;
}
.div2{
	width : 50%;
	height : 20%;
	background-color : yellow;
}
</style>


	
<div class="div1">
	han
</div>
<br>-----------<br>
<div class="div2">
	han
</div>

6. 背景
   i) 常用的属性
   a) background-color
   颜色支持 :
   – red, green
   – rgb(250,0,250)
   –#FFFFFF
   b) background-image:url(imagepath)
   c) url(ground.jpg)
   d) background-repeat
   e) background-size:contain

   范例 :

han

```

7. 文本属性
   i) 范例

<style>
.div {
	color : red /*文字颜色*/
	text-align : center /*文字对齐, left right center*/
	text-decoration : overline     /*文本修饰*/
	line-height :  18px;    /*行间距*/
	letter-spacing : 0px;  /*字符间距*/
	word-spacing : 0px ; /*单词间距*/
	text-indent : 10px ; /*首行缩进*/
	text-transform : none ; /* 文字的大小写, none默认大小写, 还有一些其他的,capitalize全大写等等*/
}
</style>
<div class="div">han han<br> hanx</div>

8. css字体
   i) 范例

<style>
.div {
	color : red /*文字颜色*/
	text-align : center /*文字对齐, left right center*/
	text-decoration : overline     /*文本修饰*/
	line-height :  18px;    /*行间距*/
	letter-spacing : 0px;  /*字符间距*/
	word-spacing : 0px ; /*单词间距*/
	text-indent : 10px ; /*首行缩进*/
	text-transform : none ; /* 文字的大小写, none默认大小写, 还有一些其他的,capitalize全大写等等*/
	
	/*以下是字体颜色*/
	font-size : 20px  /* 有两种 : px或者%*/
	font-style : normal /* 字体风格, normal 标准字体, italic斜体*/
	font-weight : normal /* 字体粗细, normal与bold */
	font-family : "times" /* 字体库 */
}
</style>
<div class="div">han han<br> hanx</div>

9. css表格 & 边框
   i) table-layout属性
   a) table-layout : automatic (单元格的大小由td的内容宽度决定) 或者fixed: 单元格的大 小由td上设置的宽度所决定.
   b) table-layout : fixed (单元格的大小由td上设置的宽度所决定).
   ii) border-collapse 属性
   a) border-collapse : separate 边框分隔
   b) border-collapse : collapse 边框合并
   范例

<style>
	/*
	1) border-style : 边框风格
	2) border-color : 边框颜色
	3) border-width : 边框宽度
	4) border : 都放在一起
	5) border-top : 只有一个方向有边框
	
	note : 块元素的宽度默认是100% (div, p, h1)
	note : 内联元素的宽度是由其内容所决定的 (a, strong, i, input)
	*/

}
</style>
<table class="t1" border="1" width="50%">
	<tr>
		<td width="10%">han1</td>
		<td width="10%">han2</td>
	</tr>

	<tr>
		<td width="10%">han3</td>
		<td width="10%">han4</td>
	</tr>

</table>