CSS-层叠/级联样式表Cascading Style Sheets
-
语法规范
样式规则 表现 选择器 样式对象-HTML标签 声明（单/多条） 具体样式 { type：typeValue ; } -
CSS选择器
-
基础选择器
-
单个选择器组成
分类 代码 标签选择器 标签 { } 类选择器（多类名） .class名 { } id选择器（唯一） #id名 { } 通配符选择器（页面所有元素） * { } -
类命名规则
头：header 内容：content 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 页面主体：main 广告：banner 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu
-
-
复合选择器
- 不同方式组合基础选择器,更准确高效地选择目标元素
分类 样式 作用 实例 后代选择器 父元素 子/孙元素 { } 改变最后级标签的样式 .class li a { } 子选择器 父元素>子元素 { } 改变子级标签样式 .class>a { } 并集选择器 元素1,元素2 { } 可以选择多组标签 div, p, .pig li { } 伪类选择器 : 向某些选择器添加特殊效果 - 伪类选择器
-
链接选择器—-LVHA顺序才生效(a有默认样式,需特别设置)
- a:link 选择所有未被访问的链接
- a:visited 选择所有被访问的链接
- a:hover 选择鼠标指针位于其上的链接
- a:active 选择活动链接(鼠标按下未弹起的链接)
-
focus伪类选择器—光标/焦点
- input:focus 选取获得光标的元素
-
-
-
字体属性
样式 属性 属性值 字体 font-family “英文最好，默认最好，逗号隔开依次选择，双引号表示” 大小 font-size “px最常用，明确值最好，默认值不同” 粗细 font-weight 400-normal，700-bold…数字时不+单位 样式 font-style normal，italic， 复合 font font-style font-weight font-size/line-height font-family div { font-style: italic; font-weight: 700px; font-size/line-height: 16px; font-family: "Microsoft yahei"; } //<!--复合属性：简写----要按照顺序，空格隔开，必须保留 size和family 属性--> div { font: italic 700 16px 'Microsoft yahei' } -
文本属性
样式 属性 属性值 颜色 color 预定义颜色值，#十六进制，RGB代码 对齐 text-align 水平对齐方式 装饰 text-decoration 下/上划/删除线/none 缩进 text-indent 数值px，em（相对于当前元素一个文字单位大小） 行间距 line-height =上间距+文本高度+下间距 垂直居中 line-height 父标签的高度 -
CSS引入方式
类别 样式代码位置 内部样式表 HTML-head-style–控制整个页面 行内样式表 HTML-标签-style=“ ”–控制当前元素 外部样式表 CSS-head--控制多页面 - 图片居中对齐，是设置它的父标签
-
Chorme调试工具
-
-
Emmet语法
-
使用缩写提高html/css编写速度
- 提升HTML
方式 作用 演示 标签名+tab 自动生成 div tab 标签名*n 生成n个标签 p*3 父标签>子标签 父子级关系 ul>li*3 标签1+标签2 兄弟标签 uln+ol4 标签.class 或 #id +tab 生成带class/id名的 p.class .class$*n 标签的类名带顺序的 .demo$*5 标签{ }*n 生成的标签带内容 div{$}*3 - 提升CSS
- 自动生成
-
格式化文档
- Shift+Alt+F
- 保存页面时自动格式化代码
- 文件-首选项-设置
- 搜索emmet.include / 搜"保存"–OnSave
- settings.json-用户-添加
- “editor.formatOnType”:true,
- “editor.formatOnSave”:true
-
-
元素显示模式
| 分类 | 特点 | 注意 | |
|---|---|---|---|
| 块级元素 | 1.独占一行，可设高度，宽度（默认是父容器的100%），内外边距； 2.是一个容器及盒子，可放行内/块级元素 | 文字类的元素不能放块级元素，比如– | |
| 行内元素 | 1.相邻行内元素在一行上，一行可显示多个，行内元素只能容纳文本和其他行内元素； 2.设置宽高是无效的，默认宽度是本身内容宽度 | 链接里不能再放链接，特殊情况里可以放块级元素，但是给转换为块级模式最安全 | |
| 行内块元素 | 1.行：相邻在一行，一行可多个；默认宽度是本身； 2.块：可设宽度，高度，内外边距 |
-
元素模式转换–需要其他模式的特性，会有默认缝隙
-
转换为块级： display：block
-
转换为行内： display： inline
-
转换为行内块： display： inline-block
-
-
软件推荐
- Snipaste
-
CSS-背景
- 应用场景–带图标，装饰性小/大背景页面
类别 值 注意 颜色-color transparent，color 图片-image none，url（） image会浮于color 平铺-repeat repeat（默认）、no-rep，rep-x，rep-y 图片位置-position 方位名词，精准单位–（x y） 省略参数默认居中 图像固定-attachment scroll，fixed 视差滚动 background 透明度-rgba，a∈（0,1） - 网上扒图片
- css页面–url–右键–open in new tab–另存
- 复合写法
background：color image repeat attachment position
-
CSS-三大特性
-
层叠性
- 同一选择器样式重叠–就近原则–覆盖
-
继承性Inherited
- 子标签继承父标签的某些样式
- 主要是文字：text- ， font- ，line- ， color-
- 降低复杂性
- 行高的继承性
- 当前元素font-size的m倍
- font：14px/1.5 “Microsoft Yahei”
- 子标签继承父标签的某些样式
-
优先级
-
同一个元素有多个选择器
-
选择器相同—>层叠性
-
选择器不同—>选择器权重
选择器 选择器权重 继承，* 0,0,0,0 元素选择器 0,0,0,1 （伪）类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式 style=“ ” 1,0,0,0 !important ∞无穷大
-
-
权重叠加—复合选择器
- 权重：ul li > li
- 权重会有叠加，但是不会有进位
- 复合选择器与基础选择器之间也有比较
-
-
-
网页布局
-
1.盒子模型
组成 属性 分区 border-边框 -width-style-color 上下左右 **content-**内容 **padding-**内边距 内容和边距距离 上下左右 **margin-**外边距 盒子之间的距离 上下左右 -
border–影响盒子大小
- 复合表示：border： width style color
- 合并相邻的边框(避免未合并的边框组合大于其他边框)
- border-collapse: collapse
-
padding–影响盒子大小
-
复合写法：
值 意思 padding：5px； 上下左右 padding：5px 10px 上下-5，左右-10 padding：5px 10px 20px； 上-5，左右-10，下-20 padding：5px 10px 20px 30px； 顺时针：上-右-下-左 -
若盒子本身未指定width/height，则padding不会撑开盒子大小
-
-
margin
- 复合写法： 同padding
- 典型应用–盒子水平居中
- 盒子必须指定宽度
- 盒子左右外边距设为 auto
- 写法
- margin： 0 auto；
- 行内元素/行内块元素如何水平居中
- 父元素设置：text-align： center
- 外边距合并
- 嵌套块元素垂直外边距的塌陷–父元素塌陷较大外边距值
- 解决方案
- 父元素定义边框 border
- 父元素定义内边距 padding
- 父元素添加 overflow： hidden
- 解决方案
- 嵌套块元素垂直外边距的塌陷–父元素塌陷较大外边距值
-
清除内外默认边距
- 通配符 * { margin：0； padding：0；}
-
行内元素尽量只设置左右的内外边距，另外的就不用限制
- 上下边距不起作用，转换为块内/行内块元素即可
-
去掉
- 的样式
-
- list-style： none
-
-
其他效果
分类 实现 测试 圆角边框 border-radius border-radius：100px或50% 盒子阴影 box-shadow 水平/垂直阴影位置，模糊距离，阴影尺寸，颜色，外部改内部阴影----不占空间 文字阴影 text-shadow 水平/垂直阴影位置，模糊距离，颜色（rgba）
-
-
2.浮动
- 会改变元素的默认排列方式
- 多 个块级元素一行内排列显示
- 浮动的盒子没有外边距合并问题
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
浮动方式 特性 float = none，left，right 1.浮动元素会脱离标准流，不会保留原先位置，其他标准流会使用该位置，只会影响后面的标准流； 2.浮动的元素会一行内显示并且元素顶部对齐，装不下则另起一行； 3.加浮动的元素会具有行内块元素的特性，不用转换 -
浮动元素和标准流父级搭配使用
- 父盒子–标准流，子盒子–浮动流
- 相同级别的兄弟元素都要设置浮动
-
清除浮动-清除浮动元素造成的影响
- 父元素必须设置高度吗–写死吗？
- 理想–子元素撑开父元素
- 但浮动元素不占位置，父元素的高度=0
- 父盒子本身有高度–不需清除浮动
语法 属性值 选择器{clear：属性值；} left，right，both - 策略：闭合浮动–让浮动只影响父盒子
方法 要求 额外标签法（隔墙法） 新增的是块级元素，添加清除浮动样式 父级添加overflow属性 hidden，auto，scroll 父级添加**:after**伪元素 只需复制，.clearfix{},照顾低版本浏览器 父级添加双伪元素 父级内前后都＋“墙” -
清除浮动原因总结
-
父级无高度 父级内有浮动子盒子 影响其他元素布局
- 父元素必须设置高度吗–写死吗？
- 会改变元素的默认排列方式
-
PS切图
-
常见图片样式
样式 特点 JPG 高清，色彩多 GIF 256色，可保存透明背景和动画效果 PNG 适合于切背景透明的图片，结合jpg，gif优点 PSD PS专用格式，可直接复制文字，图片，测量大小距离–适合前端 -
PS切图方式
图层切图 切片切图 PS插件切图
-
-
案例测试
-
CSS思路
-
CSS顺序 具体 布局定位 display，position，float，clear，visibility，overflow 自身属性 width，height，margin，padding，border，background 文本属性 color，font，text-decoration，text-align，vertical-align，white-space，break-word 其他属性 content，cursor，border-radius，box-shadow，text-shadow，background：inlinear-gradient…
-
-
页面布局思路
-
1. 确定和测量可视化版面版心 公共样式 2. 页面布局第一准则–确定行模块+行中列模块 3. 页面布局第二准则–确定列的布局方式，大小位置 4. 先结构-HTML，再样式–CSS -
模块 注意 导航栏 - +模式，降权网站排名风险,不设宽度以便后增；文字不同个数，最好加左右padding撑开盒子
- /标签
去除固定样式，设置padding快速撑开 当margin值挤出内容，修改父级ul的宽度 父盒子高度为0 清除浮动
| 父盒子因子盒子塌陷 | overflow： hidden |
|| 浮动元素会压住下面标准流，但是不会压住标准流的文字，实现文字环绕效果 |
-
-
vscode 里 ctrl+g 快速定位行 -
vscode里 shift+alt+鼠标 选中多行位置操作
-
-
3.定位
-
让盒子可以自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
-
定位 = 定位模式 + 边偏移
-
定位模式–position
-
属性 语义 实际使用 static 静态定位 **1.**默认定位：标准流 relative 相对定位 1. 相对于最初的位置，原位置仍保留 absolute 绝对定位 1. 没有祖先元素或祖先元素未定位：以浏览器为准定位；**2.**若祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置；3.绝对定位不再占有原来的位置（轮播图） fixed 固定定位 **1.**以浏览器的可视窗口为参照；与父元素无关，不随滚动条滚动；**2.**固定定位不占有原先位置； sticky 黏性定位 **1. ** 以浏览器的可视窗口为参照；**2. ** 占有原来位置 **3.**必须加一个属性值才有效；**4.**兼容性较差，不支持IE，大多用JS实现
-
-
边偏移
-
如果一个盒子既有
left又有right属性，默认执行left属性 -
如果一个盒子既有
top又有bottom属性，默认执行top属性 -
属性 描述 top 顶部偏移量 bottom 底部偏移量 left 左侧偏移量 right 右侧偏移量
-
-
-
子绝父相
- 父元素的relative，保证原位置，使子元素的定位有效果；
- 子元素的absolute，保证其浮动于盒子上；
-
固定版心右侧
- 50%可视区域+50%版心宽度
- left：50%
- margin-left：50%版心width
- 50%可视区域+50%版心宽度
-
设置定位类型的叠放次序–z-index
- 默认auto，后来居上
- 数值越大，层次越高
- 不可加单位，只有定位的盒子才有z-index属性
-
定位的拓展
-
特殊 解决 盒子不能居中 使用left，margin-left 行内元素+absolute/fixed 可设置宽高 块级元素+absolute/fixed 若不设置宽高，默认内容大小 脱标盒子不会引起外边距塌陷 不会出现外边距合并 absolute/fixed会压住标准流的文字 浮动不会压住文字 -
加了定位的盒子不能靠–margin实现水平居中
-
水平居中
- left：50%
- margin-left： -50%盒子width
-
垂直居中
- top： 50%
- margin-top： -50%盒子height
-
-
元素的显示与隐藏
-
属性 属性值 特点 display block / none 不占原来位置，搭配JS特效 visibility visible / hidden 占有原来位置 overflow visible / hidden / scroll / auto 溢出部分内容 -
有定位盒子： 慎用overflow：hidden，会隐藏多余部分
-
-
-
CSS–高级技巧
-
精灵图–精灵技术Sprites
-
将网页中的一些小背景图像整合到一张大图中，服务器只需一次请求
-
下载为图片，PS切片工具得到宽高，xy坐标
-
利用background-position：x y，移动值基本负值
-
-
字体图标–iconfont
-
本质是文字，有文字的属性
-
减少服务器请求，且几乎兼容所有浏览器，但样式比较简单统一
- icomoon
- 阿里 iconfont
-
字体图标的引入
-
字体图标的追加和加载原理
-
-
三角的制作
-
border的本质是三角形状
-
width:0px; height:0px; line-height:0; font-size:0; border: 50px solid transparent; border-bottom-color:red;
-
-
用户界面样式
-
更改用户鼠标样式
-
属性：cursor
-
属性值 描述 default 小白默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
-
-
表单轮廓
- 属性：outline
- 0/none：取消样式
-
文本域拖拽样式
- resize： none；
- outline： none；
- 开始结束标签的间隔，决定光标的位置，最好一行
-
vertical-align
- 设置元素的垂直对齐方式
-
-
只针对行内元素，行内块元素
-
属性值 描述 baseline 默认，元素放在父元素的基线上 top 元素的顶端与行中最高元素的顶端对齐 middle 元素放在父元素的中部 bottom 元素的顶端与行中最低元素的顶端对齐 -
图片/表单–文字经常是基线对齐
-
应用
- 解决图片底部默认空白缝隙问题
- 一：更改属性值
- bottom/middle/top
- 因为图片也是默认基线对齐
- bottom/middle/top
- 二：将图片转换为块级元素
- 一：更改属性值
- 解决图片底部默认空白缝隙问题
-
溢出的文字用省略号显示
-
单行文本
-
<!--强制自动换行显示--> <!--white-space: normal;--> <!--强制一行内显示文本--> white-space: nowrap; <!--超出部分隐藏--> overflow: hidden; <!--文字用省略号代替超出的部分--> text-overflow: ellipsis;
-
-
多行文本
-
较大兼容性问题，适用于webKit浏览器或移动端
-
<!--超出部分隐藏--> overflow: hidden; <!--文字用省略号代替超出的部分--> text-overflow: ellipsis; <!--弹性伸缩盒子模型显示--> display: -webkit-box; <!--限制在一个块元素显示的文本行数--> -webkit-line-clamp: 2; <!--设置或检索伸缩盒对象的子元素的排列方式--> -webkit-box-orien: vertical; -
建议让后台人员实现显示字数，因为前端兼容性不同
-
-
-
布局技巧
-
方法 应用 1. margin负值 盒子有边框，-1让其覆盖，避免1+1=2；交互显示边框时，提高当前盒子的层级，若无定位，设relative；若有定位，设z-index； 2. 文字围绕浮动元素 文字标准流，图片浮动，图片不会压住文字，自动围绕显示 3. 行内块的巧妙运用 页码选择，将子元素转为行内块元素，父元素设置text-align：center 4. CSS三角强化 border的width设置不同，color在transparent和其他中转换
-
-
-
-
CSS初始化
-
原因： 不同浏览器对某些标签的默认值不同
-
<!--京东-查看源代码-初始化代码-ctrl+f查找body--> * { margin:0;padding:0 <!--所有标签内外边距清零--> } em,i { font-style:normal <!--让斜体不倾斜--> } li { list-style:none <!--去掉小圆点--> } img { border:0; <!--照顾兼容性，图片外包含链接会有边框问题--> vertical-align:middle <!--取消图片底侧空白间隙问题--> } button { cursor:pointer <!--变成小手，可点击提示--> } a { color:#666; text-decoration:none } a:hover { color:#c81623 } button,input { <!--设置字体--> font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB, "\5B8B\4F53", <!--Unicode编码代替“宋体”，避免乱码--> sans-serif } body { -webkit-font-smoothing:antialiased; <!--抗锯齿形，显示清晰--> background-color:#fff; font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif; color:#666 } .hide,.none{ display:none } .clearfix:after{ <!--清除浮动--> visibility:hidden; clear:both; display:block; content:"."; height:0 } .clearfix { *zoom:1 }
-
3036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
