1、基础知识css的引用方式1行内样式写在行类标签内部div stylecolor: red;红色文字/div2内部样式 写在 HTML 的head里的style标签中 → 适合单个页面的样式设置3 外部样式 :写在独立的.css文件中通过link relstylesheet hrefcss文件地址引入 → 开发必备样式和结构分离一个 css 文件可给多个页面用代码复用2、选择器2种A. 基础选择器3种在{}内写入样式属性1全局选择器*{ xxxx }2元素选择器p{ xxxxx } div, b, a, img, body......image标签用法3类选择器(特点可作用多个元素内也可作用在不同元素间如p,h2等等: .point{ xxxxx } p classpointxxxx/p4id选择器特点只能使用一次不能重复多次3和4的选择器类型或id起名都不能以数字开头B. 复合/合并选择器1) 并集选择器两个或多个元素想赋予同样的特点如p,h3{ xxxx }选中所有的p和h32) 交集选择器: ”子集.母集“如div.box选中 class 是 box 的 div3) 关系选择器后代选择器子代选择器相邻兄弟选择器通用兄弟选择器3.1后代选择器”父 后代{}“如ul li{ xxxx } ul里面的所有li标签都生效不管是ul里的儿子li还是ol里ul的孙子li都生效3.2子代选择器“父子{ }”3.3相邻兄弟选择器“兄弟1兄弟2{}”注意必须对向下来说相邻并且是兄弟图中只有第一个p标签被修饰了3.4通用兄弟选择器“兄弟1~之后所有的同一类型兄弟{ }”C. 选择器优先级不同选择器同级选择器最后一个覆盖前一个3、样式属性1. 字体样式color(字体颜色)、font-size(字号)、font-weight(加粗)、font-style(字体样式)、font-family(字体如 微软雅黑)、text-align(文本居中 / 左 / 右)、 表格属 性a. 1颜色表示形式3种字母单词#十六进制常用rgb/rgba(有透明度b. 2字体大小最小12pxc. 3文本粗细d. 4字体样式i标签默认斜体e. 5文本属性ⅰ. 水平对齐方式text-align--居左居右居中文本修饰text-adecoration--下划线上划线删除线文本大小写:text-transform--开头大写全部大写全部小写文本缩进text-indent--首行文本缩进两个词是30px)表格属性——边框外内表格长宽也可用padding内边距边框与文字的间隔来设置文字位置水平居中垂直居中颜色边框颜色背景颜色文字颜色2. 盒子样式div/divwidth(宽 如300px)、height(高 如400px)、background(背景色 / 背景图)、border(边框)a. 1) 背景属性b. 背景图片引用方式background-image:url( 同级文件的图片名 );c. 图片显示位置即显示图片的左上部分还是中间部分等等d. 图片填充默认以左上拉过来填充/水平方向将空白处都填充/垂直方向填充完空白/不平铺填充e. 图片属性大小自定义length长percentage百分比cover(常用)不拉伸图片裁剪掉部分保证填充尽量多contain保证原图片全部完整性再尽量填充多3. 边距样式margin(外边距标签和标签之间的距离)、padding(内边距标签内容和边框的距离) → 【重点】margin 和 padding 是布局的核心必须理解4.盒子模型内容阐释蓝色部分内容padding内边距透明的:内容与相框的距离 格式一个值时上下左右两个值上下左右 也可以用padding-left等来设置不同位置的边距border边框相册边框 格式大小5px) solid(实线 颜色blue)margin外边距是透明的不同盒子之间的距离--相框外面留白的部分 格式空白透明的一个值(15px)上下左右 两个值上下左右 也可以margin-left等弹性盒模型定义针对一个大盒子中的一堆小盒子的设置方便更好的管理这些小盒子;使用在大盒子的类选择器中加入“ displayflex; ;默认是水平摆放语法这堆小盒子不同的摆放方式写在大盒子上的属性flex-direction属性小盒子摆放顺序从左到右/从上到下使用flex-direction:column;注意原红绿蓝 反转后蓝绿红justify-content属性垂直摆放在顶部中部还是底部align-items属性水平摆放居左/居中/居右注意以上两个属性只能在弹性盒子大盒子中才能生效。如果要让盒子在页面中居中可以用 margin0 auto ; 小盒子上的属性flex权重2使用如图脱离文档流当盒子形式/布局 出现不符合我们预期的情况就采用这种方法有三种解决办法浮动固定定位绝对定位。浮动定义在文档流(该页面)上再增加一个浮动页面让对应box在浮动页面上替代原页面的该box特点使用在style-的box里写float : left/right ; -----在整个大(浮动)页面里靠左上角或右上角左浮动例子无浮动时有空隙 有浮动时无空隙--例二应用将box从垂直到横向摆放(注意考虑宽长够不够)--在div中加入float: left即可还有 ul li{float :left;(margin:15px;)} 清除浮动浮动的缺陷父级塌陷影响后续盒子多为子级盒子当然也有父级同级的盒子方法clearboth/left/right;清除浮动----取消元素即子集所在区域浮动在父级盒子中加入”overflow:hidden; clear:both; “----取消父级所受影响的浮动只对父级生效对父级的其他子集无效----其子级可以通过添加clearboth来解决伪对象方式: .类名after{....如下.....} 也是只针对父级对其子级无效子级添加clear....解决)定位----relative(文档流, 脱离文档流的两个)absolute, fixed使用格式 position: relative; left/top:100px(距离左边/顶部100px); 注意绝对定位有多层设置几层就有几层VS浮动只有两层一层文档流一层是浮动层一般后面渲染的会覆盖前面渲染的固定定位一般一个页面只会有一个固定定位固定在页面的固定位置页面滑动也一样固定在那个位置上如果要前面渲染的覆盖后面的可以用 z-index: ....数字....; 数字越大优先级越大最大数字的那个盒子就会在最上(表)面----》子级元素的相对定位和绝对定位是以上一级父级元素为基准的(如果父级调整了就会跟着父级运动)、例子--》多了个margin-left:100px---css3新特性圆角 border-radius : 20px (小米图标-》变成圆写100%或50%语法规则四个值左上-顺时针两个值(左上对角线-顺时针.右上) 左上右下右上左下阴影box-shadow向框添加一个或多个阴影“ box-shadow : h-shadow(水平阴影) v-shadow(垂直) blur(模糊距离) color(阴影颜色)四个值同时写的效果如图正数右下阴影。负数左下阴影动画keyframes 名{ 0%{}50%{}100%{} }animation执行动画代码红绿蓝颜色改变hover:鼠标滑上去改变效果的属性如改变字体颜色或背景颜色动画执行/暂停0%的时候还可以添加width:200px; ,50%时可添加width400px;例子”呼吸“opacity:透明度0~10.20.51媒体查询css3特性一个响应式界面随页面的缩放自动发生不同的变化加载不同的样式——可用于电脑---》手机格式根据pc端的界面去缩放若要按原比例去显示300px到pc端还是300px不缩放语法768px是手机样式768~992px是平板样式992px是电脑样式【例子】在电脑上有a盒子/段落p比如广告想要在手机端上取消那在768px内容中加上.p1{ display:none; }4、精灵图/雪碧图css sprite)定义.作用是一种网页图片的处理方式。在(引入)一张有零散图片/图标的大图里按需得到自己需要的小图片如集合表情包找到开心表情(原解释允许你将一个页面涉及到的所有的零星图片都包含到一张大图中去)块级盒子的位置是固定的以块级盒子为基准图片移动至盒子处5、字体图标常用字体图标阿里字体图标库http://confont.cn/网址使用(上方图片有key:两条横线引用存有文字图标的文件再在行内引用改变图标大小/颜色方框内用类名实现实用案例foundtext-align:center; ----在父级盒子中添加可以使之后的子级盒子文字、图片都水平居中只有块级盒子加上 margin-top: 20px;会塌陷像img元素这种不会现象阐释明明给块级盒子写了 margin-top:20px结果 子盒子和蓝色父盒子顶部紧紧贴在一起没有 20px 间距父盒子整体离页面顶部多了 20px相当于父盒子被加上了margin-top:20px。 这种现象就叫做CSS 外边距塌陷也叫 外边距合并 / 穿透而且margin-bottom也会出现同样的塌陷问题。原因 浏览器解析 CSS 时认为父盒子的顶部和子盒子的顶部是「同一个边界」如果这个边界上没有阻挡子盒子的margin-top就会「溢出」到父盒子外部表现为父盒子整体下移。解决办法浮动(给父盒子加overflow: hidden)/增加外边距加 margin-top/buttom 的时候一定要注意会不会塌陷