day03
CSS
一、css简述
1、css是什么 ？ 有什么作用
HTML--页面结构，人的面部
CSS--美化页面，给人化妆
2、css：层叠样式表
层叠：一层一层叠加的
样式表：存储样式的地方，多个样式
给一个人的面部化妆：画口红，画眼影，打粉底
| | | |
HTML标签 样式1 样式2 样式3
css通常称为css样式或叠层样式表，主要用途设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、一级版面的布局等外观显示样式
CSS可以使用HTML页面更加好看，css+div布局更加灵活，更容易绘制出用户需要的结构
3、css作用：修饰HTML页面，更丰富多彩地展示超文本信息
二、CSS入门案例
1、创建一个HTML文件
2、在HTML上创建一个字体标签
3、字体标签中新增一个style属性，并修改style属性值
运行效果
三、为什么使用CSS代替HTML属性设置样式
因为HTML属性在单独使用时有一定的局限性，所以要配置css样式代码才可以展示更为丰富的效果
四、CSS的代码规范
1、放置规范
（1）在<style>标签内容体中书写css样式的代码 <style>标签放置在<head>标签中
2、格式规范
选择器名称{属性名：属性值；属性名：属性值；。。。。。}
选择器：即指定css样式作用在哪些HTML标签上
3、代码规范
属性名和属性值之间是键值对关系
属性名和属性值之间用：连接，最后;结尾
例如：font-size: 120px;
如果一个属性名有多个值，多个值使用空格隔开
例如：border: 5px solid red; （border设置边框的）
CSS注释： /* 注释内容*/ 等同于java的注释
五、CSS选择器
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设置边框的样式
格式： 宽度 样式 颜色；
例如 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样式代码"/>
适用环境：更加针对性修改某个标签的效果
<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文件路径" ： 表示CSS文件位置
使用范围：不同页面进行样式复用
作业
1 palte 2 bento 3 #fancy 4 place apple 5 #fancy pickle 6 .small
