码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础【2】:CSS常见属性

时间:2018-12-21 22:56:40      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:设置   indent   用途   显示   使用   简写   修改   倾斜   通过   

CSS常见属性

技术分享图片

文字属性

font-style

  • 作用:规定文字样式
  • 格式:font-style: italic;
  • 取值:
    • normal:正常的,默认就是正常的
    • italic:倾斜的

font-weight

  • 作用:规定文字粗细
  • 格式:font-weight: bold;
  • 单词取值:
    • bold 加粗
    • bolder 比加粗还要粗
    • lighter 细线, 默认就是细线
  • 数字取值:
    • 100 - 900之间整百的数字

font-size

  • 作用:规定文字大小
  • 格式:font-size: 30px;
  • 取值:px(像素 pixel)

font-family

  • 作用:规定文字字体
  • 格式:font-family: "楷体";
  • 取值:各种字体名称
  • 注意点:
    • 如果取值是中文, 需要用双引号或者单引号括起来
    • 设置的字体是用户电脑里面已经安装的字体

字体属性补充

  • 如果设置的字体不存在,那么系统会使用默认的字体来显示
  • 默认一般使用宋体
  • 如果设置的字体不存在,而我们又不想用默认的字体来显示,可以给字体设置备选方案
    • 格式:font-family: "字体1", "备选方案1", ... ;
  • 如果想给中文和英文分别单独设置字体,怎么办?
    • 但凡是中文字体,里面都包含了英文
    • 但凡是英文字体,里面都没有包含中文
    • 也就是说中文字体可以处理英文,而英文字体不能处理中文
  • 注意点:如果想给界面中的英文单独设置字体,那么英文的字体必须写在中文的前面

文字属性缩写

  • 缩写格式:

    font: style weight size family;
  • 例如:

    font: italic bold 10px "楷体";
  • 注意点:

    • 在这种缩写格式中有的属性值可以省略,sytle 可以省略,weight 可以省略
    • 在这种缩写格式中 style 和 weight 的位置可以交换
    • 在这种缩写格式中有的属性值是不可以省略的,size 不能省略,family 不能省略
    • size 和 family 的位置是不能顺便乱放的,size 一定要写在 family 的前面,而且 size 和 family 必须写在所有属性的最后

文本属性

text-decoration

  • 作用:给文本添加装饰
  • 格式:text-decoration: underline;
  • 取值:
    • underline 下划线
    • line-through 删除线
    • overline 上划线
    • none 什么都没有,最常见的用途就是用于去掉超链接的下划线

text-align

  • 作用:设置文本水平对齐方式
  • 格式:text-align: center;
  • 取值:
    • left 左
    • right 右
    • center 中

text-indent

  • 作用:设置文本缩进
  • 格式:text-indent: 2em;
  • 取值:2em,其中em是单位,一个 em 代表缩进一个文字的宽度

颜色属性

  • 在 CSS 中通过 color 属性来修改文字颜色

  • 格式:color: 值;

  • 取值:

    • 颜色英文单词(一般情况下常见的颜色都有对应的英文单词,但是英文单词能够表达的颜色是有限制的,也就是说不是所有的颜色都能够通过英文单词来表达)

    • rgb(rgb其实就是三原色,其中 r (red 红色) 、g (green 绿色)、b (blue 蓝色))

      • 格式:rgb(0, 0, 0)
      • 三个数字分别代表三原色的红色、绿色、蓝色显示的亮度
      • 这其中的每一个数字它的取值是 0-255,0代表不发光,255代表发光,值越大就越亮
      红色: rgb(255,0,0);
      绿色: rgb(0,255,0);
      蓝色: rgb(0,0,255);
      黑色: rgb(0,0,0);
      白色: rgb(255,255,255);
      灰色: rgb(200,200,200);
      只要让红色/绿色/蓝色的值都一样就是灰色
    • rgba

      • rgba 中的 rgb 和前面讲解的一样,只不过多了一个 a

      • a 代表透明度,取值是 0-1,取值越小就越透明

      • 例如:

        color: rgba(255, 0, 0, 0.2);
    • 十六进制

      • 通过十六进制来表示颜色其实本质就是RGB
      • 十六进制中是通过每两位表示一个颜色
      • 例如:#FFEE00,FF表示R,EE表示G,00表示B
      • 在 CSS中 只要十六进制的颜色每两位的值都是一样的,那么就可以简写为一位,例如:#FFEE00 相当于 #FE0

CSS基础【2】:CSS常见属性

标签:设置   indent   用途   显示   使用   简写   修改   倾斜   通过   

原文地址:https://www.cnblogs.com/qiuxirufeng/p/10158861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!