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标签     
        @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标签会影响结构)
           
      、,它们的子一层必须是指定元素
              行级元素(标签)
                  一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,如:span|a|b|i|strong|img|input。。。
                  特点:
                      1、从左到右在同一行显示,触碰到页面边缘时会自动换行
                      2、设置的宽、高、行高属性没用(部分标签例外),在容器允许的范围内,实际的宽高度是由内容决定的!padding有效;margin左右有效,上下没用!
                          部分标签:img|input|select|textarea|button|label
                      3、行级元素只能包含其他行级元素或者文本内容,不能包含块级元素!
          3.无意义的块级元素(div)和行级元素(span)
              3.1、布局标签
                 

                 
                  没有任何内涵和样式,常用于布局!
              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;
              }


          比如判断浏览器
             
                  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
                      如:

                  可以延伸出追加伪元素清除浮动的写法:
                      .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标签,默认为inline-block,浮动后变成了block
              2. 去空格化


      position的absolute绝对定位
          1. 跟随性:元素设置了absolute后会留在原来的位置
              经常用于无依赖的绝对定位,脱离relative的掌控
          2. 包裹性
          3. 破坏性

      转载于:https://www.cnblogs.com/hoewang/p/10257256.html

      你可能感兴趣的:(CSS样式总结)