第二章 CSS之属性

Posted 2021-04-09 新手学前端

 学习CSS之前，首先要熟悉CSS属性。

先来一段html，先介绍背景颜色以及字体大小。

<p>写点文字</p><p>写点文字</p><div>写点文字</div><div>写点文字</div>

标签内加点文字，如果不知道写什么，给个小方法，写"lo"看到提示后，直接回车，会出现一些测试文字。

在样式中，属性和值之间，用冒号(:)来区分，一对属性值结束之后，用分号(;)表示结束，最后一对属性值可以不写分号，但是建议写上。

好了，按照上面这个标签来说吧，首先，来给p标签添加背景颜色(background-color)，值有几种写法：

第一种： 颜色的英文名字，red/blue等等...

第二种：十六进制写法：#000000~#ffffff，一共6个字符。范围是0-9以及a-f的随意组合，字母不区分大小写。#000000是黑色，#ffffff是白色。

第三种： rgb(0~255,0~255,0~255 )，这个就是RGB颜色，取值0~255之间即可。

第四种：rgba(0~255,0~255,0~255,0~1),这个比rgb多了一个a(Alpha)，这个指的是透明度。

好了，来加上样式，p标签加背景颜色：

<p style="background-color:red;">写点文字</p><p style="background-color:#ff0000;">写点文字</p><div>写点文字</div><div>写点文字</div>

运行一下，可以看下效果。然后再给div添加字体大小(font-size)。在HTML中，常用的单位有：

px：绝对大小，设置多少就是多少，精确度高。但是因为不能改变，所以无法用于响应式页面

em：相对大小，相对于自己本身的父级元素有固定尺寸(px)的的大小。如果父级元素的尺寸为20px，那么1em = 20px 。

rem：相对大小，相对于根元素(html)元素的尺寸来设置大小。其他的类似em。

<p style="background-color:red;">写点文字</p><p style="background-color:#ff0000;">写点文字</p><div style="font-size:20px;">写点文字</div><div style="font-size:1em;">写点文字</div>

background和font还有其他属性：

background：背景

    -color：背景颜色

    -image：背景图片

    -position：背景图像位置

    -size：背景图片尺寸

    -repeat：如何重复背景图像

    ...

简写：

background:color position size repeat origin clip attachment image;

background:image repeat position;(个人比较常用的简写)

font：字体

    -style：字体样式 italic(斜体)、normal(默认)

    -weight：字体粗细 100、200...900 bold(加粗) 等

    -size：字体尺寸

    -family：字体体系--宋体、楷体等等

    ...

简写：

font:style variant weight size/line-height(行高) family;

(个人很少使用简写)

这是常用的背景和字体的属性。今天先介绍这些。。。