css:层叠样式表-网页布局基础

css:层叠样式表：
一、写法分类：
1.内联（行内，写在标签里面，以属性的形式表现，属性名是style）
例：<table style="background-color: aqua" >
<tr><td>123</td></tr>
</table>

例：<span id="biaoqian" style="color: #F40F13 ;font-size: 20px">123</span>
2.内嵌(写在head标签里面，以标签的形式表现，标签名style)
例：<style type="text/css">
</style>
3.外部引用
二、
样式格式：
样式名1：样式值1；样式名2：样式值2；
三、
（1）选择器（内联和外部引用所用）：
选择器{
样式名1：样式值1；
样式名2：样式值2；
}
选择器类型：
标签选择器：标签名{}
id选择器：#id属性值{}
class选择器：.class属性值{} ---class="dd sss"(可用多个样式)
并列选择器： 选择器1,选择器2{样式内容}
后代选择器： 选择器1 选择器2 {}----------在选择器1里找到 选择器2的样式
直接子标签选择器： 选择器1>选择器2{}
属性选择器： 选择器[属性名='属性值']{}
四、
css样式优先级（权值越高优先级越高）：
行内：-----1000
id :-----100
class:-----10
标签：-------1
*（通用选择器）:--0
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
五、
css一般样式：文本，背景，字体，列表
（1）一般样式标签背景
background-color
background-image css选背景是相对于css文件本身寻找
background-repeat
background-attachment
background-position
简写：
background：color image repeat position
（2）一般样式文本
text-*
text-color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
（3）一般样式字体：
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
（4）一般样式列表：
list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
initial 将这个属性设置为默认值。
inherit 规定应该从父元素继承 list-style 属性的值。

布局：浮动，定位，显示，层级,轮廓
1.浮动：float:left right(设一个父标签 设定宽高，里面可以随便浮动)
超出部分： overflow: hidden隐藏 scorll加滚动条
overflow-x:
overflow-y:
盒子模型：
从里到外：内容->内边距->边框->外边距
对应样式：内容->padding->border->margin
盒子模型的样式分上下左右
top left right bottom
盒子模型自适应：box-sizing:border-box
margin 第一个子标签设置magin会作用到父标签
2.定位

postion:
绝对定位：fixed ：（相对窗口定位通过上下左右调位置）
absolute：（相对body定位-相对于最近的有position样式属性的父标签（给父标签加一个relative）定位 到body为止）
相对定位：relative 相对自身定位 通常用来限制子标签的absolute
有自身位置，通常用来微调
3.层级
z-index:值---值越大越靠上层
4.显示
display
visibility

布局页面的步骤   即大色块 小色块 ... 内容
布局：浮动，定位，显示，盒子模型，层级
浮动: float : left right
设一个父标签 设定宽高，里面随便浮动，
超出部分：overflow: hidden scorll
overflow-x:
overflow-y: