html与css初阶

块状元素：占据一行，换行；
div、ul、ol、li、dl、dt、dd、h1~h6、p、form、hr、。。。
**行内元素：**在一行，不换行；
b、em、img、input、a、sup、sub、textarea、span。。。
背景样式 background
1、background-color 颜色值 颜色作为背景颜色
2、background-image 图片位置 图片作为背景图片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4、background-attachment scroll fixed 背景是否随着滚动条滚动
Fixed 文字滚动，背景图片不随着滚动
scroll 背景图片随着文字一起滚动
5、background-position 背景图像的起始位置
6、background 背景样式的值是复合了属性值的组合 1 2 3 4 5
文本样式的属性：
Color 表示颜色的内容 设置文本颜色
Direction ltr rtl 文本的方向/书写的方向
Letter-spacing npx(注意：n可以是负数) 字符间距
Line-height npx 行高（行间距）
Text-align left,right ,center, justify（两端对齐）
文本修饰：
1、text-decoration none,underline,overline,line-through 文本的修饰：下划线
2、text-shadow h-shadow v-shadow blur color 文本设置阴影
3、text-transform none,capitalize,uppercase,lowercase 改变字母大小写
4、text-indent npx,nem（em表示字符单位） 首行缩进
字体样式：
1、font系列
1、font-family ；隶书、宋体、楷体等字体 设置字体
2、font-style normal italic oblique 规定斜体的文本
3、Font-weight normal bold 100-900 文本加粗
4、font-size npx 字体大小
列表样式
1、list-style-type none,disc,circle,square,decimal…. 设置列表项目的外观
2、list-style-position inside,outside 列表符号的位置
3、list-style-image url,none 把图片设置为列表项目的标记
4、list-style 同前面三个 简写属性，涵盖以上三个列表样式属性
伪类选择器
1、a:link 未访问的链接
2、a:visited 已经访问过的链接
3、a:hover 鼠标移动到连接上（浮动，悬停）
4、a:active 向被激活的元素添加样式
5、:focus 选择拥有键盘输入焦点的元素
结构性伪类
1、:first-child 选择元素的第一个子元素
2、:last-child 选择某个元素的最后一个子元素
3、nth-child(n) 选择某个元素的一个或者多个特定的子元素
4、nth-last-child(n) 选择某个元素的一个或者多个特定的子元素 从这个元素的最后一个子元素开始
5、:first-of-type 选择一个上级元素下的第一个同类子元素
伪元素选择器：
1、::selection 选择指定元素中被用户选中的内容
2、::before 可以在内容之前插入新的内容
3、::after 可以在内容之后插入新的内容
4、::first-line 选择指定选择器的首行
5、::first-letter 选择文本的第一个字符
Css其他选择器
1、id * 选择指定元素中被用户选中的内容
2、逗号选择器 , 联合选择器
3、空格 子孙（后代）选择器
4、> 子选择器（不是子孙后代）
5、+ 同辈，兄弟选择器
6、[] 属性选择器
选择器的优先级
1、！important
2、行内样式
3、ID
4、类 class
5、标签
6、通配符 *
7、浏览器默认属性
Overflow的设置
1、visible 默认值，内容不会被修剪，会呈现在元素框之外
2、hidden 超出的部分进行隐藏
3、scroll 不论是否需要，都显示滚动条
4、auto 按需显示滚动条以便查看其余的内容
绝对定位：
top: 150px;
left: 150px;
position: absolute; 参照物
Css轮廓 outline
作用：绘制于元素周围的一条线，位于边框的边缘的外围，可起到突出元素的作用
1、dashed 虚线轮廓
2、dotted 点状轮廓
3、solid 实线
4、double 双线
5、none 无
css边框
1、border-left border-right border-top border-bottom
2、作用：设置DIV的边框的边线宽度，颜色，虚线，实线等样式css属性
border-bottom
1、solid 设置下边框为实线
2、none 无
3、double 双线边框