爱站程序员基地思维导图
整理的笔记
T2（CSS）
- CSS:层叠样式表，将内容与样式控制分离
- 使用方式内联样式在标签内使用style指定css代码，与内容耦合
- code
- 在head标签内，定义style标签中的css内容
- show
- code
- 1. 定义css资源文件
- 2. 在head标签内，定义link标签，引入外部的资源文件【stylesheet ：样式表的意思】
- show
- code
- * 选择器:筛选具有相似特征的元素；属性用“；”隔开
- 基础选择器id 选择器（#id属性值)对应html标签内的id 属性，语法：#id属性值{}
- code
- show
- id选择器优先级高于元素选择器
- 语法： 标签名称{}
- code
- show
- * 语法：.class属性值{}
- 类选择器选择器优先级高于元素选择器
- code
- show
- 选择所有元素（通配选择器，通配符）* 语法： *{}code
- show
- 语法：* 选择器1, 选择器2{}
- 语法： 选择器1 选择器2{} (中间用空格隔开)code
- show
- * 语法： 选择器1 > 选择器2{}code
- show（只有当span标签的父标签是div的时候父选择器的css样式才有效）
- * 语法： 元素名称[属性名=\”属性值\”]{}选择标题属性包含单词\”flower\”的所有元素
- show
- * 语法： 元素:状态{}选择一些元素具有的状态,css提供了一些定义好了的样式，可以直接使用。CSS伪类是用来添加一些选择器的特殊效果。
- 比如超链接超链接有四个状态：* link：初始化的状态
- * active：正在访问状态
- * hover：鼠标悬浮状态
- * visited：被访问过的状态
- 字体、文本font-size：字体大小 font-size: 20px;
- line-height: 40px;
- solid 是实线的意思
- width：宽度
- height：高度
- margin：外边距（相对于某个盒子来说，外边距是指与它的父盒的距离，与它的子盒的距离是内边距，不同的对象相应的内外边距值不同）
- margin:10px 5px 15px 20px; //定义好上右下左边距（注意顺序）
- margin:10px 5px 15px; //顺序不变，不过中间的两个右外边距和左外边距是 5px
- margin:10px 5px; //上外边距和下外边距是 10px.,右外边距和左外边距是 5px
- margin:10px;
- * 默认情况下内边距会影响整个盒子的大小（它并不会动态变化，只会使得外盒的大小改变）
- * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
- code
- show
- float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
- left
- right
