CSS基础
使用格式： 选择器{内容1；内容2} 注意：这里没有"."
· 常用标签（自行查文档）
1. font-size字号大小；font-family字体；font-weight字体加粗； font-style字体风格（简写顺序：font-style font-weight font-size（不能省） font-family（不能省））
2. 颜色尽量使用十六进制，可简写；rgb(a)形式 #3c3c3c
3. line-height行高（trick：在一行的盒子内，设定行高=盒子高度可使文字垂直居中）； text-align水平对齐方式； text-indent首行缩进(em为单位，1em为一个汉字单位)； letter-spacing字间距； word-spacing单词间距（只针对英文）
颜色半透明CSS3
rgba（z,x,c,v），v范围0~1，表示透明度，越靠近0越透明
文字阴影CSS3
text-shadow：水平位置（阴影左右方向动），垂直位置（阴影上下方向动），模糊距离，阴影颜色
可以自己到网页上F12调整完毕后记录数据再回填到css中
· 选择器
类选择器
style中：.命名{内容1；内容2}
body中的被选元素：class=“命名”
“其中，命名不要用下划线而是短横线，不能用纯数字； 多个类名之间用空格分隔 ”
id选择器
style中： #命名{内容1； 内容2}
body中的被选元素： id=“命名”
通配符选择器
sytle中： * {内容1； 内容2}
作用是选中所有标签
伪类选择器
· 链接伪类选择器（主要针对a），尽量按照lvha的顺序 以上“a”可全用class类名代替
a:link{} 未选中时的状态
a:visited{} 访问过后的状态
a:hover{} 鼠标悬停时的状态
a:active{} 鼠标点击时的状态
· focus伪类选择器——把有光标的内容选中显示，主要针对input类型
：focus
· 结构伪类选择器
:first-child{} 第一个内容
:last-child{} 最后一个内容
:nth-child(选择第几个){} 自主选择内容
其中，（even)选择出偶数行/个内容，(odd)选择奇数行/个内容；（）内也可以写公式，例如2n或2n+1等等
:nth-last-child{} 倒数选择
· 目标伪类选择器
:target{} 谁被选中谁变化
属性选择器
style内：选择器[内容]，body中写入相应内容
伪元素选择器
选择单个元素，双冒号：：
::first-letter 第一个字
::first-line 第一行
::selection 选中时状态改变
::before 放在盒子内容的“里”前面
::after 放在盒子内容的“里”后面
· CSS样式表
内部样式表
行内样式表 style=“CSS的内容；CSS的内容”
外部样式表（推荐） 外部新开一个文档不需要写
· 标签显示模式
块级元素
1.只要写了就独占一行
2.可以设置宽度和高度、对齐、内边距等等
3.宽度默认是容器的100%
4.可以容纳内联元素和其他块级元素
div、p、h、ul、ol、li… 文字类块级元素不能再套块级元素
行内元素
1.相邻行内元素在一行
2.宽高无效，但水平方向的padding和margin可以设置
3.默认宽度就是它本身内容的宽度
4.只能放置其他行内元素和文本（a特殊）
a、span、b、strong、ins、em…
行内块元素
行内元素中的特殊标签，可以对他们设置宽高和对齐属性：img、input、td
1.和相邻行内元素在同一行，但之间会有空白缝隙
2.默认宽高是自身宽高
3.高度、行高、内外边距可以设置
标签显示模式转换display
块转行内：display：inline
行内转块：display：block
转换为行内块：display：inline-block
· 复合选择器
交集选择器
“.” 连接，单独声明
并集选择器
“,” 连接，集体声明
后代选择器
空格连接，继承声明，可以选择儿子、孙子、重孙子
子元素选择器
大于号连接，只能选择儿子
· CSS书写规范
· 选择器后面留一个空格
· 属性后立刻接冒号，毫号后跟空格
· 并集选择器一个选择器单占一行
· 选择器嵌套层级不超过三级
· 背景
背景图片引用与重复
背景图片位置
-
方位名词表示位置：top、right、left、center、bottom（可以组合表示左上、右下等）
background-position： 空格连接
-
坐标表示：以平抛运动坐标系为坐标系，左上角为图片质点。第一个值是x值，第二个值是y值
-
混搭 eg：10px center
背景附着
background-attachment：scroll（滚动）/fixed（固定）
背景简写
background：背景颜色 背景图片链接 是否平铺 背景位置
背景半透明
background：rgba（x,y,z,b）
背景缩放
background-size 只写一个值即可，支持px和%
cover（使用更多）：等比例填充，溢出部分隐藏； contain：等比例填充，不会溢出
多背景图片
逗号，隔开
凹凸文字
实质：文字+阴影
凸起：text-shadow：1px 1px 1px #000， -1px -1px -1px #fff
下凹：text-shadow：-1px -1px -1px #000， 1px 1px 1px #fff
· 文本的装饰
text-decoration
· CSS的三大特性
CSS层叠性
1.样式冲突，遵守就近原则。哪个样式离结构近，执行哪个样式
2.样式不冲突，不会层叠
CSS继承性
子标签会继承父标签的一些特性（text-，font-，line-以及color属性可以继承，并非所有属性都能继承）
CSS优先级
! important> 内部样式表style> id> 伪类= 类> 标签选择器
权重可叠加
· 数位之间无进制
· 继承的权重为0 ！！！
step：先叠加计算各种选择器=>看有无继承，继承为0（继承!=后代选择器）=>全都一样就近原则
· 盒子模型
盒子边框
简写语法 border:border-width border-style border-color
border-style属性：solid（单实线），dashed（虚线），dotted（点线），double（双实线）
可以自由选择上下左右边框
· 表格细线边框（表示边框合并在一起） border-collapse：collapse
· 圆角边框 borde-radius：px或%做单位
盒子内边距
padding 内容距离边框的距离
简写语法 padding：写一个/写两个/写三个/写四个（顺时针指示）
盒子外边距
margin 盒子之间的距离
居中对齐：左右auto，且必须是块级元素、盒子已制定宽度
1.文字水平居中：text-align：center； 盒子水平居中：左右设为auto
2.插入图片更改大小：weight和height，更改位置：margin或padding；背景图片更改大小：background-size，更改位置：background-position （一般情况用插入图片做展示）
清除内外边距
margin：0
padding：0
行内元素只有有左右边距，不给设置上下内外边距 此步骤配合通配符几乎必做
外边距合并
设置下边距100px，上边距50px，最后还是相距100px（以最大的为准）
外边框塌陷：解决方法：1.给父级元素设置边框border； 2.给父级元素设置内边距padding； 3.overflow：hidden
计算尺寸
外盒尺寸：width+border+padding（*2）+margin（ *2）
内盒尺寸： width+border+padding（*2）
改变任意一属性后，盒子尺寸会变化，需要改动weight或height（但在没有定义宽或高或继承后也没写宽高时改动padding不会影响盒子尺寸）
盒子模型布局稳定性
width>padding>margin
CSS3盒模型
box-sizing：border-box padding、border不撑开盒子，width即为全部包含的宽度，CSS3新的盒模型
box-sizing：content-box 经典盒模型
盒子阴影
box shadow：水平（必须） 垂直（必须） 模糊距离 阴影尺寸 阴影颜色 内/外阴影
· 浮动float
· 目的：让多个块级元素在同一行上显示
· 分类：普通流、浮动、定位
· 浮动元素不占高度
浮动可以使多个块级元素放于一行而无白间距，而转为行内块元素会使一行的元素之间有白间距
语法： float：left/right
标准流父级
浮动的元素总是找离他最近的父级元素对齐，而不会超出内边距的范围；子盒子浮动不会压住父盒子的padding
· 兄弟元素在一行，大家都需要加浮动
浮动影响盒子显示模式
块级元素加浮动：行内块
行内元素加浮动：行内块
版心和布局流程
1.确定版心：常见水平居中，宽度一般：960px，980px，1000px，1200px
2.分析页面行模块，再分析行模块中的列模块
3.制作html结构
4.写css，用盒子div+css
几种常见布局
详见html文件
清除浮动（所造成的影响）
一般情况下，由于不知浮动的子元素的尺寸所以父级元素不用写height
但此时子元素添加浮动效果后会造成父级元素高度为0，形成塌陷，进而其他元素跑到子元素底部而非固定于原位置。
clear关键字
- 额外标签法：在浮动盒子后添加一个空盒子，空盒子设置clear：both （因为添加标签所以少用）
- overflow法： 找到父元素，设置overflow：hidden
- after伪元素法（空标签升级版）：百度写法
4 .双伪元素法：小米、腾讯写法
· PS
移动工作和缩放变形
· 每工作一个部分时记得新建图层
ctrl+“+”：放大
ctrl+T=选中图片并可以改变大小；
鼠标配合shift键等比例缩放；
将第二张图从导航栏中拿下来后使用移动工具移动图片；
敲回车确定操作；
按住alt拉动图片=复制=ctrl+j
图层操作
ctrl+g=新建图片组； shift+ctrl+g=取消
shift+鼠标=水平&垂直&45度移动图片
ctrl+z=撤销一步；ctrl+alt+z=撤销多步
合并图层
ctrl+e操作
抠图
ctrl+d=取消选区
· 椭圆选区
shift+alt=以标准圆为选区
· 套索工具（多边形、磁性）
· 魔棒工具
大量选择，有容差
连续：有被分割的同舍弃部分不会被选中（高圆圆）
ctrl+shift+i=反选
· 选区布尔运算
单选、加选、减选、复选
· 钢笔工具（对应有横平竖直又有弧线的图片）
鼠标不松开=曲线选择
alt点击上一个末位置=重新直线
ctrl+回车=抠图
颜色填充
前景色填充=alt+delete
后景色填充=shift+delete
切图
· 切片工具
- 手动画出导出（backspace取消选取）
存储流程：切片选中=>导出为web格式=>png24格式（常用）=>空格+鼠标浏览长图=>保存选中切片
可以在导航栏设置水平或竖直划分为几片
- 利用图层切片
流程：选中图层=>导航栏选择“图层”=>新建基于图层的切片
- 利用辅助线切片
流程：拉出参考线=>选择“基于参考线的切片”
· 切片插件
·定位
相对于浮动是为了移动位置
元素的定位属性
1.边偏移（不管有没有padding的值，都按照最外边对齐）
2.定位模式
position：模式
完整模式=定位模式+边偏移
静态定位 static————对于边偏移无效，一般用来清除定位
相对定位 relative————不脱离标准流（不同于浮动），相对于自己来移动位置
绝对定位 absolute————脱离标准流（类似浮动）。父级未定位孩子会按照标准网页定位（孩子跑了），父亲有定位（absolute或relative）则以父亲为标准。
完成此效果：父子都加浮动（子绝父相）/只子加相对浮动（不推荐）
绝对定位水平垂直居中
水平步骤：走父盒子的left：50%=>向左走自己外边距负的一半值即可margin-left：npx
垂直步骤：走父盒子的top：50%=>向上走自己外边距负的一半值即可margin-top：npx
固定定位 fixed————总是以当前窗口浏览器为基准，不随上下移动而移动（客服图标）
叠放次序
z-index：0/正整数/负整数
定位模式的转换
fixed和absolute都会转换成行内块元素
元素隐藏
display：none（隐藏）/block（显示）————不保留位置
visibility：hidden（隐藏）/visible（显示）————保留位置
overflow
visible：不剪切也不显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条
hidden：不显示超过对象尺寸的内容，超出部分隐藏
scroll：不管是否超出内容，总是显示滚动条
·CSS高级技巧
CSS用户界面样式
· 鼠标样式cursor
default（默认小白） pointer（小手） text（文本） move（移动）
· 轮廓outline
outline：粗细 | 实虚 | 颜色
outline：0————取消外边线
· 防止拖拽文本域
resize：none
· 图片、表单、文字对齐
vertical-align：baseline | middle | top | bottom（对块级元素无效），默认的图片会和文字基线对齐
· 去除行内块图片底侧空白缝隙
1. 将img等转换成块级元素block
2. 改成vertical-align：top（用的最多）
· 溢出文字的隐藏
word-break：break-all允许单词拆开显示（单词内换行）
keep-all不允许拆开（连字符特殊）
white-space：normal
nowrap（强制文本在同一行）
text-overflow：前提是强制在一行显示（white-space：nowrap），其次必须和overflow：hidden搭配使用
text-overflow：ellipsis————溢出文字显示为省略号…
CSS精灵技术（sprite）
本质：将一个页面涉及的许多零星图片整合到一个大的图片中去，主要是使用background属性
· 精灵技术的使用
1. 切片先测量出图标宽高和图像坐标
2. style中设置宽高
3. background引入url、background-position：x,y(此处注意坐标值正负)
ps获取 xy值：使用切片，右键编辑切片，查看信息
· 制作精灵图片
- 精灵图上都是用来装饰的小图标，插入图片不能往上放
- 精灵图宽度取决于最宽的那个背景
- 每个小图标间隔开偶数个像素
- 最低端留一些空隙以后添加备用
· 使用场景
背景图片/背景图标比较多的时候
字体图标
使用流程：前提是下载好zip文件 1. 声明字体（注意路径问题） 2. 给盒子使用字体（style中） 3. 往盒子里添加元素（两种方式p218）
追加其他图标
· 问题：
1.背景图片用url后不显示————已解决。第一是文件路径不能有中文，第二路径的反斜杠" \ "要改成斜杠“ / ”
1740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
