CSS常用的样式属性-文字、盒子

CSS常用属性-文字、盒子

CSS属性值写法相比HTML发生了变化
CSS: key:value
HTML: key="value"

文字三属性：color、font-size、font-family（字体）

盒子三属性：width、height、baackground-color

一、文字

1、color 文字颜色

<p style="color: blue;">看我的颜色</p>

属性值分为两种：1、单词表示 2、颜色值（16进制，rgba）

<p style="color: #FF0000;">看我的颜色</p>
<p style="color: rgb(0, 0, 200);">看我的颜色</p>

看我的颜色

看我的颜色

2、font-size 字体大小

 <p style="color: blue; font-size: 30px;">看我的颜色</p>

数字后有px

看我的颜色

3、font-family 字体

• 字体用单引号包裹
• 中英文分别设置，英文字体写在前面
• 字体间有逗号隔开，先识别前面的字体

<p style="font-family: 'consolas','Arial','宋体','微软雅黑'">你好，yellow，123</p>
<p style="font-family: '微软雅黑'">你好，yellow，123</p>

你好，yellow，123

你好，yellow，123

二、盒子

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