zoukankan      html  css  js  c++  java
  • 盒子模型

    一.为什么使用CSS
         1.有效的传递页面信息
         2.使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
         3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
         4.具有良好的用户体验

      二.字体样式属性

         1.font-family:英文字体,中文字体  (类型)
          font-family: Times,"Times New Roman", "楷体";

         2.font-size:值单位      (大小)
          单位
           px(像素)
           em、rem、cm、mm、pt、pc

         3.font-style:normal(正常)、italic(斜体)和oblique(倾斜)  (风格)
          p span{
                    font-weight: 700;
                }

         4.font-weight: 700   (字体粗细)

          normal 默认值,定义标准的字体
          bold 粗体字体
          bolder 更粗的字体
          lighter 更细的字体
          100、200、300、400、500、600、700、800、900 定义由细到粗的字体
          400等同于normal,700等同于bold

         5.font:字体风格→字体粗细→字体大小→字体类型
          font:oblique bold 12px "楷体";
      三.文本样式
         1.color
           rgb(0,0,0)  取值在0~255之间
           rgba(0,0,0,0) 最后一位代表透明度,取值在0~1之间

         2.文本水平对齐方式text-align
           left 把文本排列到左边。默认值:由浏览器决定
           right 把文本排列到右边
           center 把文本排列到中间
           justify 实现两端对齐文本效果

         3.首行缩进
           text-indent:20px;

         4.行高
           line-height:30px;

         5.文本装饰
           text-decoration
           none 默认值,定义的标准文本
           underline 设置文本的下划线
           overline 设置文本的上划线
           line-through 设置文本的删除线

         6.文本垂直对齐
           vertical-align
           top:上对齐
           bottom:下对齐
           middle:中间对齐
         7.文本阴影
           text-shadow:颜色   x轴移动位置   y轴移动位置  模糊半径(0代表没有)

      四.超链接伪类
         a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
         a:visited 单击访问后超链接样式 a:visited {color:#333;}
         a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
         a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

      五.列表样式
         list-style-image: url(image/arrow-icon.gif);  列表项前图像
         list-style-type  指定列表项前图标
         none 无标记符号 list-style-type:none;
         disc 实心圆,默认类型 list-style-type:disc;
         circle 空心圆 list-style-type:circle;
         square 实心正方形 list-style-type:square;
         decimal 数字 list-style-type:decimal

      六.背景颜色和图像
        颜色:background-color
        图像:background-repeat:url(路径)
         repeat:沿水平和垂直两个方向平铺
         no-repeat:不平铺,即只显示一次
         repeat-x:只沿水平方向平铺
         repeat-y:只沿垂直方向平铺
      七.渐变
        -浏览器内核-linear-gradient(方向,开始颜色,结束颜色)
        background:linear-gradient(to left,red,blue);
                 background:-webkit-linear-gradient(to left,red,blue)

  • 相关阅读:
    HDU 1058 Humble Numbers
    HDU 1160 FatMouse's Speed
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1003 Max Sum
    HDU 1297 Children’s Queue
    UVA1584环状序列 Circular Sequence
    UVA442 矩阵链乘 Matrix Chain Multiplication
    DjangoModels修改后出现You are trying to add a non-nullable field 'download' to book without a default; we can't do that (the database needs something to populate existing rows). Please select a fix:
    opencv做的简单播放器
    c++文件流输入输出
  • 原文地址:https://www.cnblogs.com/liu13-B/p/9934770.html
Copyright © 2011-2022 走看看