zoukankan      html  css  js  c++  java
  • css美化

    笔记:
      一.为什么使用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);

  • 相关阅读:
    面向对象的程序设计-2-创建对象
    面向对象的程序设计-1-理解对象
    react组件的生命周期
    react-router 组件式配置与对象式配置小区别
    mobx @computed的解读
    十分钟介绍mobx与react
    less学习
    git-简单流程(学习笔记)
    几种视频编码器的编译及使用方法
    一位程序员工作10年总结的13个忠告
  • 原文地址:https://www.cnblogs.com/liu13-B/p/9895520.html
Copyright © 2011-2022 走看看