博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
盒子模型
阅读量:5041 次
发布时间:2019-06-12

本文共 1708 字,大约阅读时间需要 5 分钟。

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

转载于:https://www.cnblogs.com/liu13-B/p/9934770.html

你可能感兴趣的文章
Android TextView加上阴影效果
查看>>
Requests库的基本使用
查看>>
C#:System.Array简单使用
查看>>
C#inSSIDer强大的wifi无线热点信号扫描器源码
查看>>
「Foundation」集合
查看>>
算法时间复杂度
查看>>
二叉树的遍历 - 数据结构和算法46
查看>>
类模板 - C++快速入门45
查看>>
centos7 搭建vsftp服务器
查看>>
RijndaelManaged 加密
查看>>
Android 音量调节
查看>>
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
查看>>
windows上面链接使用linux上面的docker daemon
查看>>
Redis事务
查看>>
Web框架和Django基础
查看>>
python中的逻辑操作符
查看>>
CSS兼容性常见问题总结
查看>>
HDU 1548 A strange lift (Dijkstra)
查看>>
每天一个小程序—0005题(批量处理图片大小)
查看>>
C# 启动进程和杀死进程
查看>>