web之CSS入门03

字体样式

字体设置也是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。

• font-family：设置字体；
• font-style：设置字体的风格，例如倾斜、斜体等；
• font-weight：设置字体粗细；
• font-size：设置字体尺寸；
• font：字体属性的缩写，可以在一个声明中设置多个字体属性

字体大小

CSS 使用 font-size 属性定义字体大小

p {  
	font-size: 20px; 
}

1. px（像素）大小是我们网页的最常用的单位
2. 谷歌浏览器默认的文字大小为16px
3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4. 可以给 body指定整个页面文字的大小

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细

 p {  
	font-weight: bold; 
}

值	描述
normal	默认值，标准字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100~900	由细到粗的设置字体粗细，100 为最细的字体，400 等同于 normal，700 等同于 bold

实际开发时，我们更喜欢用数字表示粗细

字体样式

CSS 使用 font-style 属性设置文本的风格

p {  
	font-style: normal;
}

值	描述
normal	默认值，文本以正常字体显示
italic	文本以斜体显示

字体的综合写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码

body {   
    font: font-style  font-weight  font-size/line-height  font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

字体总结

属性	表示	注意点
font-size	字号	我们停产用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是700或者bold不加粗是normal或者400
font-style	字体样式	倾斜是italic 不倾斜是normal常用的是normal
font	字体连写	字体连写是有顺序的，不能随意换位置 其中字号和字体必须同时出现

文本属性

文本颜色

color 属性用于定义文本的颜色

div { 
	color: red;
}

表示	属性值
预定义的颜色值	red,green
十六进制	#FF0000,#29D794
RGB代码	rgb(255,0,0)

开发中最常用的是十六进制

文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式

div { 
	text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐
justify	两端对齐

修饰文本

text-decoration 属性用于设置或删除文本的装饰，最常用的做法就是使用 text-decoration 属性来删除<a>标签的默认下划线。当然了，使用 text-decoration 属性也可以在需要的地方为元素中的文本添加一些装饰，达到突出显示的效果

div { 
    text-decoration：underline；
}

属性值	描述
none	默认，没有装饰线。最常用
underline	下划线，链接a自带下划线，常用
overline	上划线 几乎不用
line-through	删除线 不常用

文本缩进

text-indent 属性用来为元素中的文本添加首行缩进的效果

div { 
	text-indent：20px；
}

div { 
	text-indent：2em；
}

值	描述
length	以固定的值加单位的形式（例如 2em）定义缩进距离，默认值为 0
%	以基于父元素宽度的百分比来定义缩进距离

em是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

行高

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p { 
	line-height: 26px;
}

p {
	line-height: 0.8;
}
p {
	line-height: 200%;
}

行高的文本分为 上间距 +文本高度 +下间距 = 行间距

值	描述
normal	默认值，使用默认的行高，不对行高进行额外设置
number	以具体的数字设置行高，这个数字会与当前的字体大小相乘，并将得到的值设置为行高
length	以数字加单位的形式设置固定的行高
%	以百分比的形式设置基于当前字体尺寸百分比的行高

大小写

text-transform 属性用来控制文本中英文字母的大小写，通过该属性您可以在不修改原文的基础上，将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式

值	描述
none	默认值，以原文显示，对文本中的英文不做更改
capitalize	将文本中的每个单词更改为以大写字母开头的形式
uppercase	将文本中的英文字母全部更改为大写
lowercase	将文本中的英文字母全部更改为小写

div {
	text-transform: none;
}

背景

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性，如下所示：

• background-color：设置元素的背景颜色；
• background-image：设置元素的背景图像；
• background-repeat：控制背景图像是否重复；
• background-attachment：控制背景图像是否跟随窗口滚动；
• background-position：控制背景图像在元素中的位置；
• background：背景属性的缩写，可以在一个声明中设置所有的背景属性

背景颜色

您可以使用 background-color 属性为元素设置一个背景颜色，该属性支持以下几种属性值

值	描述
color_name	使用具体颜色名称为元素设置背景颜色（例如 red）
hex_number	使用十六进制码为元素设置背景颜色（例如#ff0000）
rgb_number	使用 rgb()函数为元素设置背景颜色（例如 rgb(255,0,0)）
transparent	默认值，设置背景颜色为透明，大多数情况下我们并不会用到它。但如果您不希望某个元素拥有背景颜色，或者不希望用户对浏览器的设置（比如开启夜间模式、护眼模式）影响到您的设计，那么就可以使用 transparent 来将颜色设置为透明的

背景图片

background-image 用来为某个元素设置背景图像，默认情况下浏览器会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像，以填充整个元素区域，您可以使用 background-repeat 属性来控制背景图像是否重复或如何重复。

background-image 属性的可选值如下：

值	描述
url('URL')	指向图像的路径，可以将 url() 看作是一个函数，括号中的URL 为图像的具体路径
none	默认值，不显示背景图像

背景平铺

默认情况下背景图像会从元素内容的左上角开始（若有内边距则从元素内边距区域的左上角开始），在水平和垂直方向上重复背景图像以填充整个元素区域（不包括元素的外边距区域），您可以使用 background-repeat 属性用来设置背景图像是否重复或如何重复，该属性的可选值如下：

值	描述
repeat	默认值，背景图像将在垂直方向和水平方向上重复
repeat-x	背景图像仅在水平方向上重复
repeat-y	背景图像仅在垂直方向上重复
no-repeat	背景图像仅显示一次，不在任何方向上重复

背景图片位置

background-position 属性用来设置背景图像的起始位置

background-position:x y;

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

参数值	说明
length	百分数|由浮点数和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right方位名词

1. 参数是方位名词

   如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和 top left 效果一致

   如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

   如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

   如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3. 参数是混合单位

   如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是y 坐标

背景图片固定

background-attachment 属性用来设置背景图像是固定在某个位置还是跟随页面一起滚动，该属性的可选值如下：

值	描述
scroll	默认值，背景图像随着页面元素的滚动而移动
fixed	当页面的其余部分滚动时，背景图像固定不动

背景样式合写

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

背景色半透明

CSS3 提供了背景颜色半透明的效果

background: rgba(0,0,0,0.3);

• 最后一个参数是 alpha 透明度，取值范围在 0~1之间
• 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-imgae	背景图片	URL('图片路径')
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景色半透明	background:rgba(0,0,0,0.3); 后面必须是4个值