第三课 修饰网页上的文字

1、在HTML标记中添加CSS代码

什么是CSS

CSS即Cascading Style Sheets 层叠样式表的缩写。

HTML定义网页内容结构，CSS负责定义内容的样式。

在HTML标记中添加CSS代码

任何html标记中都可以添加一个style属性，它的值是css代码

格式：<标记 style=“css样式”>

例如：<p style=“font-size:20px;color:red;”>

CSS样式的写法

属性:值;

可以连续写多句，每一句样式以分号结束

接下来我们需要学习大量的css属性，以及它们可以设置什么值

2、CSS字体属性

字体 font-family

取值：系统字体名称 （可以指定多个字体，用逗号隔开）
所有中文版Windows一般都有的中文字体名称：宋体，黑体，仿宋_gb2312，楷体_gb2312,微软雅黑

字体大小 font-size

取值：不小于12px的数字，px是单位（像素）

字体加粗 font-weight

取值： normal 正常（默认值），  bolder  加粗

字体倾斜 font-style

取值： normal 正常（默认值），  italic  倾斜

文字修饰 text-decoration

  取值：  underline 下划线      ， overline 上划线 ， line-through 删除钱  ， none 不做任何修饰

如何定义局部文字样式

空白标记<span> </span>
字体标记<font> </font>
用这两个标记将局部文字括起来，不会对文字产生任何影响，但我们可以在标记上添加css样式。

3、文本属性

文字颜色 color

取值：颜色单词，例如：red、blue、yellow、black、green等
rgb(红,绿,蓝)，例如：rgb(255,0,0) 代表纯红色
6位十六进制颜色值，例如：#ff9999，3位十六进制颜色值，例如：#fff

文本对齐 text-align

取值：left  左对齐      right 右对齐          center 居中对齐

首行缩进 text-indent 

取值：像素值

行高 line-height   

取值：可以为数值，也可以设相对于字体大小的百分比

字间距 letter-spacing

取值：可以为数值，也可以设相对于字体大小的百分比

垂直对齐：vertical-align

取值 ：sub   下标， super  上标 ，middle  中间 ，  top   顶部 ，bottom  底部

4、在网页中添加CSS样式代码

在HTML标记上直接添加样式代码会使得网页源文件的可读性降低，所以一般不建议这么做。

用<style>标记给网页添加css代码

<style rel="stylesheet" type="text/css" >
    css代码……
</style>

<style>标记一般放在网页头部

CSS重定义HTML标记样式

标记名{css代码……}     例如：p{color:red;}

当前网页中所有<p>标记中的文字都变红色

* 可代表所有标记，例如：*{color:red;}

自定义样式

css代码中定义一个样式：   .样式名{css代码……}

Html标记上应用这个样式： <标记名 class=“样式名”>