CSS基础之常见的样式声明

常见的样式声明

为方便展示,所有CSS代码写到head中

color

元素内部文字的颜色

p{
	color: 预设值/rgb/hex
}

预设值: 定义好的颜色单词

color:blue;

三原色,色值: 光学三原色(红.绿.蓝),每个颜色可以使用0~255之间的数字来表达,每个颜色的数字组合起来就是色值

rgb表示法
color: rgb(0,255,0)
hex(16进制)表示法:(常用)
#红绿蓝
#008c8c
每个颜色两位数字,如红:00 , 绿:8c. 蓝:8c

淘宝红：#ff4400(三个数位数字相同可以简写为#f40)
黑色：#000000,#000
白色：#ffffff,#fff
红色：#ff0000,#f00
绿色：#00ff00,#0f0
蓝色：#0000ff,#00f
紫色：#ff00ff,#f0f
青色：#00ffff,#0ff
黄色：#ffff00,#ff0
灰色：#cccccc,#ccc

取色网站介绍:取色网站(单色)

随便进入一个,点击元素完成复制,直接用到color中.
渐变色背景取色网站

background-color

元素背景颜色
颜色设置和color相同

font-size

元素内部文字的尺寸的大小

1. px: 像素,绝对单位,简单的理解为文字的高度占多少个像素

h1{
font-size:20px;
}

2. em: 相对单位,相对于父元素的字体大小.

h1{
font-size:2em;
}

没有元素必须要有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素,则使用浏览器基准字号

font-weight

文字粗细程度,可以取值数字,可以取值为预设值(bold加粗)

strong元素,默认加粗. 表示重要不能忽略的内容

h1{
font-weight:bold;
}

font-family

文字类型
必须用户计算机存在的字体才会有效, 所以使用多个字体以匹配不同的环境

font-family: cursive,微软雅黑,Arial,sans-serif

sans-serif,非衬线字体(文字边缘没有经过修饰,如微软雅黑),加在font-familyh后表示如果前面的字体都不能使用,请自行选择一个非衬线字体

衬线字体: 文字边缘经过修饰(有笔锋之类),如宋体

font-style

字体样式,通常用它来设置斜体.

h1{
font-style:italic // 斜体
}

i元素: 默认样式是倾斜字体,实际使用中,通常用i元素表示一个图标(icon)
em元素: 表示强调

text-decoration

文本修饰,给文本加线
a元素默认有下划线,一般都会去掉.

a{text-decoration:none}

text-decoration:line-through;//文本中间加线,如下

这是中间加线

text-decoration:overline; //文本上方加线,上滑线

text-decoration:underline;// 文本下方加线,下滑线

text-indent

首行文本缩进

text-indent: 12px; //可添加像素值
text-indent: 2em; //缩进两个中文字长度(常用)

line-height

每行文本的高度,该值越大,每行文本的距离越大

line-height:30px

当设置行高为容器高度,可以让单行文本垂直居中
行高可以设置纯数字,表示相当当前元素的字体大小,不建议写绝对大小(像素值)

width 、heigh

元素宽度、高度,行级元素设置无效

letter-space

文字间隙

text-align

元素内部文字的水平排列方式

text-align:center; 文件水平居中