CSS看这一篇就够了
Css 标准 选择器 加各种样式的声明
26、 选择器 有 基础选择器 和 复合选择器
27、 标签选择器 标签名 作为选择器 p div h3
28、 id选择器 #类名定义 id=“类名定义”。
29、 类选择器 class=“nev”
30、 Css字体 font normal 字体粗细400 字体大小12px/- line-height字体行高 字体类型 微软雅黑;
- 31、 字体装饰 颜色color 文本对齐 text-align left/- center/right 文字装饰text-decoration :none; - text-indent文本缩进2em 相对于 font-size 的单位
- 32、 内部样式表 在 style 内部 编写css内容
- 33、 行内样式表 行内 style 修饰文本style=“color:- pink”
34、 外部样式表link 某一个css文件
35、 后代选择器 ul li a span
36、 子元素选择器 ul> li 只选择亲儿子
37、 并集选择器 逗号相分割
38、 伪类选择器:hover 书写属性要注意顺序,但一般只用hover - lvha
- 39、 块元素 单独占一行
- 40、 行内元素 内部只能放文字或者行内元素 a 可以放块级元- 素,记得转换块级元素
- 41、 行内块元素 一行放几个 还可以设高和宽
- 42、 背景 颜色color 透明色 transparent 图片 image - url 平铺 no-repeat 位置 position x 坐标 y 坐标 方- 位名词 left right center top bottom
- 43、 如果写一个方位名词,第二个默认居中对齐
- 44、 精确坐标 :第一个x坐标 第二个y 坐标。
- 45、 Background-position 20px 50px 。
- 46、 单写一个同理
- 47、 背景固定 background-attachment 制作视差滚动效果scroll- 滚动 fixed 固定
- 48、 背景符合写法 background:没有要求顺序 color url - no-repeat fixed center top
- 49、 背景颜色半透明 background:rgba(0,0,0,.3)
- 50、 盒子模型
- 51、 Margin 外边距 padding 内边距 border 边框 center 中- 心
- 52、 Border-radios 10px 10px 10px 10px 圆角边框
- 53、 Box-shaldow 10px 10px 10px 10px 盒子阴影
- 54、 浮动元素和标准流父盒子一起使用
- 55、 添加一个边框transparent 透明色 解决外边距合并问题,浮- 动,固定、绝对定位不会有外边距合并问题
- 56、 行内或者行内块 水平居中,给父元素加text-align:center - 就可以。
- 57、 块级元素 margin 0px auto
-
padding 不会撑开盒子的情况
- 当盒子没有指定高或者宽的时候
margin
- 外边距 0px auto 上下为0 左右居中
嵌套元素塌陷
- 可以给父盒子指定一个边框
css 属性书写顺序
- 布局定位属性 : display/ position / float /visibility / overflow (建议display第一个写)
- 自身属性 : width / height / margin / padding / border / background
- 文本属性 : color / font / text-decoration / text-align / vertical-align / white-spacebreak-word
- 其他属性 box-shadow
定位
- 绝对定位 position:absulate
- 脱离标准流 不占有位置
- 相对定位 relative
- 占有原来的位置 不脱标
- 一般情况 都是 子绝父相
- 固定定位 fixed
- 固定在屏幕上,做一些视觉反差的效果 QQ首页
- 定位叠放次序 z-index: 1;
- 只有定位的盒子才会有 这个属性
- 默认为auto ,值越大 越靠上显示 ,值可正可负
- 绝对定位水平垂直居中
- left:50% ;
- margin-left:-一半的盒子宽度;
- top:50%
- margin-top:-一半的盒子高度;
- 定位的特殊属性 和浮动类似
- 可以给行内块,行内元素 设置高度和宽度
- 块级元素添加绝对定位或者固定定位,不给高度和宽度,默认大小为内容的大小
- 脱标的盒子不会触发外边距塌陷 : 浮动元素,绝对。固定定位的元素
元素的显示和隐藏
- display :none 隐藏对象 隐藏后不占有原来的位置
- display: block 显示对象,转换块级元素
visibility
- visible 元素可视
- hidden 元素隐藏 隐藏后继续占有原来的位置
overflow :hidden ;
- 超出部分隐藏
- auto 超出显示滚动条 ,不超出不显示滚动条
精灵图
- 有效的减少了服务器发送请求的次数,提高了页面的加载速度
- background: url(‘精灵图路径’) no-repeat x坐标 y坐标。
-
通常利用js for循环将精灵图放入 ,用Macromedia Fireworks 8 打开精灵图
调为原来的一半大小,放大 ,量取对应精灵图的位置 ,最后用background-size 调整大小 -
var index = i*64;
-
sps[i].style.backgroundPosition= '0 -'+index+'px';
icomoon 图标的使用
- https://icomoon.io/app/
- 将icomoon压缩包解压到和 html文件的同一级路径下
- 直接调用即可
- 在文章或者块级盒子加 字体图标 :
- 在css文件中 加 content: “\e98d”; font-family: ‘icomoon’;
- 在搜索框内加字体图标,直接写入placeholder内部
- 字体图标的追加和加载原理
- 点开icomoon 网站 ,点击左上角图标,弹出对话框,选择xxxx.json 上传 。
- 减少服务器压力 。响应一次
css三角做法
- width: 0; height: 0;
- border: 10px solid transparent; - border-top-color: pink;
-
- 做好以后由定位固定到应有的位置
- 高级技巧
- 下边框和左边框 变为 0 ,上边框边长并透明,通过定位放到应有的位置
鼠标样式 cursor
- 默认 cursor: default
- 小手 pointer
- 移动 move
- 文本样式 text
- 鼠标禁止样式 not-allowed
表单轮廓消除和文本域防拖拽
- outline-none;
- resize-none;
vertical-align
- 用于设置图片或者表单(只对行内块元素有效)和文字垂直对齐
- baseline 默认 基线上
- top 元素顶端与最高元素的顶端对齐
- middle 把此元素放在父元素的中部
- bottom 把元素的顶端 与最低的元素的顶端对齐
图片底部空白缝隙解决
- 原因是行内块元素是和基线对齐
- vertical-align middle top bottom(提倡使用的)
- display:block;
单行文本溢出省略号显示
- 强制一行显示 write-space:nowrap;
- 超出部分隐藏 overflow:hidden;
- 用省略号代替超出的部分 text-overflow :ellipsis;
css初始化
复制粘贴代码即可
语义化标签
- header 头部标签
- nev 导航标签
- article 内容标签
- section 定义文档某个区域
- aside 侧边标签
- footer 尾部标签
多媒体标签
audio 音频标签
- 谷歌禁用 自动播放 音频 autoplay
- loop = “loop” 循环播放
- controls 属性 控制播放和其他按钮
- autoplay=“autoplay” 视频就绪自动播放 (重点)
视频标签
- autoplay=“autoplay” 视频就绪自动播放 (重点)
- muted= “muted” 静音播放
- loop = “loop” 循环播放
- controls 属性 控制播放和其他按钮
- poster= “图片路径” ,未加载好视频时显示改图片
-
必须在form表单域内
-
新增表单控件
- 重点记住 number 必须数字类型 tel 手机号码 search 搜索框 三个
- 其他需要自查
-
表单属性
- placeholder 提示文本
- submit 提交控件
- 多文件提交控件 multiple
css新选择器
- nth-child 所有元素都会排列序号
- odd 奇数 even 偶数
- nth-child(n) n从0开始 遍历,直到最后一个,开始改变属性,只可以写n,不可以写其他字母
- 2n 等价于 even
- 2n+1 等价于 奇数 odd
- n+5 从第五个开始(包括第五个)
- -n+5 前五个
- controls 属性 控制播放和其他按钮
nth-of-type()
先看孩子是否对应,然后再选择,与nth-child 最大的不同
伪类选择器 新(文档中找不到)
- box-sizing 默认值为content-box 改变值 border-box
- 可以忽略padding ,border 样式扩大盒子的大小,只以width为准。
css 过渡 ,经常和hover搭配使用
- 属性: transition : 要过渡的元素 花费时间 运动曲线 何时开始
- 时间单位为秒
- 曲线可以省略
transition : width 0.5s ease(默认) 0s
在div内添加 该样式 即可。
div:hover {
width:500px;
}
谁做过渡给谁加
多个样式写法
transition : width 0.5s ease(默认) 0s, height 0.5s 0s;
也可以写 all 0.5s 。。。。