CSS基础

CSS：页面的美化工作和布局控制

概念：

Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html元素上，同时生效

好处：

• 功能强大
• 将内容的展示和样式的控制分离
  降低耦合度，解耦
  让分工协作更容易
  提高开发的效率

CSS的使用：CSS与HTML的结合方式

• 内联样式：在标签内使用style属性指定css代码

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

• 外部样式：
  1. 定义css的资源文件
  2. 在head标签中，定义link标签，引入外部的资源文件
  编写 a.css文件

    		div{
    			color: green;
    		}
    	<link rel="stylesheet" href="css/a.css">
  

  注意： 三种方式，css作用范围越来越大
  内联方式不常用，内部和外部样式常用
  外部样式还可以这样写：

    		<style>
    			@import "css/a.css";
    		</style>
  

CSS语法：

格式：

选择器{
			属性名1:属性值1；
			属性名2：属性值2；
			……
		}

选择器：具有相似特征的元素
注意：
每一段属性需要使用 ；隔开，最后一段属性可以不加 ；

选择器：

分类：

• 基础选择器
  id选择器: 选择具体的id属性值的元素,建议在一个html页面中，id值唯一
  语法：#id属性值{}
  元素选择器： 选择具有相同标签名称的元素
  语法：标签名称{}
  注意：id选择器优先级高于元素选择器
  类选择器： 选择具有相同的class属性值的元素
  语法：.class{}
  注意：类选择器的优先级也高于元素选择器
  扩展选择器
  * ： 表示选择所有的元素：
  语法：*{}
  并集选择器：
  语法：选择器1，选择器2{}
  子选择器： 筛选选择器1元素下的选择器2元素
  语法：选择器1 选择器2
  父选择器： 筛选选择器2的父元素选择器1
  语法：选择器1>选择器2{}
  属性选择器： 选择元素名称，属性名=属性值的元素
  语法：元素名称[属性名=“属性值”]{}
  伪类选择器： 选择一些元素所具有的状态
  语法：元素：状态{}
  如：
  状态：
  link：初始化的状态
  visited：被访问过的状态
  active：正在访问状态
  hover：鼠标悬浮状态

CSS中的常见属性：

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

• 背景
  background 复合属性

• 边框
  border：设置边框，复合属性

• 尺寸
  宽度：width
  高度：height

• 盒子模型：控制布局
  margin：外边距
  padding:内边距
  默认情况下，内边距会影响盒子的大小

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

• float：浮动
  left 左浮动
  right 右浮动