CSS：页面美化和布局控制

001 CSS概念　　

   　　Cascading Style Sheets：层叠样式表　　

　　 层叠： 多个样式可以作用在同一个html元素上，并能同时生效

002 CSS的好处

　　1. 功能强大

　　2. 将内容展示和样式控制分离开

• 降低耦合性 即解耦

• 让分工协作更加容易

• 提高开发效率

003 CSS的使用

　　1. 内联方式：在标签内部使用style属性指定css代码(不推荐使用)

　　　　例如：

　　2.   内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码

　　　　例如：

             
	　　　　　　
			    
		　　
		　　
				
hello css
		　　
		            

 　　3. 外部样式：

　　　　1. 定义css的资源文件

　　　　2. 在head标签内，定义link标签，来引入外部的css资源文件

　　　　例如：

　　　　a.css

　　　　　　div{color:green;}

　　　　b.html

                
		   
		 	
		   
		   
		 	
Hello css
		   
		        

 　　注意：

 　　　　 1. 这三种css的作用范围越来越大

  　　　　2. 第一种方式不常用，常用的是第二种和第三种方式

 　　　　 3. 第三种方式可以写为下面的形式，不常用，知道就行

 　　　　　　

004 CSS语法格式

　　　　格式：

　　　　　　选择器{

　　　　　　　　属性名1：属性值1；

　　　　　　　　属性名2：属性值2

　　　　　　　　... ...

　　　　　　} 

　　　　选择器：筛选具有相似特征的元素

　　　　注意：

　　　　　　每一对属性需要使用分号隔开(;)，最后一对属性不加分号

005 选择器

　　筛选具有相似特征的元素

　　5.1 基础选择器

　　　　1)id选择器:选择具体id属性的元素

          　　语法： #id属性值{内容}

　　　  　例如：

		  
		  
		  
			
创智播客

　　　　 注意：

  　　　　   1. 在一个页面中id值是唯一的　　

　　　　　2）元素选择器:选择具有相同标签名称的元素

　　　　　　语法： 标签名称{}

　　　　   例如：

        　　　　 
         　　　　
	　　　　　
		 　　
创智播客
		　　
传智播客

 　　　　注意： id选择器的优先级高于元素选择器　

　　　　3) 类选择器:选择具有相同的class属性值的元素

　　　　　　语法： .class属性值{}

　　　　　　例如：

　　　　　　

   　　　　

   　　　　

    　　　　　　 
创智播客

   　　　　　　  
传智播客

　　　　注意：

　　　　　　1. 类选择器的优先级高于元素选择器的优先级

　　　　　　2. id选择器的优先级要高于类选择器的优先级

 　　5.2 扩展选择器

　　　　　　1） 选择所有元素

　　　　　　　　语法： *{}

　　　　　　2） 并集选择器：选择器下的所有元素都会生效

　　　　　　　　语法： 选择器1,选择器2{}

　　　　　　3）子选择器：筛选选择器1下的选择器2中的所有元素

　　　　　　　　语法： 选择器1 选择器2{}

　　　　　　　　例如：　　　　　　　

　　　　　　　　
   　　　　　　 
   　　　　　　 
    　　　　　　 

     　　　　　　　　
创智播客
    　　　　　　 
    　　　　　　 
传智播客

　　　　　　4) 父选择器：筛选选择器2的父选择器1（即选择器2上一级的选择器1）中的内容

　　　　　　　　语法： 父选择器1>选择器2{}

　　　　　　　　例如：

　　　　　　　　 
    　　　　　　
    　　　　　　
     　　　　　

     　　　　　　　　
创智播客
     　　　　　
     　　　　　
传智播客

　　　　　　5) 属性选择器： 选择属性名称，属性名=属性值的元素

　　　　　　　　语法： 属性名称[属性名="属性值"]{}

　　　　　　　　例如：

    　　　　6) 伪类选择器：选择一些元素具有的状态

       　　　　　　 语法： 元素:状态{}

       　　　　　　 例如：

       　　　　　　  状态：

         　　　　　　　　link:初始化的状态

         　　　　　　　　visited:被访问过的状态

       　　　　　　　　  active:正在访问的状态

       　　　　　　　　  hover:鼠标悬浮状态

        　　　　　　 代码

         　　　　　　
   　　　　　　　　 
   　　　　　　　　 
   　　　　　　　　　　　　 黑马程序员
   　　　　　　　　 

006 CSS属性

　　1. 字体，文本

　　　　* font-size: 字体大小

　　　　* color: 文本颜色

　　　　* text-align： 对齐方式

　　　　* line_height： 行高

　　2. 背景:复合属性

　　　　* background: url("img/logo.jpg") no-repeat cneter;

　　3. 边框:复合属性

　　　　* border: 设置边框，复合边框

　　　例如： border:1px solid red;

　　4. 尺寸

　　　　* width: 宽度

　　　　* height: 高度

　　5. 盒子模型:对页面布局的控制

　　　　* margin:外边距

　　　　* padding: 内边距

　　　注意：

　　　　1) 默认情况下内边距会影响整个盒子的大小

　　　　2) box-sizing:border-box;  设置盒子的属性，让width和height就是最终盒子的大小

　　*float:浮动

　　　　* left

　　　　* right

　　　　例如：

　　　　
　　　　
　　　　　　
　　　　
　　　　
　　　　　　　　

　　　　　　　　

　　　　　　　　
　　　　/body>