CSS学习笔记-01

1、CSS的引入方式

		CSS的引入方式有三种，分别为外部引入，内部引入，和行内引入。
		外部引入：外部引入需要在外部创建CSS文件，然后在html文件的head标签中用<link rel="stylesheet" href="css/test.css"/>
	引入，href是CSS文件的地址，rel是文件类型，注意rel是必不可少的，负责CSS文件样式将不可用。
		内部引入：内部引入需要在html文件的head标签中添加<style></style>标签，在该标签中写CSS代码即可实现对元素样式的改变
		行内引入：行内引入是将CSS样式设置在元素的属性中，只需要为元素添加style属性即可，如<p style="color: red;">hello css</p>

2、CSS的语法

	selector{
		property:value;
	}
	即：选择器{
		属性:值;
	}

3、CSS选择器

	选择器主要分为三种，分别为元素选择器，id选择器和类选择器
	元素选择器：直接写元素的名称即为元素选择器，将对所有该类元素进行属性设置，如:
			p{
				color:red;
			}
	id选择器：根据元素设置的id来为元素设置样式，在id前加#号即可，假如有个P标签<p id="test">hello css</p>，可以写成这样
			#test{
				color:red;
			}
	类选择器:根据元素设置的class来为元素设置样式，在class前加.即可，假如有个P标签<p class="test">hello css</p>，可以写成
	这样
		.test{
			color:red;
		}

4、在CSS中使用注释

		CSS的注释和java中的多行注释类似，写法为/* 注释内容 */

5、设置元素尺寸大小

			为元素设置大小可以用两个属性来设置，分别为width和height，对应元素的宽和高，在CSS中，宽和高的单位为像素px，假如为P元
		素设置宽为50px,高为50px。可以写成
			p{
				width:50px;
				height:50px;
			}
		这种写法为元素设置的是绝对大小，另外宽和高还可以用相对大小来表示，如
			p{
				width:50%;
				height:50%;
			}
		表示将该元素的长和宽设置为父元素大小的一半。

6、为元素设置背景

		在CSS中，元素的背景可以设置为背景颜色和背景图片。
		要为元素设置背景颜色，用到的属性是background-color,颜色可以用英文单词，十六进制和rgb表示，如：
			<style>
				#div1{
					background-color:red;
				}
				#div2{
					background-color:rgb(250,0,250);
				}
				#div3{
					background-color#00ff0;
				}
			</style>
		要为元素设置背景图片，用到的属性是background-image,同时要为该属性设置图片地址url，ru：
			<style>
				div{
					background-image:url(/img/background.jpg);
				}
			</style>
		然而，由于图片大小和我们的元素大小可能并不相同，所有经常需要对图片进行处理，CSS中对图片处理主要分为两种，分别是让图片
		循环展示铺满元素和将图片进行拉升铺满元素，写法分别为：
			<style>
				/*循环展示*/
				#div1{
					background-repeat:repeat;
				}
				/*自动拉伸*/
				#div2{
					background-size:contain;
				}
			</style>

7、CSS文本操作

1. 文本颜色

 	对文本的颜色进行修改，直接使用color属性即可，如：
		<style>
			p{
				color:red;
			}
		</style>

2. 文本对其

	本文对齐使用的属性是text-align，分为左对齐、居中和右对齐，如：
		<style>
			#p1{
				text-align:left;
			}
			#p2{
				text-align:center;
			}
			#p3{
				text-align:right;
			}
		</style>

4. 文本修饰

	对文本进行修饰使用的是text-decoration属性，常用的有上划线(overline)、下划线(underline)、删除线(line-through)和无(none)
   如:
   	<style>
   	
   		/* 上划线*/
   		#p1{
   			text-decoration:overline;
   		}
   		/* 下划线*/
   		#p2{
   			text-decoration:underline;
   		}
   		/* 删除线*/
   		#p3{
   			text-decoration:line-though;
   		}
   		/* 无线*/
   		#p4{
   			text-decoration:none;
   		}
   	</style>