CSS学习：CSS基础，常用属性（文字&盒子）

CSS学习：CSS基础，常用属性（文字&盒子）

CSS基础

• CSS有两个重要的概念，分别是样式和布局。
• CSS的样式分为两种，一种是文字的样式，一种是盒模型的样式。

---

• CSS的另一个重要的特性就是辅助页面布局，完成HTML不能完成的功能，比如并排显示，比如精确定位显示。

前端三层

（从HTML4.0开始，结构层和样式层进行了分离）

• 结构层：HTML作用是从语义的角度讲进行网页结构的搭建。
• 样式层：CSS作用从美观的角度讲修饰页面样式。
• 交互层：JavaScript作用从交互的角度讲描述页面的行为。

CSS常用属性

• CSS常用的文字属性有三个：color（颜色），font-size（字号），font-family（字体）。
• CSS常用的盒子属性有三个：width（宽度），height（高度），background-color。

注意：本来HTML中我们书写k=“v”，但是在CSS中的属性值发生了变化，变成了k:v;

文字三属性之颜色

• 属性名：color
• 属性值：主要分为两种，一种是单词表示法，一种是颜色值（十六进制，rgba）。

提供color属性查询的w3c网址：w3c手册
以蓝色举例：

    <p>
        <!-- 什么都不设置 浏览器默认黑色 -->
        看我是什么颜色
    </p>
    <!-- 通过样式的方法：给标签添加属性来改变颜色 -->
    <!-- style是样式属性 即给标签添加一个样式功能 值是CSS属性 -->
    <p style="color: blue;">看我是什么颜色</p>

    <!-- rgb颜色表示法 -->
    <p style="color:rgb(0,0,225);">看我是什么颜色</p>

    <!-- 十六进制表示法 -->
    <p style="color:#0000FF;">看我是什么颜色</p>

文字三属性之字号

• 属性名：font-size。
• 属性值：最常用的是以px为单位的数字值。

---

注意：

• font-size默认是有字号的，字号大小根据浏览器的不同有所不同——Chrome和ie默认就是16px的文字。
• 每个浏览器都有自己最小的显示像素——Chrome最小字号为8px
  ie浏览器最小字号是1px。

    <p>
        <!-- font-size默认是有字号的 字号大小根据浏览器的不同有所不同 -->
        看我的文字大小
    </p>
    <p style="font-size: 10px;">看我的文字大小</p>

文字三属性之字体

• 属性名：font-family。
• 属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开。

---

• 中文字体的常用字体属性值：微软雅黑，宋体。
• 英文字体的常用字体属性值：Arial，consolas。

（实际的字体属性是根据设计图获取，并且大多数浏览器默认显示字体是微软雅黑。）

    <p>看我是什么字体</p>

    <!-- 要用单引号包裹 因为外面已经有双引号了-->
    <p style="font-family: '微软雅黑';">看我是什么字体</p>
    <p style="font-family: '宋体';">看我是什么字体</p>

    <!--默认会按次序识别 
        但在实际工作中 英语一般放在前面
        如果页面中有中文化混合的 需要同时设置对应的字体 中英文会分别进行加载
    -->
    <p style="font-family: 'Arial','consolas','宋体';">看看abcdef</p>

盒子三属性之宽度&高度&background-color

• 属性名width：是宽度的意思。
• 属性名height：是高度的意思。
• 常用的属性值都是以px为单位的数值。

---

• background-color：属于background系列属性的一种。
• 属性值和上文所说的color一样分为单词表示法和颜色值表示法。

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