CSS
一、CSS简述
1.CSS是什么?有什么作用？
HTML》》页面的结构》》人的面部
CSS》》美化页面》》给人化妆
2.CSS：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
给一个人的面部化妆：画口红、画眼影、打粉底
HTML标签 样式一 样式二 样式三
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.代码规范
属性名和属性值之间是键值对关系
属性名和属性值之间用：连接，最后；结尾
例如：font-size：120px；
如果一个属性名有多个值，多个值用空格隔开
例如：border：5px solid red；
CSS注释：/*注释内容*/ 等同于java的多行注释
五、CSS选择器
1.基本选择器
（1）元素选择器
HTML标签又叫HTML元素
元素选择器：即以HTML标签名作为选择器名称
作用：选择CSS样式代码，作用于对对应标签名的标签上
格式：标签名{/*CSS样式代码*/}
适用范围：适用于将相同样式作用在多个同名标签上
（2）id选择器
每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的
id选择器：即以HTML的id的属性值作为选择器名称
作用：选择CSS样式代码，作用于某个规定id值得HTML标签上
格式：#id值{/*CSS样式代码*/}
适用范围：适用于将样式作用于具有某个id的标签上（更有针对性）
注意：必须手动保证id值在本页面唯一（如果不唯一，会具有共同样式，但JS会出现问题）
（3）类选择器
每个HTML标签都有一个class属性，class属性值即为类名
类选择器：即以HTML的类名（class属性值）作为选择器名称
作用：选择CSS样式代码作用于对应类名的HTML标签上
格式：类名{/*CSS样式代码*/}
适用范围：适用于将样式一次作用在相同类名的标签上（即使标签名也不同也可以）
2.基本选择器的组合方式
层级关系（后代选择器）
标签和标签之间有层级关系，例如<html>标签的子标签为<body>标签
我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上
格式：选择器1 选择器2 .......{/*CSS样式代码*/}
表示选择器1下边的选择器2.......
六、边框属性
所有HTML标签都有边框，默认边框不可见
border设置边框的样式
格式：宽度 样式 颜色；
例如：border：1px solid red；表示1像素粗的实线红色边框
线条样式：solid实线、none无边框、double双线边框
width用于设置标签的宽度
height用于设置标签的高度
background-color 设置标签的背景颜色
背景颜色设置的两种主流方式：
1、英文单词：例如red blue yellow
2、颜色代码，格式：#红绿蓝，每一个颜色用两个16进制位数表示，例如#ff1100
表示红字ff、绿色11、蓝色00，红色颜色最重、绿色其次、没有蓝色
七、布局
float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右进行排版，就需要使用浮动属性
格式：选择器（float：属性值）
常用属性值：
none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动
注意：因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，所设置浮动以后，页面样式需要重新调整
八、转换
display
块元素：独占一行，常见：h1 p div ul li ......
行内元素（内联元素）：只占自身大小，自动换行，常见：span a input......
display属性可以使元素在行内元素和块元素之间相互转换
格式：选择器{display：属性值；}
常用的属性值：
block：块元素
inline：行内元素
inline-block：行内块元素，即可以设置宽高，又不会独占一行
<img src=“”alt/>
none：元素将被隐藏，不显示，也不占用页面空间
visibility
hidden隐藏
隐藏的元素虽然不显示，但是它的位置会依然保持
九、字体
font-size：用于设置字体的大小
color：用于设置字体的颜色
十、CSS盒子模型
什么是盒子模型
所有HTML元素，我们都可以看成一个四边形，即一个盒子
用CSS来设置元素盒子的内边距、边框、外边距的样式的方式，称为盒模型
2、边框
border：HTML元素盒子的框体
四个属性：
border-top：上边距
border-right：右边框
border-bottom：下边框
border-left：左边距
通用设置（简写）：一次性设置上下左右边框样式
border：1px solid red； 1像素的实线红色边框
3、内边距
padding：HTML元素里的内容体到HTML元素边框的距离
四个属性：
padding-top：上内边距
padding-right：右内边框
padding-bottom：下内边框
padding-left：左内边距
通用设置（简写）：一次性设置上下左右内边距距离
padding：10px；
4、外边距
margin：HTML元素边框到其他HTML元素边框的距离
四个属性：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
通用设置（简写）：一次性设置上下左右外边距距离
margin：10px；
十一、CSS和HTML的结合方式
内部样式
行内样式：通过标签的style属性来设置元素的样式
格式：<html>标签style=“css样式代码”/>
适用环境：更加针对性修改某个标签的效果
<style></style>标签方式：当某些样式在页面中被多个标签重复使用，统一写入到style标签中
格式<style>css样式代码</style>
适用环境：适合页面中进行样式复用
外部样式
<link/>链入式，css为扩展名的外部样式表文件中，通过<link/>引入
格式：<link rel="stylesheet"type="text/css"href="css>
rel="stylesheet“ 固定值，表示样式表
type=“text/css” 固定值，表示CSS类型
href 表示CSS文件位置
适用范围：不同页面进行样式复用
游戏
1，plate
2，bento
3，#fancy
4，plate空格apple
5，#fancy空格pickle
6，apple.small
7,orange.small
8.bento orange.small
9.plate,bento,plate
