Web笔记（基础5）

 五.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撑开盒子，而不指定宽度