html02

复习：
HTML标记
p h1~h6 font table>tr>td ul>li ol>li div
span form:input>typy :password radio checkbox file submit reset
select>option textarea
a img
date time month
属性:style bgcolor align text-align
width height style

1.css(Cascading Style Sheets)层叠样式表
*主要用来告诉浏览器如何解释HTML元素
*样式一般都写在样式表中
css其实就是给HTML元素化妆的

2.好处是什么？
提高代码的复用性
将内容与表现分离

3.如何去使用css?
1)行内式
在节点(标签)处添加style属性
--是定义在单个的HTML元素(标记)中

2)内联式
在HTML页面中的head节点中添加style节点
--定义在head中
如：<style>
p{color:red;}
</style>

3)外联式 -->推荐，提高代码的复用性(多个页面共用1个样式)
step1:定义一个外部样式表
step2:在HTML的head中通过link标记引入该css文件
检查：F12，network进行检查
通过F12->网络
刷新页面时加载两个文件：.html .css 文件
如果有1个文件未加载，表示加载时有问题，要么link没弄好，要么css有问题
<link href="01cssdemo.css" rel="stylesheet" type="text/css">
Chrome 里面是检查
foxfire里面是帮助

4.css语法
选择器{样式声明}
选择器{属性:值;属性:值;...}

5.css常用选择器
*元素选择器（又叫标签/标记选择器）
元素名
*类选择器
节点上有用一个类名，方可使用\
不同的节点需要同样的样式
如：
.y{color:yellow;}
*元素和类选择器可以合着使用
范围大的.范围小的{}
如：div.y{font-size:20px}
*id选择器
#id 如：#g{color:gree;}
*并集选择器(同一个样式作用于不同的各种元素)
选择器1,选择器2,...
如： .r，#d,input,div.g{}
*后代选择器
选择器1 (加空格) 选择器2
如：div span{font-size:40px;}
将div下的所有span节点变大
（不管处于多少级都会被选中）
*下一级选中器（儿子选择器）
选择器>选择器
如： div>span{color:red;}
找出div下一级的所有span
*伪类选择器（同一个元素在不同的状态下表现出来的样式）
:link ->指默认状态，未被访问
:hover ->指鼠标悬停 （这个每个单独的元素都可以用）
:active ->鼠标按下，未抬起
:visited ->访问之后，鼠标抬起之后
遵循LoVe HAte（爱恨原则）
:focus ->获取焦点
伪类选择器一般结合元素选择器一起用

6.css特性
*继承性 -> 继承颜色类，字体类
*层叠性 -> 同一个元素如果存在多个选择器对其进行了css设置，对于不冲突的样式，可以叠加
冲突的样式进行层叠覆盖，覆盖时，参考下一个特性(优先级)
*优先级 -> 行内>内部>外部
同一级：权重
id>class>标记
id的个数 class的个数 标记的个数
*继承过来的权重为0；
权重比较规则
1.看是否选中
选中，比权重 ->权重大的起作用，
权重一样大的情况->后来居上
没选中：比远近，近的起作用
一样近 ->比权重 ->权重大的起作用
权重一样大->后来居上
2.important权限无限大（慎用）

7.css声明
*边框 border
3要素 4方向
border-style:
border-width:
border-color:
border-top:
border-right:
border-bottom:
border-left:
合写方法：border:1px solid red;
当需要某个特别的样式时，先写统一样式
再写个别样式
*背景 background
background-color:red;
background-image:url("../day01HTMl/p1.jpg");
background-repeat:no-repeat;
background-size:50%;
background-position:center top;
background-attachment:fixed;
width:800px;
height:1200px;
合并写法：(有先后顺序要求,不一定全部要写，需要啥写啥，但是要注意顺序)
background : 色 图 铺 定 位 / 大小
background : red url("../day01HTMl/p1.jpg") no-repeat fixed center top /10%

*文本设置
line-height:34px;文本宽度变高,设置行高，基线
text-indent:2em;首行缩进2倍的自符

8.盒子模型
4元素： 宽 内边距 边框 外边距
width padding border margin
4方向： 上 右 下 左
若内容跟盒子边框有距离：padding
若盒子跟外部元素有距离：margin
ps:颜色
color:red
color:rgba (红，绿，蓝，透明)