web前端学习笔记——CSS常用样式

文字三属性：

• 颜色color

  作用：给文字设置颜色

  属性名：color

  属性值：颜色名、颜色值

  颜色名：常用的一些

  颜色		颜色
  红色	red	黑色	black
  橙色	orange	白色	white
  黄色	yellow	金色	gold
  绿色	green	粉色	pink
  青色	cyan	浅黄色	lightyellow
  蓝色	blue	黄绿色	yellowgreen
  紫色	purple	天蓝色	skyblue

  颜色值：

  使用具体颜色的数值表示（rbg模式和十六进制模式）

  rbg模式：由红绿蓝三原色混合而成，取值范围（0-255）

  ​ 书写方法：rbg（红，绿，蓝）

  常用颜色的rbg色值：

  红色 rgb(255,0,0)

  绿色 rgb(0,255,0)

  蓝色 rgb(0,0,255)

  黑色 rgb(0,0,0)

  白色 rgb(255,255,255)

  灰色 rgb(128,128,128)

  十六进制：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进 制的 0–255 的数字。0->00,255->ff,在书写的时候，由#开头

  常用：

  红色 #ff0000

  绿色 #00ff00

  蓝色 #0000ff

  黑色 #000000

  白色 #ffffff

  灰色 #808080

  注:对于重叠的数字可以简化，例如红色：#f00，绿色：#0f0，但是#808080这种不能简化，即只能每个色的数值相同才能简化

• 字体font-family

  作用：定义元素内文字的字体。

  属性名 ：font-family，字体属于 font 综合属性的一个单一属性。

  属性值 ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分隔

    <p style="font-family: 'arial','微软字体'，宋体;"></p>
  

  常用字体：

  中文：宋体 Simsun 微软雅黑 Microsoft Yahei

  英文:Arial consolas

  注：

  1. 可以设置多个字体名称，但是在加载的时候，只会选择加载一个，顺序是从前往后，若浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体，所以需要在最后设置一个所有机器都支持的字体
  2. 中文字体中一般带有英文可以加载的效果，所以一般将英文字体写在最前面
  3. 若不设置字体属性，不同的浏览器有自己默认的字体

• 字号font-size

  作用：设置文字的大小。

  属性名 ：font-size，字号属于 font 综合属性的一个单一属性。

  属性值 ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位

  单位：

  相对长度单位	说明
  px	像素值，最常使用的单位
  em	倍数，继承自祖先元素设置的字号的倍数
  %	百分比，继承自祖先元素设置的字号的百分比

  绝对长度单位	说明
  in	英尺
  cm	厘米
  mm	毫米
  pt	点

  注：

  1. 若不设置字号，浏览器会有自己默认的加载字号
  2. 不同的浏览器有自己最小的加载字号，若设置的字号小于浏览器最小字号，浏览器会按照浏览器的最小字号加载
  3. 在实际运用中，网页的最小字号设置必须是12px，不然会出现兼容问题

盒子实体化三属性：

​ 如果在浏览器中，具体看到一个盒子实际占有位置，可以给盒子设置实体化三属性

属性名	属性值	说明
width	px	宽度
height	px	高度
background-color	颜色名、颜色值	背景颜色

<div style="width: 100px;height: 100px;background-color:pink;"></div>