CSS的基础使用

CSS：页面美化和布局控制

概念

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

好处

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

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

• 内联样式
  在标签内使用style属性指定css代码
  如：<div style="color:red;"> hello css</div>
• 内部样式
  在head标签内，定义style标签，style标签的标签内容就是css代码
  如：

<style>
	div{
		color:blue;
	}
	
</style>
<div>hello css</div>

• 外部样式
  定义css资源
  在head标签内，定义link标签，引入外部的资源文件
  如：

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

CSS语法

• 格式：
  选择器{
  属性名1；属性值1；
  属性名2；属性值2；
  ···
  }

• 注意：每一对属性需要使用“；”隔开，最后一对属性可以不加

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

基础选择器：

• id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
  语法：#id属性值{}

• 元素选择器：选择具有相同标签名称的元素
  语法：标签名称{}
  注意：id选择器优先高于元素选择器

• 类选择器：选择具有相同的class属性值的元素
  语法：.class属性值{}
  注意：类选择器优先高于元素选择器

扩展选择器：

• 选择所有元素：
  语法：*{}
• 并集选择器：
  选择器1，选择器2{}
• 子选择器：
  语法：选择器1 选择器2{}
• 父选择器：
  语法：选择器1>选择器2{}
• 属性选择器：
  语法：元素名称[属性名=“属性值”]{}
• 伪类选择器：
  语法：元素：状态{}
  如：< a>
  状态：
  link：初始化的状态
  visited：被访问过的状态
  active：正在访问状态
  hover：鼠标悬浮状态

属性

• 字体，文本
  font-size：字体大小
  color：文本颜色
  text-align：对齐方式
  line-height：行高
• 背景
  background：
• 边框
  border：设置边框，符合属性
• 尺寸
  width：宽度
  height：高度
• 盒子模型
  margin：外边距
  
  padding：内边距
  （默认情况下内边距会影响整个盒子的大小
  box-sizing：border-box；
  设置盒子的属性，让width和height就是最终盒子的大小）
  
  float：浮动（left right）