top color：CSS 2024-04-18 09:53:19 0 0 一、CSS基本介绍： 1、css 层叠样式表 级联样式表 简称样式表 Cascadding Style Sheets 2、作用 ① 实现了内容与表现的分离 ② 提高了代码的可重用和可维护性 3、文件后缀 .css 4、css由浏览器解析执行，由上而下，由左往右的顺序 5、css不区分大写，建议小写 6、css的注释 /* 注释 */ 7、特点 ① 继承性 子元素可以继承父元素的样式 ② 层叠性 一个元素可以设置多个样式 ③ 优先级 样式冲突时，优先级高的样式生效 优先级相同时，后面的样式生效 8、语法 ① 属性：属性值；属性：属性值； ② 选择器{ 属性：属性值； 属性：属性值； 属性：属性值； } 二、HTML中引入CSS的方式 1、行内样式 内联方式(JS常用，css不常用，因为重用性低) 利用HTML的style属性（除了br,其他标签都有的属性） 语法： <开始标记 style=“CSS属性：属性值；”> css</结束标签> 2、内部方式 <head> <style> 选择器{ 属性：属性值； 属性：属性值； 属性：属性值； } </style> </head> 3、外部方式，实现了内容与表现的完全分离，提高了代码的可用性和可维护性（推荐使用） ① 新建css文件 ② head 中用link引入css文件 <head> <link rel="stylesheet" href="css/test01.css"> 引入网页的图标：<link rel="icon" href="img/plan.jpg"> </head> 引入方式的优先级： 行内样式>内部方式（外部方式） 内部方式和外部方式的优先级相同，写在后面的样式生效 三、基础选择器 1、全局选择器 *{} 2、id选择器 #box{} 3、类选择器 .box{} 4、元素选择器 p{} 5、合并选择器 p,div{} 6、交集选择器 p.box{} 选择器的优先级： 行内样式>ID选择器>类选择器>元素选择器>全局选择器 四、字体的属性 1、继承性（自己有样式不会继承父元素） ①字体颜色 color ②字体大小 font-size ③字体是否加粗 font-weight ④字体样式(是否倾斜) font-style ⑤字体 font-family color: ① 关键字：red,blue ② 十六进制 ：0-9 a-f #000000 黑色（简写：#000） #ffffff 白色 （简写：#fff） ③rgb() 取值：0-255 rgb(0,0,0) 白色 rgb(255,255,255) 黑色 (三原色) ④rgba() a透明度 取值：0-1, 0：完全透明, 1：不透明, 0.18 简写.18 font-size:16px（默认） px:绝对单位，像素 em:相对单位 默认1em=16px font_weight: 取值： normal 默认值 bold 加粗 100-900 400=normal 700=bold font-style: 取值： normal：默认 italic:倾斜 字体：默认宋体 font-family:字体1，字体2。。。； 注意： 当字体包含空格，必须加引号 五、文本的属性 1、text-align 取值： left right center 2、text-decoration 取值： none:默认不显示 underline：加下滑线 overline：加上划线 line-through：删除线 3、text-transform 取值： none：默认 uppercase 所有字母大写 capitalize 首字母大写 lowercase 所有字母小写 4、text-indent 属性规定文本块中首行文本的缩进。 注意： 负值是允许的。如果值是负数，将第一行左缩进。 六、列表属性（可以写页脚和导航条） 1、设置项目符号 list-style-type：none 2、设置项目符号为图片 list-style-image：url(""); 3、设置项目符号的位置 list-style-position：outside/inside 4、简写 list-style：none； 七、表格属性 1）边框 border:width style color; 2）元素的大小 width:; height:; 3）背景属性 background-color:; background-image:; 4）内容距单元格的距离 padding:; 5）单元格之间的距离 border-spacing:; 6）元素内容水平对齐方式 text-align:left|center|right: 7）单元格内容垂直对齐方式(写在tr或者td上) vertical-align:middle|top|bottom; 8）边框折叠(相当于cellspacing="0") border-collapse:collapse; 八、背景属性 1、background-color：transparent（透明） 背景图颜色 取值： ① 关键字：red,blue ② 十六进制 ：0-9 a-f #000000 黑色（简写：#000） #ffffff 白色 （简写：#fff） ③rgb() 取值：0-255 rgb(0,0,0) 白色 rgb(255,255,255) 黑色 (三原色) ④rgba() a透明度 取值：0-1, 0：完全透明, 1：不透明, 0.18 简写.18 2、background-image：url("") 背景图图片 默认水平平铺（背景图小，背景图大 只显示从左上角到背景图片大小位置） 背景图片优先级高于背景颜色 3、background-size 背景图大小 默认跟图片大小一样 background-size：x y 单位：px,% cover（背景图片覆盖整个背景区域，但背景图片可能显示不全） contain（背景图优先级高，但背景区域可能覆盖不全） 当只取一个值，另外一个值等比例缩放 4、background-attachment 背景图是否固定 默认滚动 background-attachment：scroll/fixed（固定） 5、background-position 位置 默认左上角 background-position：x y 单位：px,% left center right top bottom 当支取一个值，另一个为center 背景图片默认位置 0 0 取正值往右下 反之左上 6、background-repeat 背景图是否平铺 默认平铺：repeat no-repeat ：不平铺 （常用） repeat-x：水平方向平铺 repeat-y:垂直方向平铺 7、background 背景图简写 background ：color image size fixed position repeat （没写的取默认值） 当背景图片大小或背景图片定位取值为px 或百分比值时，一般不简写 当简写属性跟单个属性同时存在，单个属性写在简写属性下面 九、关系选择器 1、后代选择器 空格 选择器1 选择器2{} 范围：选中所有后代 2、子代选择器 > 选择器1>选择器2{} 范围：选中所有直接子代 3、相邻兄弟选择器 + （相邻的后一个兄弟） 选择器1+选择器2{} 范围：评级 选中相邻的后一个兄弟 4、通用兄弟选择器 ~ 选择器1~选择器2{} 范围：选中后面所有兄弟 十、其他属性 1、内容溢出-overflow 设置溢出的内容 visible 默认值 溢出 hidden 溢出部分隐藏 (开启BFC格式:独立的一块，子元素的变动对父元素没有影响) auto 自动 内容溢出，显示滚动条；内部不溢出，没有滚动条 scroll 滚动条 2、white-space 一行文字溢出，省略号显示 ①文字在同一行显示 white-space:nowrap; ②溢出部分隐藏 overflow:hidden; ③文字溢出 text-overflow:ellipsis; 3、行高-一行文字的高度 属性 line-height-继承性 行高等于高，一行文字垂直居中 取值px number 例如：line-height:2; 相当于 line-height:32px; 4、元素透明度 例： opacity：.88 opacity:; 取值0-1 0：完全透明 1:不透明 注意和rgba的区别 5、字符之间的距离 letter-spacing:; 可以取正负 */ .box{ letter-spacing: -10px; } 5、伪类选择器 冒号链接，表示一个状态 :link 点击之前(只适用于a) :visited 点击之后(只适用于a) :hover 鼠标悬停(适用于所有元素) :active 鼠标按下(适用于所有元素) 当四个选择器同时存在于一个元素，必须按着先爱后恨的原则(L_V_H_A) 例： /*点击之前*/ a:link{ color: pink; } /*点击之后*/ a:visited{ color: palegreen; } /*鼠标悬停*/ .box:hover{ background-color: green; color: red; opacity: .5; } a:hover{ color: deepskyblue; } /*鼠标按下*/ .box:active{ background-color: deepskyblue; } a:active{ color: green; } CSS3新增伪类选择器 :first-child 第一个子元素是... :last-child 最后一个子元素是... :nth-child(number|odd|even|倍数) 第几个子元素是... :first-of-type 第一个子元素 :last-of-type 最后一个子元素 :nth-of-type(number|odd|even|倍数) 第几个子元素 :only-child 唯一一个子元素是... :nth-last-child() 后面第几个子元素是... :nth-last-of-type() 后面第几个子元素 :empty 空的子元素 :not(选择器) 配合表单 :focus 获取焦点时的样式 :checked 被选中时的样式 ::selection 内容被选中 十一、盒模型 1、标准盒模型 w3c盒模型 1）组成部分 content+padding+border+margin 2）content 内容区域 width:; 元素的宽度 height:; 元素的高度 min-width:; 最小宽度 max-width:; 最大宽度 min-height:; 最小高度 max-height:; 最大高度 块级元素可以设置宽高，行内元素设置宽高不生效 块级元素默认宽度为100%，行内元素默认宽度由内容撑开 块级元素和行内元素的高度默认都由内容撑开 3）border 边框 border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双实线)|none(不显示); 边框的样式 必须属性 默认3px 黑色 border-width:; 边框的宽度 border-color:; 边框的颜色 简写：border:style color width; 设置四周的边框(边框下面有背景颜色) 单边的边框： border-top:width style color; border-top-width:; border-top-style:; border-top-color:; border-bottom:width style color; border-bottom-width:; border-bottom-style:; border-bottom-color:; border-left:width style color; border-left-width:; border-left-style:; border-left-color:; border-right:width style color; border-right-width:; border-right-style:; border-right-color:; 4）padding 内边距 不能取负值和auto 设置内容距边框的距离 语法： padding:value; 四周 padding:value value; 上下 左右 padding:value value value; 上 左右 下 padding:value value value value; 上 右 下 左(顺时针) padding-top:; padding-right:; padding-bottom:; padding-left:; 注意：padding会撑大容器 5）margin 外边距 可以取正负，auto 设置元素之间的距离 margin是透明的 语法： margin:value; 四周 margin:value value; 上下 左右 margin:value value value; 上 左右 下 margin:value value value value; 上 右 下 左(顺时针) margin-top:; margin-right:; margin-bottom:; margin-left:; 应用： ①块级元素水平居中 margin:0 auto; 注意： ①垂直方向上外边距合并 当垂直方向上外边距相撞时，取较大值 (浮动元素不合并) ②margin-top问题 6）实际大小 宽度：width+padding+border+margin 高度：height+padding+border+margin 2、怪异盒模型 1、怪异盒模型 IE盒模型 1）组成部分 content+padding+border+margin 2）实际大小 实际宽度：width+margin width包含了border和padding 实际高度：height+margin width包含了border和padding 3）盒模型的转换 box-sizing:content-box; 默认值 标准盒模型 box-sizing:border-box; 怪异盒模型 3、全局样式 第一个子元素设置margin-top，父元素会跟着一起下来 解决： 1）父元素加overflow:hidden;(开启BFC格式，变成独立的一块，子元素不会影响父元素) 2）父元素或者子元素加浮动(开启BFC格式，变成独立的一块，子元素不会影响父元素) 3）父元素加border:1px solid transparent; 4）父元素加padding-top:1px; */ .box1{ width: 498px; height: 498px; background-color: palegreen; /*overflow: hidden;*/ /*float: left;*/ /*border: 1px solid transparent;*/ padding-top: 1px; } .box2{ width: 300px; height: 300px; background-color: plum; margin-top: 50px; /*float: left;*/ } 十二、伪对象选择器 1、插入文字 .box::before{ content: "我是css插入的文字"; } .box:after{ content: "我是css插入的文字"; } 2、插入图片 .box::before{ content: url("魅族/images/1c31db15-ab85-4932-8e6c-edfd6039bc60.png"); } .box::after{ content: url("魅族/images/1c31db15-ab85-4932-8e6c-edfd6039bc60.png"); } 3、插入div 自定义插入的内容 .box::before{ content: ""; width: 200px; height: 200px; background-color: red; //转换为块级元素 display: block; } .box::after{ content: ""; width: 200px; height: 1px; background-color: green; display: block; } 十三、浮动 1、作用 布局(块级元素水平显示) 2、原理 元素浮动后排除到普通文档流之外 元素浮动后在页面不占据位置（原位置不保留） 浮动是碰到父元素边框或者浮动元素的边框就会停止 浮动不会重叠 浮动只有左右浮动 元素浮动后都转为块级元素 块级元素默认宽度为100%，有浮动的情况下，宽度变为有内容撑开 3、语法 float：left|right|none； 4、清除浮动影响 如果父元素没有设置高度，默认有内容撑开，当子元素浮动后，父元素的高度为0（高度坍塌） 会对后面的元素产生影响 解决方法： ①父元素设置高度（高度已知的情况下） ②父元素增加overflow：hidden（√）|auto；（会自动找高） ③受影响的元素加clear：left|right|both；（父元素的高度会找不到） ④空div法，在浮动元素后加空div（父元素的高度可以找到，缺点：页面会新增很多空元素，影响页面加载速度） 空div{clear：both；} ⑤伪对象法 浮动元素的父元素：：after{ content：""； display：block； clear：both； } ⑥加浮动 十四、元素的定位 注意： 1、参照点，2、元素定位后原位置是否保留 1、属性：position 2、属性值： ①static 默认值 静态定位（没有定位） ②relative 相对定位 相对于自己的原位置定位 定位后原位置保留 配合 left，right，top，bottom移动 （当山下左右同时生效时，左上优先级高） 应用场景： a、配合绝对定位使用 b、自己小范围移动 ③absolute 绝对定位 相对于已经定位（relative，absolute，fixed）的父元素定位，如果父元素没有定位，逐级往上找，最后会相对于body定位 绝对定位后，原位置不保留 配合 left，right，top，bottom移动 （当山下左右同时生效时，左上优先级高） 应用场景： 形成独立的一层 ④fixed 固定定位 相对于浏览器窗口定位 定位后位置不保留 配合left，right，top，bottom移动 应用场景： 固定在页面某个位置 ⑤sticky 相对和固定定位的结合 没有滚动条，是相对定位 有滚动条，是固定定位 1、 z-index 堆叠顺序 默认值 auto（跟父元素一致） 取值number 取值越大，层级越往上 可以取负值 必须配合定位使用（relative，absolute，fixed） 默认 两个元素同时定位，后面的元素在上 2、display 属性： 属性值： none 隐藏，隐藏后不占据位置 block 块级元素 inline 行内元素 inline-block 行内块，即在同一行显示，又可以设置高度，行内块会识别代码之间的空白 常见的行内块：img input button video等 flex 弹性盒模型 table 表格 table-cell 单元格 3、隐藏的区别 display：none；隐藏自己，隐藏后原位置不保留 opacity：0； 隐藏直接，隐藏后原位置保留 visibility：hidden；隐藏直接，隐藏后位置保留 overflow：hidden；溢出部分隐藏 4、设置属性后不占据位置 ①float：left|right； ②position：absolute； ③position：fixed； ④display：none； 块级元素默认宽度为100%，变为宽度由内容撑开 5、块级元素和行内元素的区别 ①块级元素独占一行，垂直展示，行内元素在同一行显示 ②块级元素默认宽度100%，行内元素默认宽度由内容撑开 ③块级元素可以设置宽高，行内元素设置宽高不生效 ④块级元素可以设置margin和padding的四周，行内元素只能设置margin和padding的左右 ⑤布局时块级元素可以包含块级元素和行内元素，行内元素一般不要包含块级元素 ⑥display属性值不同，块级元素默认值为block，行内元素默认值为inline ⑦块级元素：div,p,h1-h6,hr,body,html,ul,ol,li,dl,dt,dd,form,header,nav,footer,aside,article,section等 ⑧行内元素：span,img,a,i,b,u,s,del,sup,sub,em,strong,input,button,textarea,video等 6、BFC块级格式上下文 形成独立的一块 可以开启BFCdg格式的属性： ①float：left|right； ②position：absolute|fixed； ③overflow除了默认值visible； ④display：flex|table-cell； 7、圆角 border-radius 取值 px % 可以取4个值 8、盒阴影 box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色 位置； 必须 必须 可选 可选 可选 正负 正负 正值 outse|inset 9、字阴影 text-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 颜色； 必须 必须 可选 可选 10、背景渐变 1）线性渐变 background-image：linear-grandient（方向，颜色1，颜色2，。。。）； 方向可以省略，默认从上往下渐变 取值： ①关键词 to bottom,to right, to right bottom ②弧度 直接写弧度（deg） 2)径向渐变 射线渐变 扇形渐变 background-image：radial-gradient（渐变的中心点，渐变的形状，颜色1，颜色2，。。。）； 渐变的形状可以省略，默认为椭圆，取值circle 渐变的中心点可以省略，默认在元素的正中心 11、兼容性问题 1）厂商前缀 解决浏览器对c3新特性的支持 浏览器 厂商前缀 内核（渲染引擎：解析HTML，css，js） google -webkit- blink Firefox -moz- gecko IE -ms- trident 苹果 -webkit- webkit 欧朋 -o- blink 2)css hack 解决IE版本低的兼容性问题 ①条件hack 条件注释法 位置同HTML的位置 语法： 例子： <!--[if IE 7]> <![endif]--> <!--[if 条件]> <![endif]--> 条件： IE版本号 gt IE 版本号 大于 gte IE 版本号 大于等于 lt IE 版本号 小于 lte IE 版本号 小于等于 ②属性前缀和后缀 前缀：+ - _ * # 后缀：\0 \9 \9\0 !important（优先级最高） 3）转换 变型 ①作用 使元素在位置或者形状上发生一定的改变 ②属性 transform：translate（） rotate（） scale（） skew（）；位移 旋转 缩放 倾斜 只写一个属性值时 其他属性值为默认值 ③属性值 1> translate 位移 单位px % transform：translate（x,y）; 取正值，往右下走 取负值，往左上走 当只有一个参数时，表示水平方向移动的距离 当有两个参数时，表示水平方向和垂直方向移动的距离 transform:translateX(); transform:translateY(); 了解：3D位移 transform：translate3D（x,y,z）； transform：translateZ（）； 2> rotate 旋转 单位deg transform:rotate(); 取正值，顺时针旋转 取负值，逆时针旋转 元素默认的中心点为宽高的交叉点，可以通过transform-origin：；去修改元素的中心点（一般不改，改的例子：transform-origin：right bottom； 中心点改为右下） 注意： 旋转会旋转页面整个坐标轴，当位移和旋转同时存在，推荐先位移再旋转 了解：3D旋转 translate：rotateX(); 以x轴转动 translate：rotateY(); 以y轴转动 3>scale 缩放 取值number 取值0-1 缩小 取值<1 放大 默认 1 transform：scale（x,y）; 当只取一个值，等比例缩放 当取两个值，表示水平和垂直方向 transform：scaleX(); transform：scaleY(); 了解3D缩放： transform:sacale3D(x,y,z)； transform：scaleZ(); 4>skew 倾斜 单位deg transform:skew(x,y); 当取一个值，表示水平方向倾斜的弧度 当取两个值，表示水平和垂直方向倾斜的弧度 transform：skewX(); transform：skewY(); 12、过渡 1）作用 从一种样式过渡到另一种样式 2）过渡必须要有触发事件 ①鼠标悬停，鼠标点击 3）过渡的属性： ①过渡的属性--必须： transition-property：属性1，属性2； 可以过渡的属性： a、取值为数值 with height margin padding top left 等 b、取值为颜色 background-color border-color等 c、转换 transform d、阴影 box-shadow text-shadow ②过渡的持续时间--必须 transition-duration：时间1，时间2； 默认 0s|0ms(毫秒) 1s = 1000ms ③过渡的时间速度变化类型--可选 transition-timing-function：； ease 默认值 先加速后减速 ease-in 加速 ease-out 减速 ease-in-out 先加后减 linear 匀速 ④过渡的延迟时间--可选 transition-duration：； 默认 0s|0ms(毫秒) 可以取负值，表示把这段时间的效果跳过 ⑤简写 transition：过渡属性all 持续时间2s 速度变化型linear 过渡延迟时间2s; 13、动画 1）作用 可以复制复杂的动画（可以控制过程） 可以控制动画的执行次数 可以没有触发事件（页面一加载就触发动画） 2）定义动画 @keyframes dh { 0%{ width: 200px; height: 300px; background-color: orange; transform: rotate(45deg); } 30%{ width: 300px; height: 200px; background-color: yellow; border-radius: 50%; } 80%{ width: 500px; height: 500px; background-color: green; transform: translateY(250px) translateX(250px); } 100%{ width: 800px; height: 800px; background-color: #2c99ff; background-image: radial-gradient(red,orange,gold,greenyellow,burlywood,plum); box-shadow: 0 5px 5px sandybrown; transform: scale(.5) skew(30deg); } } 添加厂商前缀 @-webkit-keyframes name{} @-moz-keyframes name{} @-o-keyframes name{} @-ms-keyframes name{} 3）调用动画 animation：name 持续时间（s|ms） 速度变化类型 延迟时间 播放次数（number|infinite） 播放方向（alternate 偶数次倒序播放） 动画停在最后一帧（forwards）; 必须 必须 可选 可选 可选 可选 可选 4）动画的属性 animation-name：；动画名称--必须 animation-duration：；动画持续时间--必须 animation-timing-function：；动画速度变化类型--可选 取值： ease 默认值 先加速后减速 ease-in 加速 ease-out 减速 ease-in-out 先加后减 linear 匀速） animation-delay：；动画的延迟时间--可选（可以取负值） animation-iteration-count：；动画的播放次数--可选 animation-direction：；动画播放的方向--可选（alternate:偶数次数倒序播放） animation-fill-mode：；动画停在最后的一帧--可选 animation-play-state：running|paused（暂停）；动画的播放状态--可选（一般配合hover使用） 5）动画实现幻灯片效果 14、媒体查询 media query 响应式布局：媒体查询、bootstrap、js+rem等 1）什么是响应式布局 写一次样式兼容所有终端 2）优点 适配各个终端比较灵活 3）缺点 代码量大 4）语法 ①内部引入 移动端 @media screen and (max-width:768px){} ipad端 @media screen and (min-width:768px) and (max-width:992px){} pc端 @media screen and (min-width:992px){} ②外部引入 移动端 <link href="" rel="stylesheet" media="screen and (max-width:768px)"/> ipad <link href="" rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)"/> pc端 <link href="" rel="stylesheet" media="screen and (min-width:992px)"/> <meta name="viewport" content="width=device-width, initial-scale=1"> 十五、弹性盒模型 1、盒模型 1）标准盒模型 浏览器默认 2）怪异盒模型 3）弹性盒模型 伸缩盒模型 flex box 多用于移动端布局 弹性盒模型中float clear vertical 不生效 ①父元素上的属性 1）开启弹性盒模型 display：flex； 子元素默认水平排列 2）设置弹性盒模型的方向（设置子元素怎么排列） flex-direction：； row 默认值 子元素水平排列（从左往右） column 子元素垂直排列（从上往下） row-reverse 子元素水平倒序排列（从右往左） column-reverse 子元素垂直倒序排列（从上往下） 3）子元素在主轴上的对齐方式 默认主轴为x轴，侧轴为y轴， 当子元素垂直排列时，主轴为y轴，侧轴为x轴 justify-content：； flex-start 默认值 弹性盒的开始 flex-end 弹性盒的结束 center 居中 space-around 在子元素四周分配父元素剩余空间，两端的距离是中间的一半 space-between 在子元素之间分配父元素剩余的空间 ②子元素上的属性 flex-grow：number； 子元素分配父元素剩余空间的比例 当子元素没有设置宽度，父元素开启弹性盒模型，子元素的默认宽度由内容撑开 字体图标 iconfont 1)打开官网 iconfont.cn 2）图标库 3）搜索需要的图标，添加到购物车 4）下载代码 5）HTML文件中引入iconfont.css 6）元素class=“iconfont” 7）复制Unicode编码到双标签之间 8）修改iconfont的样式通过字体的样式 雪碧图 css sprite css精灵 1）定义 雪碧图是一项图片整合技术 把许多小图片整合到一张大图上面 2）优点 ①减少页面http请求 ②减少图片字节数 ③减少命名困扰 3）原理 background-image：url（）； background-position：； 收藏（0）