zoukankan      html  css  js  c++  java
  • CSS(CSS3)笔记

    1.CSS规则
      由两个主要部分构成:选择器以及一条或多条声明。
    2.选择器
        1)分类:
            基础选择器、复合选择器。
        2)基础选择器:标签选择器、类选择器、id选择器、通配选择器。
        3)复合选择器
            1 后代选择器:父 子(包含在父里面所有符合的子元素)
            2 子代选择器:父>子(最近一级元素亲儿子,不包含孙元素以下的)
            3 并集选择器:逗号分隔,任何形式选择器都可以
            4 伪类选择器:前面有个冒号
                4.1 链接伪类选择器
                    a:link --未被访问的链接
                    a:visited --已访问的链接
                    *a:hover --鼠标指针位于其上的链接
                    a:active --活动链接(鼠标按下未弹起)
                    *在样式表中,这几个选择器顺序不应该颠倒
                4.2 :focus伪类选择器
                    获取焦点的表单元素。
    3.字体属性
        font-family:字体(微软雅黑/Microsoft Yahei、Arial、Helvetica、sans-serif)
        font-size:大小
        font-weight:粗细(100-900,bold=700,无单位,normal=400)
        font-style:文本风格(normal倾斜/粗体标签改不倾斜/粗体等、italic倾斜)
        复合属性,简写方式:
            font:[font-style font-weight ]font-size/line-height font-family;--顺序不能变,/不是或的意思
    4.文本属性
        color:颜色(预定义颜色值、十六进制、RGB代码)
        text-align:center/left/right文本水平对齐
        text-decoration:none/underline/overline/line-through
        text-indent:缩进距离
            em:一个文字大小,如文字16px,则1em=16px。
        line-height:文字行与行的距离。(上间距+下间距+文本高度)
    5.样式表
        分类:行内样式表(行内式)内部样式表(嵌入式)、外部样式表
        <link rel="stylesheet" href="" />
    6.Emmet语法
        1)快速生成html结构语法
            1 输入标签名按tab键
            2 *生成多个标签
            3 >用来生成带子元素标签,如ul>li
            4 $为自增符号,如div.demo$*5
            5 标签内部写内容用{},如div{$}*5
            6 +是并排
        2)快速生成CSS样式语法
            1 w100 -->  100px;
            2 tdn --> text-decoration: none;
        3)格式化文档:shift+alt+F
        4)保存页面自动格式化代码
            1 文件-->【首选项】-->【设置】
            2 搜索emmet.include
            3 在settings.json下的【用户】中添加以下语句:
                "editor.formatOnType":true,
                "editor.formatOnSave":true
                *现在的版本可直接在正在格式化中勾选
    7.元素显示模式
        分类:块元素、行内元素
        1)块元素:h、p、div、ul、ol、li等
            特点:
                1 独占一行。
                2 高、宽、外边距、内边距都可控。
                3 宽度默认是父级容器的100%。
                4 是一个容器或盒子,里面可以放行内或者块级元素。
                5 文字类标签不能再放块元素,如h、p。
        2)行内(内联)元素:a、strong、b、em、i、del、s、ins、u、span等
            特点:
                1 相邻行内元素在一行上,一行可以显示多个。
                2 高、宽直接设置无效。
                3 默认宽度是本身内容的宽度。
                4 行内元素只能容纳文本或其他行内元素。
                5 链接里不能再放链接。
                6 a里面可以放块级元素,最好是转换成块级元素。
        3)行内块元素:img、input、td。
            特点:
                1 和相邻元素之间由空白间隙,一行可以显示多个。
                2 默认宽度为本身内容宽度。
                3 高度、行高、外边距以及内边距都可以控制。
        4)转换:display:block/inline/inline-block;
    8.截图小工具snipaste
        1)F1截图
        2)F3在桌面置顶显示
        3)点击图片,alt取色,按下shift可以切换取色模式
        4)按下esc取消图片显示
    9.背景
        1)背景颜色| color;
        2)背景图片background-image:none | url(url);
        3)背景平铺background-repeat:repeat(默认) | no-repeat | repeat-x | repeat-y;
        4)背景图片位置:background-position:x y;
            x,y可以是数值(px),可以是top/center/bottom/left/right的组合,可以是数值跟方位名词的组合,也可以只写一个。
        5)背景图片固定:background-attachment:scroll(默认) | fixed
        6)复合写法:background:颜色 图片地址 平铺 滚动 位置;(位置不固定,但一般这么写)
        7)背景色半透明:background:rgba(0,0,0,0.3);
            *最后一个参数是alpha透明度,0-1,0.3可写为.3。
    10.CSS的三大特性
        1)层叠性原则:遵循就近原则,哪个样式离结构近执行哪个。
        2)继承性:子标签会继承父标签的某些样式(与文字有关的,包括text-,font-,line-,color等),如文本颜色和字号。
            *恰当使用可降低CSS样式复杂性。
            *行高的继承:
                1 父:font:12px/24px '字体'; 子的行高是24px。
                2 父:font:12px/1.5 '字体'; 子的行高是自身字体大小的1.5倍。
        3)优先级:
            优先级权重如下
            继承或*  0,0,0,0
            元素选择器  0,0,0,1
            类选择器,伪类选择器,属性选择器  0,0,1,0
            ID选择器  0,1,0,0
            行内样式  1,0,0,0
            !important  无穷大
            1 权重叠加:复合选择器会有权重叠加的问题。
                如ul li复合选择器:0,0,0,1+0,0,0,1 = 0,0,0,2 > 0,0,0,1
                *权重虽然会叠加,但不会有进位的问题。
    11.盒子模型
        1)组成:border+content+padding+margin
        2)边框:border-width/style/color
            1 复合写法:border:width style color;
            2 只一边有边框:border-top/bottom/left/right
            3 表格的细线边框:border-collapse属性控制浏览器绘制表格边框的方式,控制相邻单元格的边框。
                border-collapse:colapse;表示相邻边框合并在一起。
            4 边框会影响盒子实际大小,盒子大小不包括边框。
        3)内边距:padding/padding-left/right/top/bottom
            1 padding两个值为上下和左右,三个值是上和左右和下,四个值是上右下左。
            2 padding影响盒子大小,撑大盒子大小。
            3 盒子不指定宽高,padding就不会撑大盒子。
        4)外边距:margin/margin-left/right/top/bottom
            1 应用:盒子水平居中:指定盒子宽度,左右外边距为auto。
            2 行内元素或行内块元素水平居中:text-align:center;
            3 相邻块元素垂直外边距合并:下面盒子的margin-top和上面盒子的margin-bottom会合并。
            4 嵌套块元素垂直外边距的塌陷:对于两个嵌套关系的块元素,父元素有上边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
                *解决方案:
                    为父元素定义上边框,或为父元素定义上内边距,或为父元素添加overflow:hidden;
    12.圆角边框
        border-radius:length;
        原理:圆和边框交集形成圆角效果。
        某个角圆角:border-top-right...
    13.盒子阴影
        box-shadow:h-shadow v-shadow[ blur spread color inset];
        h-shadow:水平阴影位置,允许负值。
        v-shadow:垂直阴影位置,允许负值。
        blur:模糊距离。
        spread:阴影的尺寸。
        color:阴影颜色。
        inset:将外部阴影改为内部阴影。(默认为outset,不允许写)
        *盒子阴影不占空间,不影响其他的元素。
    14.文字阴影
        text-shadow:h-shadow v-shadow blur color;
    15.传统网页布局的三种方式
        标准流、浮动、定位。
        *标准流:标签按照规定好默认方式排列。
    16.浮动
        float:none/left/right;
        1)特性:
            1 浮动元素会脱离标准流,不再保留原先位置。
            2 浮动元素会一行内显示并且元素顶部对齐。
            3 浮动元素会具有行内块元素的特征(如span有了浮动可以设置宽高等)。
        2)浮动元素经常搭配标准流父元素。
            1 网页布局第一准则:先用标准流的父元素排列上下位置,之后内部元素采取浮动排列左右位置。
            2 网页布局第二准则:先设置盒子大小,之后设置盒子的位置。
        *浮动元素只会影响它后面的标准流,不影响它前面的标准流。
        3)清除浮动
            clear:left/right/both;
            1 原因:子盒子浮动,脱标,父盒子没有高度就为0,不会被撑开盒子。
            2 本质:清除浮动元素脱离标准流造成的影响。
            3 方法:
                额外标签法/隔离法(块元素,结构化较差)、父级添加overflow:hidden/auto/scroll属性、父级添加after伪元素、父级添加双伪元素。
                *伪元素:
                    父元素:after{  --添加一个类
                        content:"";
                        display:block;
                        height:0;
                        clear:both;
                        visibility:hidden;
                    }
                    父元素{--IE6、7实现兼容
                        *zoom:1; 
                    }
                *双伪元素:
                    父元素:bofore,父元素:after{
                        content:"";
                        display:table;
                    }
                    父元素:after{clear:both;}
                    父元素{--IE6、7实现兼容
                        *zoom:1; 
                    }
    17.PS切图
        1)常见的图片格式
            1 jpg:JPEG对色彩的信息保留较好,高清,颜色较多,产品类图片经常用。
            2 gif:最多只能存储256色,通常用来显示简单图形及字体,可以保存透明背景和动画效果,实际经常用于一些图片小动画效果。
            3 pbg:新兴的网络图形格式,结合了gif和jpg优点,具有存储形式丰富的特点,能够保持透明背景,可以做到切成背景透明的图片。
            4 PSD图像格式是PS的专用格式,可存放图层、通道、遮罩等多种设计稿,可直接从上面复制文字,还可以测量大小和距离。
        2)切图
            方式:图层切图、切片切图、PS插件切图等。
            1 图层切图:
                最简单:右击图层->快速导出为PNG。
                或先合并图层再导出。
            2 切片切图:
                使用PS内切片工具手动划出。
                *隐藏背景可以切出透明背景的PNG图片。
                导出选中图片:文件菜单->导出->存储为web设备所用格式->选择要的图片格式->存储。
            3 PS插件切图:Cutterman插件,完整版PS才能安装。
    18.CSS属性书写顺序
        布局定位属性:display/position/float/clear/visibility/overflow
        ->
        自身属性:w/h/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:linear-gradient...
    19.定位
        定位=定位模式+边模式
        1)定位模式:
            position:static(默认)/relative/absolute/fixed;
        2)边偏移:
            top/bottom/left/right
        3)相对定位relative
            相对定位是元素在移动位置时,是相对于它原来位置来说的,类似于小学题目位移。
            注意:
                1 移动位置的时候参照点是自己原来的位置。
                2 不脱标,继续保留原来位置。
                3 一般给绝对定位做父亲。
        4)绝对定位absolute
            绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的。
            注意:
                1 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)。
                2 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
                3 脱标,不保留原来位置。
        5)子绝父相
            1 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他兄弟盒子。
            2 父盒子需要加定位限制盒子在父盒子内显示。
            3 父盒子布局时,需要占有位置,因此父亲只能时相对定位。
            4 父级需要占有位置,相对定位,子盒子不需要占有位置,据对定位。
        6)固定定位fixed
            固定定位是元素固定于浏览器可视区位置,主要使用场景,可以在浏览器页面滚动时元素位置不会改变。
            特点:
                1 以浏览器的可视窗口为参照点移动元素。
                2 跟父元素没有关系。
                3 不随滚动条滚动。
                4 固定定位脱标,不占有原先位置。
            *固定版心右侧位置
                1 让固定定位的盒子left:50%;。
                2 让固定定位的盒子margin-left:版心宽度一般距离。
        7)粘性定位
            可以被认为是相对定位和固定定位的混合。
            语法:position:sticky;top:10px;
            特点:
                1 以浏览器的可视窗口为参照点移动元素。
                2 粘性定位占有原先的位置。
                3 必须添加top/bottom/left/right其一才行。
            *兼容性差,IE不支持。
        8)定位叠放次序z-index
            *带定位的盒子才有效。
            值可以是正负或auto,值越大,盒子越靠上,值相同则按照书写顺序,后来居上。
        9)定位小总结
            1 行内元素添加绝对/固定定位,可直接设置宽高。
            2 块级元素添加绝对/固定定位,不给宽高,默认大小是内容大小。
            3 浮动/绝对/固定元素都不会触发外边距合并问题。
            4 绝对/固定定位会完全压住盒子,而浮动元素只会压住下面标准流盒子,不会压住下面标准盒子里面的文字/图片。
            *原因:浮动元素一开始只是为了做文字环绕效果,文字会围绕浮动元素。
        *绝对定位的盒子不能通过margin:0 auto;水平居中。利用固定版心右侧位置类似的方法实现水平/垂直居中。
        *或:left:calc(50%-自身宽度px/2);--calc为CSS计算属性
    20.元素的显示和隐藏
        1)display显示隐藏
            值:block|none
                不常用的值:
                inline|compact|market|inline-table|list-item|run-in|table|table-caption/cell|table-column|table-column/footer/header-ground|table-row|table-row-group
            *隐藏不占原有位置。
        2)visibility显示隐藏
            值:visible|hidden|collapse|inherit
            *隐藏继续占有原有位置。
        3)overflow溢出显示隐藏
            值:visible|auto|hidden|scroll
            *scroll不管需不需要(溢出)都有滚动条,但auto只在有需要才有滚动条。
    21.精灵图
        1)目的:为了有效减少服务器接收和发送请求次数,提高页面的加载速度。
        2)核心:
            1 主要针对背景图片,把多个小背景图片整合到一张大图片中。
            2 大图片称为sprites精灵图或雪碧图。
            3 利用background-position移动背景图片的位置。
            4 移动距离为目标图片的x,y坐标,一般都移动负值。
            5 使用精灵图需精确测量,每个小背景图片的大小和位置。
        3)缺点
            1 图片文件还是比较大的。
            2 图片本身放大缩小会失真。
            3 一旦图片制作完毕想要更换非常复杂。
    22.字体图标
        展示图标,本质是字体。
        优点:轻量级、灵活性、兼容性。
        *字体图标不能代替精灵技术。
        字体图标网站:IcoMoon(http://icomoon.io)
    23.三角形
        div {
            0;
            height:0;
            line-height:0;
            font-size:0;--这两行为了解决兼容。
            border:50px solid transparent;
            border-left-color:pink;
        }
        *长的三角形
        div {
            0;
            height:0;
            border-top:100px solid transparent;
            border-right:50px solid pink;
            border-bottom:0 solid blue;
            border-left:0 solid red;
        }
    24.用户界面样式
        1)鼠标样式cursor
            属性:
                default:小白,默认
                pointer:小手
                move:移动
                text:文本
                not-allowed:禁止
        2)轮廓线outline
            值:0或none,如表单获得焦点得到的轮廓线
        3)防止拖拽文本域resize
            值:none
        4)vertical-align
            1 概念:用于设置一个元素的垂直对齐方式,只针对行内元素/行内块元素。
            2 语法:vertical-align:baseline|top|middle|bottom;
            3 描述
                baseline:默认,元素放在父元素的基线上。
                top:把元素顶端与行中最高元素的顶端对齐。
                middle:把此元素放置在父元素的中部。
                bottom:把元素的顶端与行中最低的元素的顶端对齐。
            *图片底侧空白缝隙解决方案
                1 vertical-align:middle/top/bottom;--更推荐
                2 display:block;
        5)溢出文字省略号显示
            1 单行文本
                强制一行内显示文本:white-space:nowrap;--默认normal
                超出部分隐藏:overflow:hidden;
                超出部分用省略号显示:text-overflow:ellipsis;
            2 多行文本--存在兼容性问题,最好让后台来做更合适
                overflow:hidden;
                text-overflow:ellipsis;
                弹性伸缩盒子模型显示:display:-webkit-box;
                限制在一个块元素显示的文本行数:-webkit-line-clamp:2;
                设置或检索伸缩盒对象的子元素的排列方式:-webkit-box-orient:vertical;
    25.CSS初始化
        不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容。
        以下为部分京东CSS初始化
        * {
            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;
        }
        ......
    26.CSS3新特性--兼容问题
        1)属性选择器
            1 标签[属性]
                如input[value] {}
            2 标签[属性=值]--不用引号
            3 标签[属性^=值]--以‘值’开头
            4 标签[属性$=值]--以‘值’结尾
            5 标签[属性*=值]--含有‘值’的元素
        2)结构伪类选择器
            1 XX:first-child --第一个孩子
            2 XX:last-child
            3 XX:nth-child(n) --第n个孩子
                *n可以是数字、关键字(even偶/odd奇)和公式,直接写n选择所有孩子。
            4 XX:first-of-type
            5 XX:last-of-type
            6 XX:nth-of-type
            *两者区别:
                1 nth-child对父元素里面所有孩子排序选择(序号固定),先找到第n个孩子,然后看看是否和XX匹配。
                2 nth-of-type对父元素里面指定子元素进行排序选择,先去匹配XX,再根据XX找到第n个孩子。
        3)伪元素选择器
            1 ::before 元素前插入内容
            2 ::after 元素后插入内容
                *content必需的
            3 伪元素清除浮动
                额外标签法(不推荐)
                额外标签法的升级优化
                第一.clearfix:after {
                        content:"";
                        display:block;
                        height:0;
                        clear:both;
                        visibility:hidden;
                    }
                第二.clearfix:before,.clearfix:after {
                        content:"";
                        display:table;
                    }
                    .clearfix:after {
                        clear:both;
                    }
        4)盒子模型
            box-sizing:content-box|border-box;
            1 box-sizing:content-box盒子大小:width+padding+border(向来默认的)
            2 box-sizing:border-box盒子大小为:width --padding、border不会撑大盒子
        5)滤镜filter
            将模糊或颜色偏移等图形效果应用于元素。
            filter:函数();
            如filter:blur(5px); blur模糊处理,数值越大越模糊。
        6)计算盒子宽度函数
            calc();
            如calc(100px+100%);
        7)过渡
            transition:要过度的属性 花费时间[ 运动曲线 何时开始];
            属性:宽高、背景颜色、内外边距等,所有属性写all。
            花费时间:单位为秒。
            运动曲线:linear|ease|ease-in|ease-out|ease-in-out,默认ease。
            何时开始,单位为秒,延迟触发时间默认是0s。
            多个属性变化需利用,分开,或直接写all。
    27.申请免费远程服务器(免费空间)
        网址:http://free.3v.do/
        1 注册账号
        2 记录主机名、用户名、密码、域名
        3 利用cutftp软件上传网站到远程服务器
        4 在浏览器中输入域名,即可访问

    ————学习笔记
  • 相关阅读:
    公用表表达式(CTE)的递归调用
    c# 如何让tooltip显示文字换行
    实战 SQL Server 2008 数据库误删除数据的恢复
    SQL SERVER数据库中 是否可以对视图进行修改删除
    asp.net中实现文件批量上传
    sql server 2008学习2 文件和文件组
    sql server 2008学习3 表组织和索引组织
    sql server 2008学习4 设计索引的建议
    sql server 2008学习10 存储过程
    .net 调用 sql server 自定义函数,并输出返回值
  • 原文地址:https://www.cnblogs.com/atao24/p/13452648.html
Copyright © 2011-2022 走看看