CSS
HTML的局限性
- 只关注内容的语义；样式简单不美观；样式书写繁琐
CSS
- ==层叠样式表（Cascading Style Sheets）== / ==级联样式表==
- 一种标记语言，可以美化HTML，简化页面布局；实现结构与样式分离
- 用于设置文本内容、图片外形、版面布局和外观显示样式
CSS语法规范
- CSS规则：==选择器 {一条或多条声明;}==
- 选择器用于指定样式作用的标签
- 属性:属性值；
- CSS代码风格
- 样式格式：==展开格式==
- 样式命名：==一般小写==
- 代码格式：选择器和括号间、属性冒号和属性值间保留空格
CSS基础选择器
由==单个==选择器组成
分类
标签选择器
用==HTML标签==名作选择器
标签名 { 属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }优：能快速为页面内同类型元素设置统一样式
缺：不能设计差异化样式
类选择器
自定义==类名==差异化部分标签
样式“类名”定义，结构“.类名”调用
.类名 { 属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }长名称或词组用 “-” 连接命名；不使用纯数字、中文命名；语义
==类选择器——多类名==
- 多类名用空格隔开，使元素分别具有多个类样式
- 优：简化代码；逻辑清晰；修改方便
id选择器
以==id属性==设置id选择器
样式“id名”定义，结构“#id名”调用。==只能调用一次==（页面唯一性）
#id名 { 属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }
通配符选择器
==*== 选取页面中所有元素标签
* { 属性1：属性值1； 属性2：属性值2； 属性3：属性值3； }不需要调用，自动为所有元素设置样式
特殊情况时使用
CSS字体属性
用于定义字体系列、大小、粗细和文字样式
属性 作用 说明 font-size 字号 单位px font-family 字体 font-weight 字体粗细 ==无单位；700加粗；400不加粗；== font-style 字体样式 italic倾斜 font 样式连写 有序；字号、字体必需 color
- 颜色
- 取值：预设值；#十六进制；rgb(，，，)
text-align
- 文本对齐
- 取值：left；center；right
text-decoration
- 装饰文本，为文本添加下划线、删除线、上划线
- none；underline；overline；line-through
text-indent
- 文本首行缩进
- 单位：px像素；em文字大小
line-height
- 行间距
- 行间距包含==上间距、文本高度、下间距==
CSS引入方式
内部样式表
==嵌入式引入==
css写入html页面内部的<style>标签中，可控制整个页面样式
<style>标签理论上可放入html文档任意位置，一般放入<head>标签中
代码结构清晰，但未实现结构与样式完全分离
行内样式表
==行内式引入==
在元素标签内部的style属性中设定css样式
适合于修改简单样式，控制当前标签，不推荐大量使用
外部样式表
样式单独写入css文件中。在html中使用<link>标签引入
<link rel="stylesheet" href="css文件路径">可控制多个页面，需要引入
Emmet语法
快速生成HTML结构语法
生成标签 ==标签名+tab==
多个相同标签 ==标签名 * n==
嵌套级 ==父标签 > 子标签==
并列级 ==前标签 + 后标签==
生成指定类/id名标签 ==标签（默认）.类/#id名==
自增符 ==$==
标签内部内容 =={}==
快速生成CSS样式语法
- 简写
CSS复合选择器
基础选择器组合形成，可更高效选择目标元素
分类
==后代选择器== （包含选择器）
选择父元素里的子元素
元素1 元素2 {样式声明}
==子选择器==（子元素选择器）
仅选择某元素的最近一级子元素（所有直接后代）
元素1>元素2 {样式声明}
==并集选择器==
选择多组标签同时定义相同样式。通常用于集体声明
元素1,元素2 {样式声明}
==伪类选择器==
向某些选择器添加特殊效果
用冒号表示
常用伪类选择器
链接伪类选择器
a：link {} /* 未访问的链接 */ a：visited {} /* 已访问的链接 */ a：hover {} /* 鼠标悬停的链接 */ a：active {} /* 活动(鼠标按下未弹起)链接*/- 确保生效顺序：==LVHA==
- <a>链接有默认样式，需要单独设置
- 开发中常用a{}和a:hover{}样式设置
- a:visited因为安全问题，在高版本的浏览器中，只有color属性才可以生效，也只是仅限于ie浏览器才有用，其他的浏览器会因为缓存的原因，导致a:visited的属性在网页载入之后就会生效
focus伪类选择器
用于选取获得焦点的表单元素（多用于<input>）
input:focus{}
CSS元素显示模式
块元素
- <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
- 特点
- 独占一行
- 宽高、内外边距可控
- 宽度默认是容器（父级宽度）的100%
- ==容器级块元素即盒子，内可放行内或块级元素==
- ==文字类元素内不能放块级元素==
行内元素（内联元素）
- <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
- 特点
- 非独占，相邻行内显示
- 宽高直接设置无效
- 默认宽度为本身宽度
- ==行内元素只能容纳文本或其他行内元素==
- ==链接里不能再放链接==
- ==特殊情况<a>可放块级元素，将转换块级模式更安全==
行内块元素
- <img />、<input />、<td>
- 同时具有块元素和行内元素的特点
- 特点
- 相邻行内元素（行内块）处于一行，中间有空隙 （行内元素特点）
- 默认宽度为本身宽度 （行内元素特点）
- 高度、行高、内外边距可控 （块级元素特点）
显示模式转换
- 使一模式元素转换获得另一模式特性
- e.g. 增加链接<a>的触发范围
- ==转换为块元素：display: block==
- ==转换为行内元素：display: inline==
- ==转换为行内块元素：display: inline-block==
单行文字垂直居中：行高=盒子高度
CSS背景属性
==背景图片开发中常见于logo、装饰性小图片、超大背景图片、精灵图，易控制位置==
背景色透明 background: rgba( , , , x)==CSS3新增，IE9+浏览器支持==
背景颜色 background-color: color;
背景图片 background-image： url();
背景图片位置 background-position: x y;
精确数值
- 数值顺序严格
- 只指定一个数值，第二个值默认居中
方位名词
- 两个方位名词顺序不影响
- 只指定一个方位名词，第二个值默认居中
混合使用
- 顺序严格
背景图像固定（背景附着） background-attachment
- scroll 滚动
- fixed 固定
背景属性复合写法
无严格顺序
约定顺序
background: 背景颜色 背景地址 背景平铺 背景滚动 背景位置;
CSS三大特性
层叠性
- 层叠即覆盖，解决样式冲突问题
继承性
- 子标签继承父标签部分样式。简化代码，降低CSS复杂性
优先性
选择器权重
==!important（∞）> 行内样式（1000）> ID选择器（100)>==
==类选择器\伪类选择器 （10）> 元素选择器（1）> 继承或*（0）==
复合选择器权重叠加
盒子模型(Box Model)
盒子模型即将HTML页面中的布局元素看作盒子/容器
包括边框border、内容content、内边距padding、外边距margin
边框 border: width,style,color; （无严格顺序）
内边距 padding
padding: top-bottom-left-right; (1)
padding: top-bottom right-left; (2)
padding: top left-right bottom; (3)
padding: top right bottom left; (4)
==如果不指定宽\高，padding不会撑开盒子==
外边距 margin
==外边距应用：块级盒子水平居中==
- 条件：盒子指定宽度；
- 写法：左右设置 margin: auto;
==行内元素或行内块元素水平居中==
- 写法: 父元素设置 text-align: center;
外边距合并
==相邻块元素垂直外边距的合并==
问题
出现上下相邻的两个块元素（兄弟关系），若上元素有margin-bottom，下元素有margin-top。则垂直间距非二者之和而是取二者中较大值
解决方案
尽量只给一个盒子添加margin值
==嵌套块元素垂直外边距的塌陷==
问题
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素有上边距，此时父元素会塌陷较大的外边距值。
解决方案
- 为父元素定义透明边框
- 为父元素定义上内边距
- 为父元素添加overflow:hidden
- ==浮动、固定、绝对定位的盒子不会有塌陷问题==
清除内外边距
* { margin: 0; padding: 0; }==行内元素为照顾兼容性，尽量只设置左右内外边距。若设置上下内外边距，要转换为块级和行内块元素。==
CSS3新增样式
圆角边框
原理：圆与边框交集形成圆角效果
border-radius: length;- 参数值为数值或百分比
- 可分别设置四个圆角：左上角开始，顺时针
盒子阴影
==盒子阴影不占用空间，不影响其他盒子排列==
box-shadow: h-shadow v-shadow blur spread color inset;值 描述 h-shadow 必须。水平阴影位置，可负值 v-shadow 必须。垂直阴影位置，可负值 blur 可选。模糊距离 spread 可选。阴影尺寸 color 可选。阴影颜色 inset 可选。外部阴影(outset)改为内部阴影
文字阴影
text-shadow: h-shadow v-shadow blur color;
| 属性值 | 描述 | | ------ | -------------- | | none | 不浮动（默认） | | left | 向左浮动 | | right | 向右浮动 | - ==浮动特性== 1. 浮动元素会脱离标准流（脱标），不再保留原先位置 2. 浮动元素一行内显示且元素顶部对齐，无间隙 3. 浮动元素具有行内块元素的特性。未设置宽度浮动后大小根据内容决定 ==浮动盒子只影响后面的标准流，不会影响前面的标准流== - ==清除浮动== - 父盒子高度不好确定，子盒子浮动不占有位置，影响后续排版。故需清除浮动元素造成的影响。| 值 | 描述 | | -------- | -------------------------- | | h-shadow | 必须。水平阴影位置，可负值 | | v-shadow | 必须。垂直阴影位置，可负值 | | blur | 可选。模糊距离 | | color | 可选。阴影颜色 | ##### 浮动 - ==网页布局的本质==——用CSS来摆放盒子 - ==传统网页布局的三种方式== - 普通流（标准流/文档流） - **最基本的布局方式** - **标签按照规定好的默认方式。**如块级元素会独占一行，从上向下顺序排列。行内元素会按顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 - 浮动 - **改变元素的默认排列方式** - 浮动最典型应用：可以让多个块级元素一行内排列显示 - 网页布局第一准则：多个块级元素纵向排列用标准流，横向排列用浮动 - float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘 - 语法 ```css 选择器 {float: 属性值；}
| 属性值 | 描述 | | ------ | ------------ | | left | 清除左侧浮动 | | right | 清除右侧浮动 | | both | 清除两侧浮动 | - 清除浮动的策略：闭合浮动 - ==清除浮动方法==： | 方式 | 优点 | 缺点 | | --------------------- | ---------- | -------------------------- | | 额外标签法（隔墙法） | 通俗简单 | 添加无意义标签，结构化较差 | | 父级overflow: hidden; | 书写简单 | 溢出隐藏 | | 父级after伪元素 | 结构语义化 | 兼容性问题 | | 父级双伪元素 | 结构语义化 | 兼容性问题 | - ==隔墙法（额外标签法）== （W3C推荐） - 在浮动元素末尾添加一个空块级标签，设置浮动清除 - 优：简单 - 缺：无意义，结构化较差 - ==父级添加overflow属性== - 父元素添加overflow属性，设置属性值hidden/auto/scroll - 优：简单 - 缺：无法显示溢出部分 - ==父级添加after伪元素== - 原理同额外标签法 - 父元素clearfix类添加选择器 {clear: 属性值；}
- 优：未增加标签，结构简单 - 缺：照顾低版本浏览器 - 示例：百度、淘宝、网易 - ==父级添加双伪元素== - 双额外标签 - 父元素clearfix添加.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /* IE6、7专有 */ .clearfix { *zoom: 1; }
- 优：结构简洁 - 缺：照顾低版本浏览器 - 示例：小米、腾讯.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }定位
定位 = 定位模式 + 边偏移
定位特殊特性
- ==与浮动相似，相当于inline-block==
- ==行内元素+绝对/固定定位，可直接设置宽高==
- ==块级元素+绝对/固定定位，不给宽高默认自适应内容大小==
- ==浮动元素只压住标准流盒子，不会压住盒子里的文字/图片。浮动最初是为实现文字环绕效果==
- ==绝对定位/固定定位会完全压住盒子内容==
定位模式
用于指定一个元素在文档中的定位方式
通过CSS的position值设置
定位模式 是否脱标 移动位置 static 静态定位 否 不使用边偏移 relative 相对定位 否（占有位置） 相对自身位置移动 absolute 绝对定位 是（不占位置） 带有定位的父级 fixed 固定定位 是（不占位置） 浏览器可视区 sticky 粘性定位 否（占有位置） 浏览器可视区 静态定位
- 即无定位，默认定位方式
相对定位
- 以原位置为参照点，==原位置继续占有保留，不脱标==
绝对定位
固定定位
粘性定位
- 以浏览器可视窗口为参照移动元素（==固定定位特点==）
- 占有原先位置（==相对定位特点==）
- 必须添加top/bottom/left/right中一个才有效
- 与页面滚动搭配使用。兼容性较差，IE不支持
边偏移
决定该元素的最终位置
属性 描述 top 顶端偏移量，相对于父元素上边线距离 bottom 底部偏移量，相对于父元素下边线距离 left 左侧偏移量，相对于父元素左边线距离 right 右侧偏移量，相对于父元素右边线距离
定位叠放次序 z-index
- 控制盒子的前后顺序（z轴）处理盒子重叠的情况
- 数值为整数，不加单位。默认auto，数值越大越靠前
- 只有定位的盒子才有z-index属性
元素的显示与隐藏
- ==display==
- display: none; 隐藏不占有位置
- display: block; 块级转换，显示
- ==visibility==
- visibility: visible; 隐藏且占有位置
- visibility: hidden; 显示
- ==overflow== 溢出
- overflow: visible; 溢出显示
- overflow: auto; 溢出在需要时滚动显示
- overflow: hidden; 溢出隐藏
- overflow: scroll; 强制滚动显示
常见网页布局
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
- 其他属性（CSS3) content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient
导航栏
- 实际开发中，使用li+a代替直接使用链接a
- li+a语义更清晰
- 直接用a易被搜索引擎判别为关键字堆砌，进而影响网站排名
精灵图
- 当网页中图像过多时，服务器频繁接收和发送请求图片，造成服务器请求压力过大，将大大降低页面的加载速度。为==有效减少服务器接收和发送请求的次数，提高页面的加载速度==，出现==CSS精灵技术（CSS Sprites）==
- 精灵技术针对多个小背景图片，主要借助背景位置来实现——background-position,一般情况下精灵图都是负值（注意x、y坐标方向）
字体图标
- 使用场景：显示网页中通用、常用的一些小图标。若用精灵图，图片文件较大，图片本身放大缩小会失真，图片制作完成后更换操作复制。
- 字体图片==展示为图标，本质属于文字==
- 轻量级：加载无需渲染，减少服务请求
- 灵活性：按文字样式修改颜色、阴影、透明、旋转
- 兼容性：几乎支持所有的浏览器
CSS三角
不指定宽高为三角，指定宽高为梯形
div { width: 0; height: 0; line-height: 0; /* 兼容性 */ font-size:0 ; /* 兼容性 */ border: 10px solid transparent; border-left-color: pink; }
用户界面样式
鼠标样式 cursor
设置或检索在对象上移动的鼠标指针采用何种预定义光标形状
属性值 描述 default 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
表单轮廓 outline
- 表单添加outline: 0;或outline: none;样式可去除默认蓝色边框
防止表单文本域拖拽 resize
- 文本域textarea添加resize: none;
- (文本域标签域内无空白内容，可确保鼠标点击后定位非初始位置)
溢出文字省略号显示
推荐后台人员处理溢出文本限制显示
单行文本
- ```css
/* 1. 先强制一行内显示文本（默认normal 自动换行） /
white-space: nowrap;
/ 2. 超出部分隐藏 /
overflow: hidden;
/ 1. 文字用省略号替代溢出部分 */
text-overflow: ellipsis;- 多行文本 - 有较大兼容性问题，适合于WebKit浏览器(包括大部分移动端） - ```css overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒子对象子元素的排列方式 */ -webkit-box-orient: vertical;
- ```css
常见布局技巧
margin负值运用：解决盒子重叠边框加粗问题
- 每个盒子margin向左移动-1px，压住相邻盒子边框
- 鼠标经过盒子，提高当前盒子层级即可完整显示边框（考虑相对定位或z-index）
文字围绕元素浮动
- 浮动最初即为实现文字围绕效果
行内块运用
- 有缝隙，设置宽高，父级text-align易设置居中
CSS初始化
重设浏览器样式（CSS reset）
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0 } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif } body { /* CSS3 抗锯齿形 让文字显示的更加清晰 */ -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 }
HTML5新特性
增加新标签、新表单、新表单属性等
兼容性问题（IE9+以上版本浏览器才支持）
HTML5新增语义化标签
针对搜索引擎，可多次使用，IE9中需转换为块级元素
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
HTML5新增多媒体标签
方便在页面中嵌入音频和视频，不用使用flash和其他浏览器插件
浏览器支持情况不同，chrome禁用自动播放（视频添加muted可静音播放，音频只可通过JavaScript处理）
<audio> 音频(mp3、wav、ogg)
<audio src="文件地址" controls="controls"></audio><video> 视频(mp4、webm、ogg)
<video src="文件地址" controls="controls"></video>
HTML5新增input类型
属性值 说明 input=”email” 邮箱 input=”url” 链接 input=”date” 日期 input=”time” 时间 input=”month” 月 input=”week” 周 input=”number” 数字 input=”tel” 手机号 input=”search” 搜索框 input=”color” 颜色选择表单 HTML5新增表单属性
属性 值 说明 required required 必填非空 placeholder 提示文本 提示信息 autofocus autofocus 自动聚焦，页面加载完成聚焦到指定表单 autocomplete off/on 历史（表单内，有name属性，已成功提交），默认打开 multiple multiple 多选文件提交
CSS3新特性
兼容性问题，IE9+支持。移动端支持优于PC端。持续更新，应用广泛
CSS3新增选择器
属性选择器
- 类选择器、伪类选择器、属性选择器权重为10
选择符 说明 E[att] 选择具有att属性的E元素 E[att=”val”] 选择具有att属性且值为val的E元素 E[att^=”val”] 选择具有att属性且值以val开头的E元素 E[att$=”val”] 选择具有att属性且值以val结尾的E元素 E[att*=”val”] 选择具有att属性且值中含有val的E元素 结构伪类选择器
- nth-child把所有子元素排序（序号固定）后再选择和E匹配；nth-type先匹配类型E再把所有类型排序。n从0开始计算
选择符 说明 E:first-child 父元素中的第1个子元素E E:last-child 父元素中的最后1个子元素E E:nth-child(n) 父元素中的第n个子元素E.n可为数字、even/odd、公式（2n、n+5、-n+5…) E:first-of-type 指定类型E的第1个 E:last-of-type 指定类型E的最后1个 E:nth-of-type(n) 指定类型E的第n个 伪元素选择器
利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
创建元素，属于行内元素，在文档中不可见，称为伪元素。必须有content属性。
伪元素选择器和标签选择器一样，权重为1
选择符 简介 ::before 元素内部前面插入内容 ::after 元素内部后面插入内容 使用场景：
- 伪元素字体图标
- 伪元素遮罩效果
- 伪元素清除浮动
CSS3盒子模型
CSS3中可通过box-sizing（content-box / border-box）指定盒模型。使计算盒子大小方式发生改变。
- box-sizing:content-box; 盒子大小为 width+padding+border（默认）
- box-sizing:border-box; 盒子大小为 width
CSS3滤镜filter
将模糊或颜色偏移等图形效果应用于元素。
filter: 函数();CSS3 calc函数
在声明CSS属性值时执行一些计算。
CSS3过渡
过渡（transition）可以在不使用Flash或JavaScript情况下，为元素样式变换添加效果
transition: 过渡属性 花费时间 运动曲线 何时开始；
狭义的HTML5 CSS3
广义的HTML5: HTML5 + CSS3 + JavaScript
网站TDK三大标签SEO优化
SEO（Search Engine Optimization）搜索引擎优化，利用搜索引擎规则对网站进行深度优化，从而帮助获取免费流量，提升网站排名和知名度。
TDK
- title 网站标题
- 具有不可替代性，搜索引擎了解网页入口和主题最佳判断点
- 建议：网站名（产品名）-网站的介绍（尽量不超过30字）
- descript 网站说明
- 说明网站主要做什么
- keywords 关键词
- 页面关键词，搜索引擎关注点之一
- 最好限制为6~8个，逗号隔开
- title 网站标题
LOGO SEO优化
- 首先放h1标签，目的是提权，告诉搜索引擎此处重要
- h1里放链接，返回首页。将logo作为链接的背景图片
- 链接里放文字（网站名称），文字不显示，使搜索引擎收录
- 淘宝：text-indent移到盒子外面(text-indent:-9999px),overflow:hidden.
- 京东：font-size:0;
- 给链接添加title属性，鼠标悬浮显示提示文字