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 }
-