CSS笔记

CSS: 页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表

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

好处

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

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

1. 内联样式
   • 在标签中使用style属性制定css代码。这样，样式与内容展示还是偶合在一起
   • 只作用当前标签
   • <div style="color:red; ">hello css</div>
2. 内部样式
   • 在head标签内，定义style标签，style标签的标签体内容就是css代码
   • 作用在当前页面

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

 <div>hello css</div>

3. 外部样式
   1. 定义css资源文件
   2. 在head标签内，定义link标签，引入外部资源文件

<link rel='stylesheet' href='css/a.css'>

<div>hello css</div>
a.css:
div{
	color : #c30000;
}

4. 123三种方式，css作用的范围越来越大。1不常用，23常用

CSS语法

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

选择器

筛选具有相似特征的元素

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

属性

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