zoukankan      html  css  js  c++  java
  • CSS样式总结

    CSS相关概念
        1. CSS的定义
            Cascading Style Sheets 层叠样式表(级联样式表)
        2.  CSS的作用
            定义网页外观,如字体、背景、颜色等
        3. CSS特点
            ① 精确的定位 准确的控制页面的任何元素
            ② 精细的控制 可以做到像素级别的调整
            ③ 样式与内容的分离 便于维护,便于重用
        4. 发展历程
            ① CSS1   CSS1发布于 1996年12月17号
            ② CSS2   CSS2发布于 1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。
            ③ CSS3 CSS3 计划将 CSS 划分为更小的模块。2001年至今   HTML5+CSS3


    CSS的使用方式
        1. 内联样式(行内样式)
            在标签里面添加style属性,属性值 写css 代码
        2. 内部样式(通常定义在head头中)
            把css代码写在style标签中
            注意:style标签可以写在文件内部的任何一个地方,但是建议都放在head头内
        3. 外部样式(使用link标签引入单独的css文件)
            link标签      <link href="css文件地址" rel="stylesheet" />
            @import       @import "css文件地址";    注意:要写在css代码的前面
        ★:当样式的定义有冲突的时候,行内样式的优先级最高;其他两种看代码出现的顺序,后面的会覆盖前面的;


    CSS的基本语法
        1. CSS语法
            选择器:是你需要改变样式的 HTML 元素
            声明:
                声明都被包含在{}中;
                每条声明由一个属性和值组成,中间用冒号隔开;
                定义多条声明的时候,用分号隔开;
            实例:
                h1{color:red; background:blue;}
        2. CSS注释
            /* 注释内容 */
        3. 单位
            3.1 长度单位
                px      像素(推荐),屏幕上显示的最小单位;(字体大小默认16px)
                em      倍数   字体大小相对于默认的16px来翻倍
                %       百分比 字体大小相对于默认的16px来取百分比
                ========以上3个都是相对单位===========
                in      英寸
                pt      磅 (1 pt 等于 1/72 英寸),标准长度单位,通常用于印刷业
                mm/cm   毫米/厘米
            3.2 颜色单位
                1.颜色单词
                    red green blue yellow pink purple lightblue...
                2.以16进制表示, 取值范围0~f
                    #121212
                    提示:如果表示三原色的数值相同,可以简写
                    #00 00 00 = #000
                3.rgb
                    数字:     color:rbg(0~255, 0~255, 0~255)
                    百分比:   color:rbg(0~100%, 0~100%, 0~100%)
                    注意:不能混用!


    CSS的选择器
        通配符选择器
            *{margin:0px}
        HTML标签选择器
            p{color:red}
        CLASS类选择器
            .class名{color:red}
        ID选择器
            #ID名{color:red}
        ========= 注意:以上4种是基本选择器;请保持ID名的唯一性;class和ID选择器区分大小写,标签不区分
        
        后代选择器
            爹 后代{color:red}
            空格分隔,相当于找ul的后代中左右的a标签
        组合选择器
            a, h1, p{color:red}
        伪元素选择器(不能在行内样式使用)
            选择器:link        设置没访问前的样式
            选择器:visited     设置访问过后的样式
            选择器:hover       设置鼠标放上来的时候的样式(最常用)
            选择器:active      设置鼠标点击还没放开的时候的样式


    选择器的优先级
        ID选择器 > CLASS选择器 > 标签选择器


    CSS中常见的属性和值
        1、字体属性
            font            设置字体所有属性
                font: [粗细] [斜体] 30px '楷体';
            font-size       字体大小(常用的)
            font-family     用哪一种字体
            font-weight     字体粗细
                值:100-900的整百数!600以上为粗体,其他为正常大小
            font-style      字体样式
                italic  设置为斜体
        2、颜色属性
            color   值参考基本语法中的颜色单位
        3、背景属性
            background              任意组合各种子属性(用起来很爽)
            background-color        背景颜色
                background-color:#ccc;
            background-image        背景图片
                background-image:url('../html03/img/f.gif');
            background-repeat       背景图片的平铺方式  
                值:repeat(默认)  no-repeat(不平铺)  repeat-x  repeat-y
                background-repeat:no-repeat;
            background-position     背景图片的位置(九宫格或者像素)
                值:left center right top bottom 像素
                background-position:10px 100px;
            background-attachment   背景图片相对于谁滚
                值:fixed(相对于窗口滚)     scroll(相对于元素滚)    local(默认,跟着内容滚)
            
        4、文本属性
            letter-spacing      设置字间距   (值:长度单位)
            word-spacing        设置词间距   (值:长度单位;空格区分一个词)
        ### text-indent         设置首行缩进 (值:长度单位;通常为2em,缩进两个汉字) 
            text-transform      大小写转换
                值:capitalize(每个单词的首字母大写)  uppercase(全大写)  lowercase(全小写)
        ### text-decoration     设置线
                值:none(没有)  underline(下划线)  overline(上划线)  line-through(删除线)
        ### text-align          水平对齐方式
                值:left   center     right
        ### vertical-align      行级元素基于本行的垂直对齐方式
                值:
                    baseline 默认
                    middle  默认与下标位置之间
                    sub     下标位置
                    super   上标位置
                    top     会找到最上面的哥们对齐
                    bottom  会找到最下面的哥们对齐
                    100px   直接设置长度单位
        ### line-height         设置行高,通常用于文本垂直居中
            word-wrap           break-word:设置超长变态的单词自动换行


        5、边框属性
            border          必须记住,设置元素的边框
                border:1px solid red;   //顺序无所谓
            border-width    设置边框的宽度
            border-color    设置边框的颜色
            border-style    设置边框的样式:solid|dashed|dotted...(见:./border-style.html)
            #可以单独设置上下左右某一条边框,知道就行,有兴趣的可以测试一下
            border-top
                border-top-width
                border-top-color
                border-top-style
            border-bottom
                border-bottom-width
                border-bottom-color
                border-bottom-style
            border-left
                border-left-width
                border-left-color
                border-left-style
            border-right
                border-right-width
                border-right-color
                border-right-style
        6、鼠标指针样式属性
            cursor  设置鼠标指针样式
                值:pointer|move|not-allowed|wait|progress... (见:./cursor.html)
        7、列表属性
            list-style              通常是去掉前面的点:list-style:none;
            list-style-type         设置图标类型:circle|square... (见:list-style-type.html)
            list-style-image        设置图标图片
            list-style-position     设置图标位置:inside|outside
        8、表格属性
            table-layout:   设置表格为固定布局:auto|fixed
            border-collapse:  设置td的边框相邻合并;默认为独立的
                值:separate(默认独立)  collapse(相邻合并)




    网页布局(DIV + CSS)
        HTML网页:标准文档流(从左往右,从上往下)由标签构成
        浏览器把每一个标签都看做是一个盒子!(烟盒)


    布局相关概念:
        1.盒子模型
            1.1 定义: 任何一个元素都可以抽象一个盒子模型, 盒子里面可以嵌套盒子
            1.2 组成: 元素内容(有宽高)、内边距(补白)、边框、外边距(补白)
            1.3 相关属性:
                       width  height  盒子的宽高
                       border       盒子的边框
                       padding      盒子的边框距离盒子的内容的距离
                       margin       盒子的边框距离上一个盒子或父元素的距离,可以为负值
            1.4 盒子模型的宽高
                 盒子的宽 = 内容的宽 + 左右内补白 + 左右边框


        2.标签分为块级元素和行级元素
            块级元素(标签)
                一般用来搭建网站架构、布局、承载内容……像这些大体力活都属于块级元素的
                    如:div|ul|li|dl|dt|p。。。
                特点:
                    1、从左到右撑满页面,独占一行。
                    2、如果没有设置宽度,默认是它容器宽度的100%
                    3、块级元素可以包含其他块级元素或者行级元素(P标签除外)
                        部分标签:h1~h6、p、dt。。。(html语法检测的编辑器会报错,只有p标签会影响结构)
                <ul>、<ol>、<dl>、<table>,它们的子一层必须是指定元素
            行级元素(标签)
                一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,如:span|a|b|i|strong|img|input。。。
                特点:
                    1、从左到右在同一行显示,触碰到页面边缘时会自动换行
                    2、设置的宽、高、行高属性没用(部分标签例外),在容器允许的范围内,实际的宽高度是由内容决定的!padding有效;margin左右有效,上下没用!
                        部分标签:img|input|select|textarea|button|label
                    3、行级元素只能包含其他行级元素或者文本内容,不能包含块级元素!
        3.无意义的块级元素(div)和行级元素(span)
            3.1、布局标签
                <div></div>
                <span></span>
                没有任何内涵和样式,常用于布局!
            3.2、行级元素和块级元素的转换(display)
                display    inline|block|inline-block|none
                扩充:IE7不支持inline-block,解决方法:首先将其变成行内元素,使其具有行内元素的特性,然后触发haslayout,使其具有块级元素的特性,如此就可以模拟出inline-block的效果
                div{
                    display:inline-block;
                    *display:inline;
                    *zoom:1;
                }


        4.盒子的浮动
            浮动的盒子可以脱离文档流;脱离了文档流后,其他的块级元素会无视这个盒子的存在
            需要注意的是:元素中的文本依然会为它让出位置,环绕在它周围
            float属性,值有right|left|none
        5.盒子的定位
            相对定位
                相对于自己原先的位置定位,配合left|right|top|bottom使用,不会脱离文档流,不影响其他元素的布局;可以与其他元素重叠,但它原本所占的空间不会改变
            绝对定位
                相对于离自己最近的已定位父元素,如果没有找到,那么它的位置相对于浏览器的可视窗口;脱离了文档流,其他元素(包括元素中的文本)会无视它
            固定定位
                固定定位,固定在浏览器的某个位置,不随滚动条的滚动而滚动
        6.margin的特性
            1、两个盒子的水平外边距margin值会相加(正常理解),累加显示
            2、两个盒子的垂直外边距margin值会重叠,以最大的为显示标准
            3、父元素的第一个子元素的[上边距](只有上边距)margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。将自己的margin应用到“领导”的身上;
                解决:
                    1、给父元素加有效的border或者padding(不能为0)
                    2、或者设置父元素的overflow:hidden
        7.盒子的嵌套
            1、如果子元素的宽高超出了父元素,可以通过overflow来控制超出部分
                auto 自动 | hidden 隐藏 | scroll 滚动条
            2、当子元素浮动后,父元素的高度不会被撑开了!就像橡皮筋一样
                解决:
                    1、让父元素也浮动起来
                    2、给父元素加上overflow属性
        8.居中
            水平居中
                text-align  可以让文本和行级元素水平居中,设置在要居中元素的父级元素上
                margin:0 auto  可以让块级元素水平居中,设置在要居中的元素本身上
            垂直居中
                line-height 和父元素的height相等,可以让文本和行级元素垂直居中,设置在要居中元素的父级元素上(只能有1行文本)
                块级元素垂直居中:(画图中心点演示)
                    position:absolute;
                    top:50%;
                    margin-top:当前元素高度的一半
        9.隐藏元素
            visibility:hidden   隐藏元素,但保留其物理空间
            display:none    隐藏元素,不保留空间


    布局相关的属性
        1、尺寸
            width       设置内容的宽
            height      设置内容的高
        2、内边距
            padding
                padding:四边
                padding:上下  左右
                padding:上  左右  下
                padding:上  右  下  左
            padding-top     上
            padding-right   右
            padding-bottom  下
            padding-left    左
        3、外边距
            margin
                margin:四边
                margin:上下  左右
                margin:上  左右  下
                margin:上  右  下  左
            margin-top      上外边距
            margin-right    右外边距
            margin-bottom   下外边距
            margin-left     左外边距
        4、布局
            display     设置元素的显示方式
                值:
                    none    隐藏元素,很彻底的隐藏,不保留物理空间(化尸粉,毁尸灭迹)
                    block   显示为块级元素
                    inline  显示为行级元素
                    inline-block    显示为行内块级元素(类似于img、input标签,可以设置宽高)
            float       设置元素浮动方式
                值:
                    left    往左浮动
                    right   往右浮动
                    none    不浮动(默认)
            clear       清除浮动。一般用于被浮动所影响的(块状)元素上
                值:
                    both    清除两边的浮动(常用)
                    left    清除左浮动
                    right   清除右浮动
            overflow
                值:
                    auto    溢出就显示滚动条,没超出就算了
                    hidden  溢出隐藏
                    scroll  溢出滚动(有没有超出都有滚动条的位置)
            overflow-x  设置水平方向的溢出方式,值和overflow一样
            overflow-y  设置垂直方向的溢出方式,值和overflow一样
            visibility  设置元素的可见性
                值:
                    hidden  隐藏可见元素
                    visible 显示元素(默认)
        5、定位
            position    设置元素的定位方式
                值:
                    relative    相对定位
                    absolute    绝对定位
                    fixed       固定定位,固定在浏览器的某个位置,不随滚动条的滚动而滚动
            z-index     设置元素的堆叠层级
                值为一个整数,越大优先级越高;可以有负值
                注意:必须设置了postion的属性才有效!如果值相同,写在后面的会覆盖前面的


    布局
        1.取消标签的默认样式
            body、h1~h6、p、ul 的margin值
            img的border值(IE默认有边框)
            a标签的text-decoration:none
        2.子元素继承父元素的属性设置
            字体、颜色、文本相关的属性,子元素会继承父元素的
                比如:在body中设置了字体样式,所有元素都会生效
            跟布局相关的属性,不会被继承;
                比如:边框、内边距、外边距、宽高、背景。。。


    /********************* CSS3 **********************/
    选择器
        元素选择器
            通配符 *
            标签选择器  li|div|a|b
            ID选择器
            类选择器
        关系选择器
            后代选择器   ul li{...}
                ul的后代li
            儿子选择器   ul > li{...}
                ul的儿子li(不包括孙子)
            相邻选择器   ul + div{...}
                ul后面紧挨着的div
            相邻选择器   ul ~ div{...}
                ul后面所有的div
        属性选择器
            E[attr]
                包含attr属性的E元素
            E[attr="val"]
                attr属性等于某个值的E元素
            E[attr^="val"]
                包含attr属性,并且值是以val开始的E元素
            E[attr$="val"]
                包含attr属性,并且值是以val结尾的E元素
            E[attr*="val"]
                包含attr属性,并且值里面包含val的E元素
            E[attr~="val"]
                包含attr属性,并且值用空格分割后还包含val的E元素
            E[attr|="val"]
                包含attr属性,并且值用|分割后还包含val的E元素
        伪类选择器
            E:link
            E:visited
            E:hover
            E:active


            E:first-child
            E:last-child
            E:nth-child(n)
            E:only-child
            E:not(选择器)
            E:empty
            E:focus
            E:checked
            ...
    颜色
        设置元素的透明度:rgba(0~255, 0~255, 0~255, 0~1(透明度));
        transparent  设置为全透明
    属性
        边框圆角
            border-radius
            border-left-top-radius
            border-left-right-radius
            border-bottom-top-radius
            border-bottom-right-radius
        盒子阴影
            box-shadow
        文字阴影
            text-shadow:5px 5px 10px yellow;
            -webkit-text-stroke:1px red;


        兼容写法:
            -webkit-        表示chrome谷歌浏览器
            -moz-           表示firefox火狐浏览器
            -o-             表示opera欧朋浏览器
            -ms-            表示IE浏览器






    /****************** 以下均为扩充知识 ******************/


    css hack
        由于各大浏览器对CSS的解析认识不完全一样,所以可以用css hack使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。


        比如:
            比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不认识


            /*以下代码在IE7是蓝色,标准浏览器是红色*/
            p{
                color:red;  
                *color:blue;
            }


        比如判断浏览器
            <!--[if lte IE 8]>
                您的破浏览器太老了, 请到 <a href="http://browsehappy.com/">这里</a> 更新, 以获取最佳的体验
            <![endif]-->
                lt <
                gt >
                lte <=
                gte >=




    关于inline-block后的换行符产生空格问题:
        » block水平的元素inline-block化后,IE6/7没有换行符间隙问题,其他浏览器均有;
        » inline水平的元素inline-block后,所有主流浏览器都有换行符/空格间隙问题;
        » font-size:0,去除换行符间隙,在IE6/7下残留1像素间隙,Chrome浏览器无效,其他浏览器都完美去除;
        » letter-spacing负值可以去除所有浏览器的换行符间隙,但是,Opera浏览器下极限是间隙1像素,0像素会反弹,换行符间隙还原。




    CSS的浮动
        float 用于设置css的浮动
            之所以会出现浮动,是为了实现文字的环绕效果,并不是为了高大上的布局


        浮动的特性:
            1. 包裹
                一般有3中表现形式:
                    1. 收缩
                        没设置宽高的情况下,宽高会收缩到和内容差不多
                    2. 隔绝
                        里面发生的事情,与外部无关


                具有包裹的其他属性:
                    display:inline-block|table-cell
                    position:absolute|fixed
                    overflow:hidden|scroll //待定
            2. 破坏
                一般表现为父元素高度塌陷,主要目的是为了实现文字环绕效果
                具有破坏性的其他属性:
                    display:none
                    position:absolute|fixed


        减轻浮动破坏性的两大方法
            1. 在浮动元素底部插入clear:both 清除浮动
                插入一个block块状元素,并加属性clear:both
                    如:<div style="clear:both"></div>
                可以延伸出追加伪元素清除浮动的写法:
                    .fix::after{content:'';display:table;clear:both;}
                    .fix{zoom:1;/*兼容IE6/IE7*/}
            2. 让父元素BFC(Block Formatting Context)
                能够让父元素BFC的属性:
                    1. float:left|right
                    2. position:absolute|fixed
                    3. overflow:hidden|scroll (常用)
                    4. display:inline-block|table-cell(IE8+)
                    5. zoom:1 (IE6/IE7)


        浮动后的元素有两种情况,变得像砖块一样,所以被很多人用来布局砌墙:
            1. 会将元素块状化
                <button onclick="alert(document.defaultView.getComputedStyle(this).display)">按钮</button>


                button标签,默认为inline-block,浮动后变成了block
            2. 去空格化


    position的absolute绝对定位
        1. 跟随性:元素设置了absolute后会留在原来的位置
            经常用于无依赖的绝对定位,脱离relative的掌控
        2. 包裹性
        3. 破坏性
  • 相关阅读:
    HDU 4278 Faulty Odometer 8进制转10进制
    hdu 4740 The Donkey of Gui Zhou bfs
    hdu 4739 Zhuge Liang's Mines 随机化
    hdu 4738 Caocao's Bridges tarjan
    Codeforces Gym 100187M M. Heaviside Function two pointer
    codeforces Gym 100187L L. Ministry of Truth 水题
    Codeforces Gym 100187K K. Perpetuum Mobile 构造
    codeforces Gym 100187J J. Deck Shuffling dfs
    codeforces Gym 100187H H. Mysterious Photos 水题
    windows服务名称不是单个单词的如何启动?
  • 原文地址:https://www.cnblogs.com/hoewang/p/10257256.html
Copyright © 2011-2022 走看看