css学习来源--黑马pink讲前端---素材内容均来自pink老师css初识设置html文本内容(字体大小对齐方式)图片外形(宽高边框样式边距)及版面布局和外观显示样式选择器指定css样式html标签花括号是对该对象的具体样式一.选择器分类:1.基础选择器a.标签选择器b.类选择器(class属性)c.id选择器(只能出现一次)d.通配符选择器2.复合选择器a.后代选择器b.子选择器c.并集选择器d.伪类选择器二.字体属性字体大小font-size字体粗细 font-weight字体样式 font-styleem,i 改为不斜体字体复合属性 font:font-style font-weight font-size(!)/line-height font-family(!)三.文本属性1.颜色 color2.对齐文本 text-align3.装饰文本 text-decoration4.文本缩进 text-indent 一般首行缩进em: 相当于一个文字的大小5.行间距 line-height四.css引入样式1.行内样式(行内式)2.内部样式表(嵌入式)3.外部样式表(链接式)四.元素显示模式1.块元素2.行内元素3.行内块元素显示模式转换五.背景1.背景颜色 background-color2.背景图片 background-image3.背景平铺 background-repeat4.背景图片位置 background-position5.背景图像固定 background-attachment6.背景复合写法7.背景半透明垂直居中六.三大特性1.层叠性2.继承性3.优先级七.盒子模型网页布局1.准备好相关网页元素(box) 2.利用css设置盒子样式,摆放相应位置 3.装内容css本质为一个盒子封装html元素1. 边框border-style : solid 实线边框dashed 虚线边框dotted 点线边框a.边框的简写b.边框分开写c.层叠性d.细线边框合并相邻边框是公共边与单个边框粗细相同e.边框影响盒子大小2.内容3.内边距(padding)边框和内容间的距离a.简写b.内间距影响盒子大小内边距会影响盒子模型的大小内间距会加宽高得最后的宽高特殊情况如果盒子本身没有指定width/height属性则姿势padding不会撑开盒子大小div p 不写长宽继承父亲不会撑大盒子4.外边距(margin)a.简写方式与padding相似b.实现水平居中行块元素1.必须指定宽度width2.左右外边距都设置为automargin: 0 auto;行内元素/行内块元素给其父元素水平居中: text-align: center;c.外边距合并margin定义块元素的垂直外边距可能出现外边距的合并d.嵌套块元素垂直外边距的塌陷 153e.清除内外边距网页元素会自带默认的内外边距不同浏览器默认值不同行内元素尽量只设置左右内外边距文件保存自动对齐设置