CSS基础——了解CSS

经过一段时间的学习，已经把html大部分知识撸了一遍，对于开发也算是入了个门，下一阶段的目标是学习CSS，接下来就开始初步了解CSS。

CSS格式

    <style type="text/css">
        h1{
            text-align: center;
            color: green;
            font-weight: bold;
        }
        p{
            text-align: center;
            color: red;
        }
    </style>

• 注意点：
  • style标签必须写在head标签中
  • type属性可不写
  • 设置样式时必须按照固定的格式来设置，：和；不省略

CSS文字属性

• 规定文字样式
  • 格式:

font-style: italic;

• 取值：
• normal：正常的，默认值
• italic：倾斜的
• 规定文字粗细
  • 格式：

font-weight: bold;

• 单词取值
  • bold：加粗
  • bolder：比加粗还粗
  • lighter：细线，默认值
• 数字取值
  • 100-900之间整百数字
• 规定文字大小
  • 格式：

font-size: 30px;

• 注意：一定要带单位，即px
• 规定文字字体
  • 格式：

font-family: "微软雅黑";

• 注意点：若取值是中文，则用单引号或双引号括起来
• 字体属性补充
  • 默认字体：宋体
  • 若设置字体不存在，但又不想用默认字体来显示咋办？
    • 可以设置备选方案
      格式：

font-family: "字体1","备选方案1",…;

• 缩写格式：

font:style weight size family;

• 注意点：
  • style，weight可以省略，且相互交换位置
  • size，family不能省略，且不能交换位置

文本属性

• 文本装饰属性
  • 格式：

text-decoration: underline;

• 取值：
  • underline：下划线
  • line-through：删除线
  • overline：上划线
  • none：什么都没有，常用于去掉超链接的下划线，默认值
• 文本水平对齐
  • 格式：

text-align: center;

• 取值：
  • left,居左，默认值
  • center，居中
  • right，居右
• 文本缩进属性
  • 格式：

text-indent: 2em;

• 取值：
  2em，em表示缩进一个文字

颜色属性

• 如何修改文字颜色
  • 格式：

color:值;

• 取值：
  • 英文单词
    • 常见颜色，有限制
  • rgb
    • 三原色
    • 格式：rgb(0,0,0);
  • rgba
    • a表示透明度，取值为0-1，取值越小越透明
    • 格式：rgba(0,0,0,1);
  • 十六进制
    • 本质就是RGB
    • #FFEE00 FF表示R，EE表示G，00表示B
  • 十六进制缩写