zoukankan      html  css  js  c++  java
  • 2015.7.8 第三课 课程重点(css:认识css样式)

    课前提问及答案】

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

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


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

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

    ---------------------------------------------------------------------------------------------------------------

    1、css选择器:相当于一个标识,有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>


    2、css文字效果:

      字体: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的高度一样)


    3、css继承性:

      #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;

  • 相关阅读:
    scm工作流部署问题解决
    mysql 数据库时间慢了8小时
    Vue加了二级路由后,跳转后js好像都失效
    flutter 莫名其妙错误集锦
    confluence-6.7.1 install
    git idea 项目复原
    springboot 本地jar发布,打war包
    flutter 初探2--点击按钮打开新窗口
    [转载]无法解决 equal to 操作中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_CI_AS_KS_WS" 之间的排序规则冲突
    [转载]天赋秉异的人永远是少数
  • 原文地址:https://www.cnblogs.com/59muyu/p/4631380.html
Copyright © 2011-2022 走看看