教你快速上手CSS

教你快速上手CSS

1、html与css区别
（1）html 在一个网页中负责的事情是一个页面的结构
（2）css(层叠样式表) 在一个网页中主要负责了页面的数据样式

2、编写css代码的方式
（1）第一种： 在style标签中编写css代码， 只能用于本页面中，复用性不强

格式 ： 
    <style type="text\css">
        编写css的代码
    </style>   

（2） 第二种： 可以引入外部的css文件

    方式1： 使用link标签
    	格式：
        	<link href="css文件的路径" rel="stylesheet">
     
    方式2：使用<style>引入
         格式：	
         		<style type="text/css" >
                	@import url("css的路径");
                </style>

（3）第三种方式：直接在html标签使用style属性编写， 只能用于本标签中，复用性较差

例子：<a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>

3、注释方式
（1）html的注释：<!-- html的注释 -->
（2）css ： /* css的注释 ..*/

4、选择器
（1） 选择器的作用: 找到对应的数据进行样式化。
（2）标签选择器： 就是找到所有指定的标签进行样式化。

格式：	
		标签名{
			样式1；样式2....	
		}

（3） 类选择器: 使用类选择器首先要给html标签指定对应的class属性值

	格式：
		.class的属性值{
			样式1；样式2...	
		}	

（4）类选择器要注意的事项

• html元素的class属性值一定不能以数字开头
• 类选择器的样式是要优先于标签选择器的样式

（5） ID选择器: 使用ID选择器首先要给html元素添加一个id的属性值

ID选择器的格式：
				#id属性值{
					样式1；样式2...	
				}

（6）id选择器要注意的事项：

• ID选择器的样式优先级是最高的，优先于类选择器与标签选择器
• ID的属性值也是不能以数字开头的
• ID的属性值在一个html页面中只能出现一次

（7） 交集选择器：对选择器1中的选择器2里面的数据进行样式化

选择器1 选择器2{
		样式1，样式2....	
	}

（8）并集选择器： 对指定的选择器进行统一的样式化

格式：	
	选择器1,选择器2..{
		样式1；样式2...
	}

（9） 通用选择器:

*{
		样式1；样式2...
	}	

5、伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。
（1） a:hover 必须被置于 a:link 和 a:visited 之后
（2） a:active 必须被置于 a:hover 之后

	a:link{color:#F00} /* 没有被点击过---红色 */
	
	a:visited{color:#0F0} /*  已经被访问过的样式---绿色 */ 
	
	a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */

	a:active{color:#FF0;} /* 鼠标点击过的状态 */

（3）div默认是没有边框

6、盒子模型
（1）盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离
（2）盒子模型主要是用于操作内边距(padding)与外边距（margin）

7、基础选择器
(1) id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法：#id属性值{}
(2)元素选择器：选择具有相同标签名称的元素
语法： 标签名称{}
注意：id选择器优先级高于元素选择器
(3) 类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器