HTML学习笔记(三)之CSS样式(1)
2017-07-10 本文已影响54人
胡溪玥
一、CSS样式及CSS样式的作用
1.1 什么是CSS
CSS也是我们常叫的样式表、通俗叫切图和静态网页布局。我们知道HTML网页是由若干标签和内容组成。标签包括了div标签、span标签、a锚文本标签、strong加粗标签、b加粗标签、p段落标签、br换行标签 img图片标签 等组成。这些标签组成html网页后,由CSS控制这些标签对象的宽度,高度、float浮动、文字大小,字体、颜色及CSS的背景。
简而言之,CSS的作用就是让网页可以“穿上漂亮衣服”,一个完整漂亮网页,就是由html标签与控制这些标签布局和美化功能CSS组成。
二、CSS各种样式详解及举例
2.1 CSS字体样式

a.font-family属性(设置字体)

b. font-size属性 (设置字体大小)

c.font-style属性(字体风格属性)
d.font-weight属性(字体的粗细)

font属性(字体的所有属性)
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

使用案例:
1.在html文件中,通过<style type="test/css"> 引入设置<p></p>(段落标签里面字体样式)



2.2 CSS文本样式

text-decoration属性可以取值分别有下列值:

2.3 CSS设置对齐方式

2.4 CSS超链接样式



2.5 CSS设置鼠标外观


2.6 CSS设置背景样式

a. background-color (背景颜色)
b. background-image (背景图像)

c.background-repeat (背景重复方式)

d.background-position(背景定位)

2.7 CSS列表样式

