css级联样式表和常用属性设置

一.页面布局
1.div 盒子模型，定义页面布局的一块区域范围
<div></div>,快级标签

与table表格布局：整齐，规则，需要行列组成，布局死板

2.css
(1).内联样式，行内样式
写在标签内，通过style属性定义样式
<div style="width: 1000px;height: 500px;background: blue"></div>
(2).内部样式
写在<style></style>标签中，<style>标签定义样式
需要样式选择器 选择body中的标签
样式选择器类型：
A.通配符选择器：定义页面中的所有标签
*：表示所有标签
*{ 样式属性：属性值....}
EG：   /*css注释*/
       /*通配符:一般清除页面中margin和padding的值*/
       *{ color: blue;margin: 0;padding: 0;font-family: 新宋体;}
B.标签选择器：通过标签；在定义样式
标签{属性：值
}
EG:    ul{ width: 1000px;height: 50px;background: white;}
       li{ font-family: 微软雅黑;}
C.类选择器：通过class定义类名，通过类名来定义样式
<标签 class=“类名”></标签>
.类名{属性：值}
EG：   <li class="c1">类选择器</li>
      /*类*/
       .c1{ background: green;}
      /*标签中必须满足有两个类选择器*/
         .c1.c2{font-weight: bolder;}

D. id选择器：通过id属性定义id名，通过id名定义样式
id前缀是#
#id名字{属性：值}
id选择器的名字是唯一的，不能重复
EG：  /*id*/
         #d1{ color: yellow;}
       <li id="d1" class="c1 c2">类选择器组合使用</li>
E.分组选择器：同时定义多个选择器
选择器1，选择器2，选择器3 ....
注意：通过逗号分隔
#d1，#d2，#d3...
F.派生选择器：指派标签中，需要定义的标签样式
父级标签 标签{}
div li{属性：值}
EG：
    /*派生:指派 定义div 中的 p 标签的样式*/
       div p{width: 100px;height: 10px; border: 1px solid;}

  注意：     /**使用派生选择器，优先级 要注意添加父级选择器，不然没有优先级效果/
           #d1 a{font-size: 30px;}
           #d1 .ca{font-size: 50px;}
           #d1 #da{font-size: 80px;}

G：伪类选择器：定义样式的效果
样式效果：hover 鼠标悬停，focus 点击获取焦点
选择器：效果{样式}
比如：hover{}
#d1：hover{}----当鼠标悬停到#d1标签上，定义#d1样式
EG： /*伪类：效果*/
       #d1：hover{font-size: 88px;}
       #inp:focus{outline: antiquewhite 20px solid;}
注意：优先级：通配符选择器<标签选择器<类选择器<id选择器<内联样式

3.外部样式
写在css样式文件中，在HTML文件中通过link标签引入
1.创建css文件
2.通过link标签引入css文件
<link rel="stylesheet" href="css02.css" type="text/css">
href：引入文件路径
type：引入文件的类型
rel：引入文件与本文件的关系
stylesheet：级联样式表
text/css：文本样式类型
3.在css样式文件中通过选择器定义样式
<link href="../html01/image.png" rel="icon">
icon：关系式标题小图片

二盒子模型设置距离
1.padding
在标签中设置内容与外标签的距离
距离边框的方向：top，bottom，left，right

设置方式：
1）padding-方向：距离；设置距离方向的距离
2）padding：值1；内边距距离四个方向是指1的距离
   padding：值1 值2；上下方向是指1 左右方向是值2
   padding：值1 值2 值3；上方向是值1，左右方向是值2，下方向是值3
   padding：值1 值2 值3 值4；四个方向对应：上右下左

   注意：使用内边距padding，标签范围会变大，注意页面布局
2.margin
外边距：标签以外的距离。本标签与其他标签的距离
可设置的外边距方向：top，bottom，left，right
设置方式：与padding类似
1)margin-方向
2）margin：值
margin: auto;居中

三。定位
position标签的位置属性
属性值：static，relative，absolute，fixed
1.static：默认定位，静态定位；系统自动生成
2.relative:相对定位：相对于标签的原位置的左上角（0,0）进行定位，保留标签原位置
与定位的方向top，bottom，left，right结合使用
3.absolute；绝对定位
1）.默认：以页面body标签的左上角来定位
2）.当父标签的position不是static，以负标签进行定位
3）.不保留原位置
4.fixed固定定位，确定定位
1）.以整个页面整体进行定位
2）.不会随着滚动条的滚动发生位置改变,固定在页面中
3）不保留原位置

四.隐藏，溢出
隐藏：display（不保留位子的隐藏）和visibility（保留位子的隐藏）
display：none 隐藏/block 显现
visibility：hidden 隐藏/visible 显现
溢出：overflow；标签中的内容超出了标签范围默认是可见
overflow:hidden/visible/scroll溢出的内容隐藏/显现/以滚动跳的方式查看


层级：z-index
处理标签显示，覆盖优先级
z-index的值越大，层级越高
z-index：正整数

五.其他常用属性设置
1.边框
border：颜色 大小 样式
边框占用px位置空间
border：red 1px solid
       solid：实线
       dashed：虚线
       ...
border-radius：大小值；设置标签中边框四个角的弧度，圆角。
border-top-left-radius：设置左上角的弧度
border-bottom-right-radius：设置右下角的弧度
2.轮廓
outline：颜色 大小 样式；与边框设置是一致
与边框一致，区别：轮廓不占用空间，边框占用空间