作业
每日总结：
CSS
一、css简述
1、css是什么 ？ 有什么作用
HTML--页面结构，人的面部
CSS--美化页面，给人化妆
2、css：层叠样式表
层叠：一层一层叠加的
样式表：存储样式的地方，多个样式
css通常称为css样式或叠层样式表，主要用途设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、一级版面的布局等外观显示样式
CSS可以使用HTML页面更加好看，css+div布局更加灵活，更容易绘制出用户需要的结构
3、css作用：修饰HTML页面，更丰富多彩地展示超文本信息
三、为什么使用CSS代替HTML属性设置样式
因为HTML属性在单独使用时有一定的局限性，所以要配置css样式代码才可以展示更为丰富的效果
四、CSS的代码规范
1、放置规范
（1）在<style>标签内容体中书写css样式的代码 <style>标签放置在<head>标签中
2、格式规范
选择器名称{属性名：属性值；属性名：属性值；。。。。。}
选择器：即指定css样式作用在哪些HTML标签上
3、代码规范
属性名和属性值之间是键值对关系
属性名和属性值之间用：连接，最后;结尾
五、CSS选择器
1、基本选择器
元素选择器
HTML标签又叫HTML元素
元素选择器：即以HTML标签名作为选择器名称
作用：选择css样式代码，作用于对应标签签名的标签上
格式：标签名{/*CSS样式代码*/}
适用范围：适用于将相同样式作用在多个同名标签上
（2）id选择器
每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的
id选择器： 即以HTML的id的属性值作为选择器名称
作用：选择css样式代码，作用于某个规定id值得HTML标签上
格式：#id值 {/*CSS样式代码*/}
（3）类选择器
每个HTML标签都有一个class属性，class属性值即为类名
类选择器：即以HTML的类名（class属性）作为选择器名称
作用：选择css样式格式化代码作用于相对类名的HTML标签上
格式：.类名 {/*CSS样式代码*/}
六、边框属性
所有的HTML标签都有边框，默认边框不可见
border设置边框的样式
格式： 宽度 样式 颜色；
例如 vorder： 1px solid red; 表示1像素粗的实线的洪泽边框
线条样式：solid实线、none无边框、double双线边框
width 用于设置标签的宽度
height 用于设置标签的高度
background-color 设置标签的背景颜色
背景颜色设置的两种主流方式：
1、英文单词： red blue yellow
2、颜色代码 ： 格式 #红禄蓝 每一个颜色用凉粉16进制位数表示
例如 ff1100 红色颜色最重，绿色其次，蓝色几乎没有
七、布局
float
通常默认的排版方式，将页面中的元素从上到下一一罗列，二实际开发中，需要左右暗示进行排版，就需要使用浮动属性
格式：选择器（float：属性值;）
left：元素向左浮动
right：元素向右浮动
注意：因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，
所设置浮动以后，页面模式需要重新调整
八、转换
display
块元素：独占一行，常见 h1 p div ul
行内元素（内联元素）：只占自身大小，自动换行span a input
display属性可以使得元素在行内元素和块元素之间相互转换
格式：选择器{display：属性值；}
常用的属性值：
block：块元素
inline：行内元素
inline-block:行内块元素，既可以设置宽高，又不会独占一行
< img src=" " alt=" " />
none：元素将被隐藏，不会显示，也不占用页面的空间
visbility
hidden隐藏
隐藏的元素虽然不显示，但是它的位置会依然保持
九、字体
font-size 用于设置字体的大小
color：用于设置字体的颜色
十、CSS盒子模型
什么是盒子模型
所有HTML元素：我们都可以看成一个四边形，即一个盒子
用CSS来设置元素盒子的内边距，边框，外边距的样式的方式，称为盒模型
2、边框：
border：HTML元素盒子的框体
四个属性：
broder-top：上边框
broder-right：有边框
broder-bottom：下边框
broder-left：左边框
通用设置（简写）一次性设置上下左右边框样式
border:1px solid red; 1像素的实线红色边框
3、内边距
padding：HTML元素里的内容体到HTML元素边框的距离
四个属性：
padding-top： 上内边距
padding-fight：右内边距
padding-bottom：下内边距
padding-left：左内边距
通用设置（简写）一次性设置上下左右边框样式
padding： 10px；
4、外边距
margin：HTML元素边框到其他HTML元素边框的距离
四个属性：
margin-top： 上外边距
margin-fight：右外边距
margin-bottom：下外边距
margin-left：左外边距
通用设置（简写）一次性设置上下左右边框样式
margin： 10px；
十一、CSS和HTML的结合方式
内部样式
行内样式：通过标签的style属性来设置元素的样式
格式： <html 标签 style="css样式
游戏答案：
1 palte
2 bento
3 #fancy
4 place apple
5 #fancy pickle
6 .small
