CSS基础学习笔记

1 基础选择器

● 每个基础选择器都有使用场景，都需要掌握
● 如果是修改样式， 类选择器是使用最多的

2 字体属性

3 文本属性

4 CSS引入方式

5 复合选择器

5.1 连接伪类选择器

  /* a 是标签选择器  所有的链接 */  
  a {        
   color: gray; 
  } 
  /* :hover 是链接伪类选择器 鼠标经过 */ 
  a:hover {     
   color: red;  /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ 
  }

5.2 focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

 input:focus {  
   background-color:yellow; 
 }  

6 元素显示模式

7 元素显示模式转换

● 转换为块元素：display:block;
● 转换为行内元素：display:inline;
●转换为行内块：display: inline-block;

8 背景

背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

9 边框（border）

CSS 边框属性允许你指定一个元素边框的样式和颜色。
语法：

border : border-width || border-style || border-color  

边框样式 border-style 可以设置如下值：
● none：没有边框即忽略所有边框的宽度（默认值）
● solid：边框为单实线(最为常用的)
● dashed：边框为虚线
● dotted：边框为点线

10 相邻边框合并

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：

 border-collapse:collapse;  

●collapse 单词是合并的意思
●border-collapse: collapse; 表示相邻边框合并在一起

边框会影响盒子实际大小

11 内边距（padding）

<