zoukankan      html  css  js  c++  java
  • 第三课 css样式

    课前提问及答案】

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

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


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

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

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

    1、css选择器:相当于一个标识,有3种选择器

      第一种选择器:标签选择器      body{};  p{ color:red;};  table{};  div{};  li{};  ol{};  ul{}; 

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

      优先级:标签 < class < id

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


    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    鼠标经过时的样式

               a:avtive        点击那一刻的样式

               LoVe HAte 原则:即按照上面四个从上到下的顺序才有相应的效果

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

  • 相关阅读:
    POJ 3258 (NOIP2015 D2T1跳石头)
    POJ 3122 二分
    POJ 3104 二分
    POJ 1995 快速幂
    409. Longest Palindrome
    389. Find the Difference
    381. Insert Delete GetRandom O(1)
    380. Insert Delete GetRandom O(1)
    355. Design Twitter
    347. Top K Frequent Elements (sort map)
  • 原文地址:https://www.cnblogs.com/mmtk/p/4669395.html
Copyright © 2011-2022 走看看