CSS

CSS

1.概念(Cascading style sheets)层叠样式表

层叠：指的是多个样式可以作用在同一个HTML元素上

2. 使用CSS控制HTML元素样式的好处

1. CSS功能强大
2. 将内容展示与样式控制分离，可以降低耦合度，分工协作更容易，提高开发效率，可以实现复用等

3. CSS的使用

1. 内联样式：在标签内使用style指定CSS代码，这种其实并没有分离展示内容与样式控制

2. 内部样式：在head标签内，定义style标签，标签内写CSS代码，作用域只是在当前HTML页面

3. 外部样式：定义css的资源文件，然后在HTML使用link标签引入css代码

   <link href="style.css" rel="stylesheet"> 
   <style>
   	@import "style.css"
   </style>
   <!-- 引入css资源 -->
   

4. 基本语法

基本格式：

选择器：{
	属性名1：属性值1；
	属性名2：属性值2;
	.......
}

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

1. 基本选择器

   1. ID选择器：#id属性值{}，一般id属性值在整个页面唯一
   2. 元素选择器：标签名称{}
   3. 类选择器：.classs属性值{}，一般一个页面多个元素使用同一个class属性值
   4. 优先级：id选择器>类>选择器元素选择器

2. 扩展选择器

   1. *{}：表示选择所有的选择器

   2. 并集选择器：选择器1，选择器2{}

   3. 选择器1 选择器2{}：表示选中选择器1下的选择器2

   4. 父选择器，筛选子选择器的父选择器：父选择器 > 子选择器{}

   5. 属性选择器：元素名称[属性名=“属性值”]{ }，一般用于选择input标签

   6. 伪类选择器：如：

      <!-- 控制链接的不同状态 -->
      a:link{
          color: red;
      }
      
      a:hover{
          color:yellow;
      }
      
      a:active{
          color: black;
      }
      

6. 属性

1. 字体、文本
   1. font-size
   2. color
   3. text-align
   4. ling-hight：字的行高
2. 背景
   1. background：url("image.jpg") no-repeat center;
3. 尺寸
   1. width
   2. height
4. 边框
   1. border
5. 盒子模型:控制页面布局
   1. margin：外边距
   2. padding：内边距
      • 默认情况下内边距会影响真个盒子的大小，可以使用 box-sizing:border-box控制所写的width和height就是最终的盒子大小
   3. float：div默认是换行的，盒子浮动