五.css语法元素
1.emmet语法
TAB键 生成标签
标签*个数 如：div*7快速生成多个相同标签
父级标签>子级标签 如：ul>li加TAB键 则快速生成
兄标签+弟标签 如：div+p加TAB键 则快速生成
.名字加TAB键，快速生成 如.名字 <div class="名字"></div>
#名字加TAB键，快速生成 如#名字 <div id="名字"></div>
标签.名字加TAB键 如：p.名字 <p class="名字"></p>
标签#名字加TAB键 如：p#名字 <p id="名字"></p>
$自增符号 如：.名字$*7加TAB <div class="名字1"></div> <div class="名字2"></div>
标签{文字} 如：p{字字字字字}(p{---}*数字)加TAB <p>字字字字字</p>
2.复合选择器
(1）后代选择器 选择所有后代
元素1 元素2 {样式声明} 元素2必须是1的子集
(2） 子选择器 只选择子集
元素1>元素2 {样式声明}
(3) 并集选择器
元素1,元素2 {样式声明} 竖着写，最后一个选择器不需要加逗号
(4) 伪类选择器 a代指标签名
a:link 选择未被访问过的链接
a:visited 选择访问过的链接
a:hover 选择鼠标经过的链接
a:active 选择鼠标正在按下未弹起的链接
按照lvha顺序不能改变顺序
:focus 用于选取获得焦点光标的表单，主要针对表单元素 如:input：focus{}
标签名
3.css的元素显示模式
(1) 块元素
自己独占一行，可以设置高宽，宽度默认容器的100%
是一个容器盒子里面可以放任何元素
文字类元素中不允许放块级元素，如<p>中不能放<div>
(2) 行内元素
相邻行内元素在一行上一行可显示多个，宽高直接设置无效
默认的宽度就是内容本身的宽度，只能容纳文本或其他行内元素
链接里不能再放链接，<a>里可以放块级元素
(3) 行内块元素
图片，表单，单元格
可以和相邻行内元素在一行上，但之间有空隙，一行可以放多个（行特点）
默认宽度就是本身内容宽度（行特点）
宽高以及内外边距都可以控制（块特点）
(4) 元素显示模式的转化
display:block; 转换为块元素 写入style中
display:inline; 转换为行内元素
display:inline-block; 转换为行内块元素
(5) 单行文字水平居中 让文字行高等于盒子高度
4.css的背景
(1) 背景颜色 backround-color
backround-color: transparent透明色（默认）/颜色值;
(2) 背景图片 background-image
background-image:none/url(地址);
background-size:宽 高;
(3) 背景平铺 background-repeat
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
平铺 不平铺 沿x轴平铺 沿y轴平铺
默认情况下平铺
(4) 背景位置 background-position
background-position:top/center/bottom/left/center/right
上 中 下 左 中 右
background-position:x y/数字px 数字px;
(5) 背景图像固定 background-attachment
background-attachment:scroll/fixed;
默认滚动 背景固定
(6) 符合属性
无特定要求background：---属性---;
(7) 背景颜色半透明
background:rgba(0,0,0,0.3); a透明度值取值为0-1
(8)背景线性渐变 背景渐变必须添加浏览器私有前缀
background:-webkit-linear-gradient(起始方向，颜色，颜色);
5.css的三大特性
(1) 层叠性
如有重复内容后面的会覆盖前面的
(2) 继承性
子标签会继承父标签的某些样式 text- font- line-
font-size：12px（文字大小）/24px（行高）
font-size：12px/1.5 则行高为文字大小的1.5倍
(3) 优先级
优先执行:!important>行内样式style>ID选择器>类/伪类选择器class/.>元素选择器>继承或*
无穷大 1,0,0,0 0,1,0,0 0,0,1,0 0,0,0,1 0,0,0,0
权重叠加:复合选择器会有权重叠加，虽会叠加，但不会进位
要想达到想要的效果可以权威叠加
6.css的盒子模型
(1) 网页布局的本质
准备相关网页元素/设置盒子样式，摆到相应位置/给盒子中装内容
(2) 盒子模型的组成 写入style中 边框，内容，内外边距
.1. 边框border border-width 宽度(粗细) px为单位
border-style 样式 solod实线边框 dashed虚线边框 dotted点线边框
border-color 颜色 复写border:1px solid #ccc;无顺序
可以单独设置边框 border-top上/bottom下/left左/right右:属性;
表格细线边框 border-collapse:cillapse; 合并相邻边框
.2. 内边距padding padding-left/right/top/bottom:--px;
左内边距 右内边距 上内边距 下内边距
padding复合属性 padding：--px/--px/--px/--px;
一个值：上下左右的内边距，两个值：上下/左右，三个值：上/左右/下，四个值：上/右/下/左 顺时针
padding不会撑开盒子的情况：不设置width/height
.3. 外边距margin margin-left/right/top/bottom 盒子与盒子之间的距离
左外边距 右外边距 上/下外边距
margin复合属性 margin：--px/--px/--px/--px;
一个值：上下左右的外边距，两个值：上下/左右，三个值：上/左右/下，四个值：上/右/下/左 顺时针
(3) 盒子元素居中对齐
块级盒子水平居中对齐：盒子必须指定宽度width，盒子左右外边距都设为auto自动 如margin:0 auto;上下0 左右auto
行内元素和行内块元素水平居中：给其父级元素添加text-align:center;
(4) 外边距合并-嵌套块元素塌陷（标准流）
给父级元素定义一个边框如border:1px solid transparent(透明);
给父级元素定义一个内边框如padding:1px;
给父级元素添加overflow:hidden;
浮动的盒子不会有外边距合并问题
(5) 清除内外边距
*{
margin: 0;
padding: 0;
}
行内元素尽量只设置左右内外边距
7.盒子浮动
(1) 圆角边框border-radius:;
border-radius:--px/%;， 圆形边框50%设置为高度宽度的一半
半径 圆角矩形设置为高度的一半
border-radius:一个值是四个角/两个值则是对角线角/四个值是顺时针四个角
分开写:如border-top-left-radius:; 先top/bottom后left/right
(2) 盒子阴影box-shadow:;
box-shadow: --px --px --px --px color; inset;
x轴水平阴影 垂直 模糊虚实程度 阴影尺寸大小 颜色 内阴影(默认外阴影不用写)
盒子阴影不占用空间，不影响其他盒子排列
(3) 文字阴影text-shadow:;
text-shadow:--px --px --px color;
x轴 y轴 虚实程度 颜色
(4)浮动float:left/right;
特性:脱标，浮动元素一行显示，浮动元素具有行内块元素
.1.脱标：脱离标准普通流的控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置
.2.浮动元素一行显示
浮动的盒子一行内显示顶端对齐排列
.3.浮动元素具有行内块特性
任何元素都可以浮动，任何元素添加浮动后都会具有行内块特性
如果块级盒子没有设置宽度，默认宽度和父级一样，但添加浮动后，他的大小根据内容决定
.4.先用标准流父元素排列上下位置，内部子元素采取浮动排列左右位置
浮动的盒子不会影响前面的标准流，只会影响后面的标准流，压住后面的盒子
(5)清除浮动clear:both;
同时清除左右两侧浮动的影响，闭合浮动
.1.额外标签法/隔墙法
style> .名字{clear:both;}
body> <标签 class="名字"> </标签>
在最后一个浮动元素的后面加一个空标签，要求新添加的空标签必须是块级元素
.2.父级添加overflow属性
style> overflow:hidden/auto; 溢出部分隐藏/溢出加滚动条
.3.父级添加after伪元素
style> 照顾低版本
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:heidden;}
.clearfix{*zoom:1;}
body> 给父级添加类名class=clearfix 类似于额外标签法
.4.父级添加双伪元素！！！
style> 照顾低版本
.clearfix:before,
.clearfix:after{
content:"";
display:table;}
.clearfix:after{
clear:both;}
.clearfix{*zoom:1;}
body> 给父级添加类名class=clearfix
8.ps
(1)切图
ipg图片 gif动图 png 透明背景
.1.图层切图
移动工具/在图片中点击目标图片/右边图层上右键 快速导出为PNG
合并图层 shift多选ctrl+E合并
.2.切片切图
切片选中工具手滑/文件菜单/导出/储存为web设备所用工具/选择图片格式/储存/选中的切片
9.页面布局思路
(1)确定版心-确定行模块-先确定每个列的大小,再确定列布局---先结构后样式
(2)导航栏
.1.链接 不直接用a，而是用li包含链接(li+a)的做法
.2.导航栏可以不用给宽度，便于将来继续添加文字
.3.导航栏里文字不一样多，所以给链接a左右padding撑开盒子，而不指定宽度
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
