web前端——CSS样式

一、 样式
a) CSS Cascading Style Sheet 层叠样式表
b) 样式的引入方式

1. 行内样式： 内容
2. 内部样式： 在页面头部
3. 外部样式： 在页面头部以link标签链入

c) 样式的基本语法 1. 选择器{ … } 2. 基本选择器的种类 1. 标签选择器 标签名称{ … } 同名标签自动响应 2. 类选择器 .类选择器名称{ … } 用标签的class属性引入 3. ID选择器 #ID选择器名称{ … } 用标签的id属性引入 ID选择器的名称，在同一个HTML页面中必须唯一 body中的第一代全部适应ID选择器

3. 样式的种类

4. 字体样式 font
   a) 字体的样式：font-style: normal/italic;
   b) 字体的粗细：font-weight: normal/bold;
   c) 字体的字号：font-size: Npx/em; 12-14px;
   d) 字体的家族：font-family : 英文字体 , ’中文字体’;
   e) 字体复合样式：font: 样式 粗细 字号 字族;

5. 文本样式
   a) 文字的颜色：color: 颜色英文常量/#a45fj7;
   b) 文本的装饰：text-decoratin: none / underline;
   c) 文本水平对齐方式：text-align: left / center / right;
   d) 文本的首行缩进：text-indent: Nem/Npx;
   e) 段落文本行距：line-height:Npx; 文本的垂直居中

6. 列表样式 list-style
   a) 列表项目符号：list-style-type: none / decimal … ;
   b) 列表项目图片：list-style-image: url(图片路径);
   c) 列表图片位置：list-style-position: outside / inside;
   d) 列表符合样式：list-style:none url(图片路径) inside;

7. 边框样式 border
   a) 颜色：border-color: 颜色英文常量/#a45fj7;
   b) 宽度：border-width: Npx;
   c) 线型：border-style: solid单实线 / dashed段虚线; dotted/groove
   d) 上边：border-top: color width style;
   e) 右边：border-right: color width style;
   f) 下边：border-bottom: color width style;
   g) 左边：border-left: color width style;
   h) 上边框宽度：border-top-width: Npx;
   i) 右边框颜色：border-right-color: 颜色英文常量/#a45fj7;
   j) 下边框线型：border-bottom-style: solid单实线 / dashed段虚线;
   k) 复合选择器：border: color width style;

8. 背景样式 background
   a) 背景颜色：background-color: 颜色英文常量/#a45fj7;
   b) 背景图片：background-image: url(图片地址);
   c) 背景图片位置：
   background-position: left/center/right top/center/bottom;
   background-position: LEFT px TOPpx;
   d) 背景图片平铺:background-repeat: repeat/no-repeat/repeat-x/repeat-y;
   e) 复合样式：background: color url() position repeat;
   f) 背景图片尺寸: background-size: n% / WIDTH px HEIGHT px;

二、 盒子模型 上、右、下、左 专用于块级元素
a) 外边距：margin

1. margin-top/right/bottom/left: Npx;
2. margin: NToppx NRightpx NBottompx NLeftpx; 上、右、下、左
3. margin: NToppx NLRpx NBottompx; 上、左右、下
4. margin: NTBpx NLRpx; 上下、左右
5. margin: NTRBLpx; 上下左右
   b) 内边距：padding 同margin
   c) 宽度：width:Npx;
   d) 高度：height:Npx;
   e) 盒子水平居中：margin:Npx auto Npx; BODY中的第一代子元素
   f) 弹性盒子：
6. 声明当前的盒子为弹性盒子：display: flex;
7. 子盒子的排列方式：flex-direction: row横向排列 / column纵向排列;
8. 弹性盒子的水平居中：justify-content: center;
9. 垂直居中：align-items: center;
   g) 盒子边框和内边距向盒子内部扩展：box-sizing: cotent-box / border-box;