• CSS 样式表(小结)


    一、基本语法

    1table有哪些属性:width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align

              宽   高   边框  内框宽度  文字到边框距离 边框颜色  背景色 水平位置


    2body有哪些属性:bgcolor、background、text

             背景颜色  背景图片 文字颜色

     

    二、CSS重点回顾(一)

    1css选择器:

    相当于一个标识,有3种选择器

        第一种选择器:标签选择器     p{ color:red;}
      第二种选择器:class类选择器   .c1{ color:green;}   可被多次调用
      第三种选择器:id选择器      #d1{ color:blue;}    独有

      优先级:标签 < class < id

      注意:一个标签可以有多个class,但是只能有一个id

      样式的4种控制方法:

      1)行内样式

      2)内嵌式

      3)链接式

      4)导入样式

    <style>@import url(1.css)</style>

    2css文字效果:

      字体:font-family
          字号:font-size
          颜色:color
      粗体:font-weight
      下划线:text-decoration:underline ( 删除线:line-through; 顶划线:overline; 去掉下划线:none )
          英文首字母大写:text-transform:capitalize(全部大写:uppercase;全部小写:lowercase)
          字母间距:letter-spacing
          水平位置:text-align

      居中:

        水平居中:text-align:center
        垂直居中:line-height:300px;(和文字所在的div的高度一样)
    3css继承性:

      #d1 p 表示id为d1的标签下面的p标签
           #d1,p 表示id等于d1的标签和p标签

      注意:css具有继承性,只有字体相关的css属才能够被继承 (面试常问)
    4、表格边框:
                样式 粗细 颜色
      border: solid 1px red;

      等同于下面3句话:

      边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted)
           边框粗细:border-1px;
           边框颜色:border-color:red; 

    5、表格样式:

      1)表格标题:<caption>  属性:caption-side:bottom; (标题位于表格下方)

      2)边框重叠:border-collapse:collapse;(表格间隙合并)

      3)行列表头:th scope=”row” (行的表头) th srope=”col” (列的表头)
    6、背景:

      背景颜色:background-color:#00FF00;

      背景图片:background-image:url(路径);

      (注意:当图片的的大小,小于它所在的div时,图片会横向、纵向填满div)

      背景重复:background-repeat:no-repeat;(不重复:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)

      背景方位:background-position:5px 10px;(左边、上边)

      背景固定:Background-attachment:fixed;

      综合:

        background:blue url(xx.jpg) no-repeat fixed 5px 10px;

    7、超链接:

      1)去掉超链接下划线:text-decoration:none;

      2)效果:

        a:link    正常浏览状态的样式

        a:visited   被点击过的超链接样式

        a:hover    鼠标经过时的样式

      3)鼠标经过时手指:cursor:pointer;

    三、CSS重点回顾(二)

    1、块级元素的特点:

      1)块级元素里面的内容,或者背景图片,默认显示在块的左上角
           2)块级元素,默认情况下,单独占满一行。

      常用的块级元素:divph1-h6hrul liol litablebody...

     2、浮动:float 

      作用:通过漂浮,让块级元素实现并排

      float:left right

      注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动

      清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动)或both(同时清除两侧的浮动)

      简单说明:想排在一行就使用浮动(float:left,想提行就清除浮动(直接用 clearboth 即可,不用管左右)

    3、盒子模型:

      (1border边框
              border-top:上边框
              border-left:左边框
         
        border-right:右边框
              border-bottom:下边框

      (2padding内边距(框内文字距离框线的间距)有3种写法

        第一种:上下左右 padding:10px;
             第二种:上下左右 padding:10px 20px;
             第三种:上 padding:10px 20px 10px 15px;

        第四种:上左右 padding:10px 20px 10px;

      (3margin:外边距(边框对边框外其他内容的间距)有3种写法

        第一种:上下左右 margin:10px;
             第二种:上下左右 margin:10px 20px;
             第三种:上 margin:10px 20px 10px 15px;

        第四种:上左右 margin:10px 20px 10px;

       注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小widthheight的值来保持盒子原大小

      *{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0

     4、行内元素的特点:

      1)默认情况下,不受到heightwidth属性的影响

      (2)不会占满一行

      常用的行内元素:span(适用于一小节文字的样式设定)、a(链接)

      【备注】 display:block;   行内元素转成块级元素 

     5、绝对定位 & 相对定位:

      (1)绝对定位:position:absolute;

        当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响

        此时对它设置topleftrightbottom,就是针对窗体的距离

      (2)相对定位:position:relation;

        当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的

        此时对它设置topleftrightbottom,是针对上一级容器的距离

        【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高
               
    【请大家多多实践,结合浮动float、清除浮动 clear、绝对及相对定位】

     

    四、CSS重点回顾(三)

    1z-index=数字

      z轴的值,当几个div重叠时,z-index数字越大的,越在上面
      2overflowhidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条)
      3、浏览器兼容性问题:
      (1)兼容性问题:不同的浏览器基于不同的内核,对一些前端代码支持不一样,导致显示效果不一样
      (2)测试的各大浏览器:IE7-IE11(可使用IETester,不考虑IE6)、Opera、Safari、Chrome、Firefox
      (3)关于兼容性非常好的介绍文章:http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
        4、上下块级元素margin重合:以较大值为准,相当于两者重叠了(左右不受影响)
        5、上下块级元素和行内元素margin重合:可在行内元素display设置为block。 { display:block; }
        6、超链接样式:
      a:link    平时的链接样式
      a:visited   已访问过的链接样式
      a:hover    鼠标放上去时的样式
      a:active    鼠标点击时的样式
      必须按照以上顺序放(lvha)才会有正常的效果
        7、块级元素不靠边:*{ marin:0px; padding:0px}
        8ul在不同浏览器靠边问题:在IE中,ul的默认边距是margin,在Firefox中,ul的默认边距是padding,所以设置时margin和padding都设为0px
      9、行内元素的上下margin撑不开自己所在的块级元素的高度:需在行内元素上下各加一个<div style="height:0px;overflow:hidden"></div>辅助撑开

    五、CSS重点回顾(四)

    1、网站常见小图标调用方式:

      将所有小图标做在一张大图上a.png,然后根据横纵轴来调用。

      background:url("a.png") -23px -70px no-repeat;
       
    2、块级元素居中的常见写法:

      margin:0px auto;
       
    3、如何让超链接影响到整个块?

      将行内元素变成块级元素:display:block 

    4、文本框只留下面一条线:

      { border-0px;  border-bottom:solid 1px #000; } 

    5、仿站:

      用所学知识制作一个完整的网站

      需要练习的同学,可以在小群群文件里下载、或者去官网下载网站实例照着仿站:

    6htmlcss常用易混短语总结:

      超出部分隐藏:      overflowhidden;

      行级元素变块级:     display:block; 

      下划线/去掉下划线:      text-decorationunderline/ none;   

      文字居中:                   text-align:center; 

      边框为实线:             border-style:solid;                              

      边框缝隙合并:          border-collapse:collapse;                     

      背景图片不重复:       background-repeat:no-repeat;     

      列表前无符号:          list-style-type:none;            

  • 相关阅读:
    【剑指Offer面试编程题】题目1504:把数组排成最小的数--九度OJ
    【剑指Offer面试编程题】题目1373:整数中1出现的次数--九度OJ
    【剑指Offer面试编程题】题目1372:最大子向量和--九度OJ
    【剑指Offer面试编程题】题目1371:最小的K个数--九度OJ
    vue路由传参
    Es5.Es6区别
    面向对象和面向过程
    vuex
    Vue脚手架使用
    vue中fetch请求
  • 原文地址:https://www.cnblogs.com/mmtk/p/4695246.html
Copyright © 2020-2023  润新知