CSS一些练习过程

1.字体样式

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <link rel="stylesheet" type="text/css" href="index.css"> --><style type="text/css">div{color:red;}#myDiv{background-color:yellow;width:200px;height:200px;}.myClass{background-color:green;}/* 后代选择器：父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素 */#myDiv p{font-size:30px;}/* 群组选择器：两个选择器之间必须要用英文逗号隔开， */p,h2{color:cadetblue;}/* 字体样式 *//* 对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者是中文，则需要加上双引号 */.font-style #font-family3{font-family:Arial;font-size:large;}.font-style #font-family1{font-family:Arial;font-size:large;font-weight:bold;}.font-style #font-family2{font-family:"Times New Roman";font-size:small;}.font-style #微软雅黑{font-family:"微软雅黑";font-size:60px;}.font-style #color-blue{color:blue;}</style>
</head>
<body><p>Hello World!</p><div id="myDiv">This is a div<p>This is a paragraph</p></div><div class="myClass">This is another div</div><div class="myClass">This is a third div</div><p>This is another paragraph</p><h2>This is a heading</h2><div class="font-style"><div id="font-family3">Arial</div><div id="font-family1"> Arial</div><div id="font-family2">Times New Roman</div><div id="微软雅黑">微软雅黑</div><div id="color-blue">字体颜色蓝色</div></div>
</body>
</html>

效果：

2.文本样式

实际上，字体样式针对的是“文字本身”的型体效果，而文本样式针对的是“整个段落”的排版效果。字体样式注重个体，文本样式注重整体。因此在CSS中，特意使用了font和text两个前缀来区分这两类样式。如果清楚这一点，以后写CSS时，就很容易想起哪些属性是字体样式，哪些属性是文本样式了。

中文段落首行一般需要缩进两个字符。如果想要实现这个效果，text-indent值应该是font-size值的两倍。

 p{font-size:14px;text-indent:28px;}

text-align属性取值:

letf:左对齐（默认值）

center:居中对齐

right:右对齐

text-align属性不仅对文本有效，对图片（img元素）也有效。

在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。

text-decoration属性取值：

none:去除所有的划线效果（默认值）

underline：下划线

line-through:中划线

overline:顶划线

中划线经常出现在各大电商网站中，一般用于促销。

使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。

text-transform属性取值：

间距（letter-spacing和word-spacing）

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">h3{letter-spacing:10px;text-align:center;}p{font-size:14px;text-indent:28px;letter-spacing:5px;line-height:24px;}#letf{text-align:left;}#center{text-align:center;}#right{text-align:right;}div a{text-decoration:none;}div #id1{word-spacing:10px;}div #id2{word-spacing:30px;}</style>
</head>
<body><h3>爱莲说</h3><p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p><p id="letf">左对齐</p><p id="center">居中对齐</p><p id="right">右对齐</p><div><a href="http://www.baidu.com" target="_blank">百度一下</a></div><a href="http://www.baidu.com" target="_blank">百度一下</a><div><p id="id1">Hello World!1</p><p id="id2">Hello World!2</p></div>
</body>
</html>

效果图：