CSS页面美化和布局控制笔记

CSS:页面美化和布局控制

1.概念：Cascading Style Sheets 层叠样式表

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

2. 优点

1、功能强大

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

• 降低耦合性
• 让分工协作更容易
• 提高开发效率

3.CSS的使用：css与html结合方式

1、内联样式

• 在标签内使用style属性指定css代码如：<div style="color:red;"> helle css</div>

2、内部样式

• 在head标签内，定义style标签，style标签的标签体内容就是css代码
• 如：<style> div{ color:blue; }</style> <div> hello world</div>

3、外部样式

• 1、定义css资源文件
• 2、在head标签内，定义link标签，引入外部的资源文件
  如：a.css文件
  • div{ color:green; }
  • <link rel="stylesheet" href="css/a.css"> <div> hello world</div>
• 注意：
  • 1、2、3中方式 css作用范围越来越大
  • 1方式不常用，后期常用2、3方式
  • 3中格式可以写为：
    • <style> @import "css/a.css"; </style>

  4.css语法

  • 格式：
    选择器{
    属性名1 ：属性值1；
    属性名2：属性值2；
    属性名3：属性值3；
    ……
    }
  • 选择器：筛选具有相似特征的元素
  • 注意：
    • 每一对属性需要使用 ； 隔开，最后一对属性可以不加

5.选择器 :筛选具有相似特征的元素

• 分类：

  1、基础选择器

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

  2、扩展选择器

    1.选择所有元素：
    	·语法：*{}
    2.并集选择器：
    	· 选择器1，选择器2{}
    3. 子选择器：筛选选择器1元素下的选择器2元素
    	·语法：选择器1 选择器2{}
    4. 父选择器：筛选选择器2的父元素选择器1
    	· 语法：选择器1 > 选择器2{}
    5.属性选择器：选择元素名称，属性名=属性值的元素
    	·语法：元素名称[ 属性名 = " 属性值" ]{}
    6.伪类选择器：选择一些元素具有的状态
    	·语法：元素:状态{}
    	·如：<a>
    		·状态：
    			·link：初始化的状态
    			·visited:被访问过的状态
    			·active：正在访问状态
    			·hover: 鼠标悬浮状态
  

6.属性

• 5种常用属性

  1、字体、文本

   ·font-size：字体大小
   ·color：文本颜色
   · text-align：对齐方式
   · line-height：行高
  

  2、背景

   ·background：背景
  

  3、边框

   ·border：设置边框，符合属性
  

  4、尺寸

   ·width：宽度
   · height：高度
  

  5、盒子模型：控制布局

   · margin：外边距
   ·padding：内边距
   	· 默认情况下内边距会影响整个盒子的大小
   	· box-sizing：border-box； 设置盒子的属性，让width和height就是最终盒子的大小
   ·float：浮动
   	·left
   	·right