（3）css文本样式
本篇学习资料主要讲解：
如何用css 的样式定义方法来介绍文字的使用。
第（1）节：用css设置文本样式。
一、弄懂文本文字的制作、利用css的样式定义版面的编排。
1、颜色定义、文本的背景颜色
（1） 在CSS里颜色的定义有四种方法：
一，用颜色的名称；
如：h1{color:red;}
二，以十六进制数;
如：h1{color:#FF0000;}
三，以RGB整数设置颜色；
如：h1{ color:rgb(255,0,0) }
四，以RGB百分数设置颜色;
如：h1{ color:rgb(0%,0%,100%) }
（2）设置文本的背景颜色,如下：
h1{
background:#000； /*黑色*/
color：white； /*白色*/
}
2、长度单位
在css中，文字的大小设置、图片的长宽设置，有很多的选择去设置，可以用多种长度单位，然而主要分为两类，一种是相对类型、另一种是绝对类型。
<1>相对类型
（1）“px ”像素:
根据显示设备的分辨率的多少而代表不同的长度，因此它属于相对类型。
例如：在1024*768的分辨率中设置一张图片的高度为200 px，在同样的大小的显示器换成1366*768的分辨率时，就会发现图片相对变小了。
<2>绝对类型
“所谓的绝对”：无论显示设备的分辨率为多少时，都代表相同的长度。
**在网页制作中已经默认以像素为尺度单位，如果没加尺度单位，浏览器就会默认以像素为单位显示。
3、设置文字。
（1）字体、（2）倾斜、（3）加粗、（4）大小、（5）英文字母大小写的转换、
（6）装饰效果、 (7)段落首行缩进 、（8）字词间距 、 (9)段落内部的文字行高
（10）段落之间的距离、（11）文本的水平位置
（1）设置文字的字体
在css中，设置文字的字体是通过使用font-family属性来实现的。接下来将“随意”准备一小段文章的网页，进行解说设置文字的字体。
如下：
*****头部代码省略****
<body>
<h1>康熙</h1>
<p>the Kangxi Emperor (May , – December , ) was the third Emperor of the Manchu Qing dynasty, and the second Qing emperor to rule over all of China, from to .</p>
<p>爱新觉罗·玄烨（穆麟德：Hiowan Yei，1654年5月4日—1722年12月20日），清朝第四位皇帝、清定都北京后第二位皇帝。年号“康熙”[] ，后世称呼为康熙帝。蒙古人称为恩赫阿木古朗汗（Enkh Amgahan）或阿木古朗汗（蒙语“平和宁静”之意，为汉语“康熙”的意译）。 康熙帝是中国统一的多民族国家的捍卫者，奠定了清朝兴盛的根基，开创出康乾盛世的局面，[] 被后世学者尊为“千古一帝”[-] ，庙号圣祖，谥号合天弘运文武睿哲恭俭宽裕孝敬诚信功德大成仁皇帝，葬于景陵。</p>
</body>
</html>
CSS ：
<style type="text/css"> h1{ font-family:黑体； } p{ font-family:Arial,"Times New Roman" }
</style>
以上css语句声明了html网页（“一小段文章的网页”）中H1标题和文本段落的字体名称为黑体，并且对文本段落同时声明了两个字体的名称，
分别为 Arial字体和 Times New Roman字体。它的意思是告诉浏览器首先在访问者的计算机中寻找Arial字体，若没有，就寻找Times New Roman字体，
如果访问者的计算机中没有此两种字体，则使用浏览器的默认字体显示。
（第一案列图）：
案列图中可以看到，标题和第一正文段落中的字体都发生了变化，而第二个段落的是中文，因此引英文字体对这个段落中的中文是无效的。
font-family属性可以同时声明多种的字体，只要字体之间用逗号隔开就可以了。
（2）设置文字的倾斜
在css中，设置文字的倾斜效果是通过使用font-style属性来实现的。文字的倾斜并不是真的通过把文字”拉斜“实现的，其实倾斜的字体本身就是一种独立存在的字体。
font-style属性是控制字体倾斜的，它可以设置为正常、意大利体、倾斜，三种样式分别如下：
font-style：normal； /* 正常*/ font-style：oblique； /* 意大利体*/ font-style：italic； /* 倾斜*/
可以用上面的网页（第一案列图）在第一段那设置一个ID选择器尝试一下，案例图如下：
（3）设置文字的加粗
在css中，设置文字的加粗效果是通过使用font-weight属性来实现的。
font-weight属性是控制文字的的粗细的，它可以设置为正常、加粗，分别如下：
font-weight：normal； /* 正常*/ font-weight：bold； /*加粗*/
下面的案例图是设置一个“加粗”类型的：
（4）控制文字的大小
在css中，控制文字的大小效果是通过使用font-size属性来实现的。
如下：font-size:15px;
（5）英文字母大小写的转换
在css中，英文字母大小写的转换 是通过使用font-transfrom属性来实现的，它可以设置为 单词首字母大写、所有字母大写、所有字母小写，如下：
p.one{text-transform:capitalize;} /*单词首字母大写*/
p.two{text-transform:upercase;} /*所有字母大写*/
p.three{text-transform:lowercase;} /*所有字母小写*/
可以用上面的网页（第一案列图）在第一段那设置一个标记类别选择器尝试一下把首字母变大写，案例图如下：
（6）文字的装饰
在css中，为文字加下划线、删除线和顶线等多种装饰效果是通过使用text-decoration属性实现的。
text-decoration:none； /*正常显示*/ text-decoration:underline; /*为文字加下划线*/ text-decoration:line-through; /*为文字加删除线 */ text-decoration:overline; /*为文字加顶线*/ text-decoration:blink; /*文字闪烁，仅部分浏览器支持*/
这个属性可以同时设置多个属性值，用空格分隔即可。如:h1{ text-decoration:underline overline ;}
(7)段落首行缩进
在css中，专门有一个text-decoration属性可以控制段落的首行缩进和缩进的距离。
#p2{text-decoration:2em;}
可以用上面的网页"第一案列图"中的第二段落进行设置，效果图如下：（红色圈那里）
（8）设置字词间距
在css中，可以通过letter-spacing和word-spacing这两个属性分别控制字母间距和单词的间距。
letter-spacing:-1px; word-spacing:-2px;
如果要设置文字之间的距离，需要设置letter-spacing属性，而不是word-spacing属性。
（9）设置段落内部的文字行高。
在css中，控制行与行之间的距离是通过line-height属性实现的。
.p2{
line-height:;
}
效果图如下：
效果图中可以看到第二段落内部文字的行与行之间的距离比第一段落内部文字的行与行之间的距离要大一些。
（10）段落之间的距离
在css中，设置段落之间的距离是通过margin属性来实现的。 margin /*外边距*/
p{
margin:50px 0px; /*上下距离为5个像素*/ /*左右距离为0个像素*/
}
还没设置之前的效果：
设置后的效果：
两个图的对比可以明显看出段落之间的距离是不同的。
（11）文本的水平位置
在css中，控制文本的水平位置是通过text-align属性来实现的。
text-align:left ; /*左对齐，也是浏览器的默认的*/
text-align:right ; /*右对齐*/
text-align:center; /*居中对齐*/
text-align:justify; /*两端对齐*/
这里就不详细介绍了......
以上介绍了使用css设置文本相关的各种样式的方法，以上这些属性主要可以分为两类：以“font”开头的属性、以“text”开头的属性。
（3）css文本样式的更多相关文章
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...
- 第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- 6.css文本样式
文本样式,只要针对的是文本的效果和文本的方位,即文本样式和文本控制总结起来有一表中的属性可用: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线 1 text-tran ...
- css文本样式及控制文本的大小写
常用文本样式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
- CSS 文本样式
1. 文本样式 text <!--文本颜色color --> .text {color:red;} 2. 文本对齐方式 text-align <style> .text ...
- css文本样式
1. body{ color:aqua; /*可继承的颜色*/ text-align: center; /*文本对齐方式*/ } 2.缩进: index.html <!DOCTYPE html& ...
- css文本样式-css学习之旅（4）
color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-inde ...
随机推荐
- POJ 2135 最小费用最大流 入门题
Farm Tour Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 19207 Accepted: 7441 Descri ...
- Sudoku Killer--hdu1426(数独 跟上一题差不多 但是输入时问题)
http://acm.hdu.edu.cn/showproblem.php?pid=1426 注意输入问题就行 还是dfs #include<stdio.h> #include<st ...
- POJ 1422【最小路覆盖数】
题意: 背景: 小镇有n个路口,空降兵可以在任意路口降落.有m条通往别的路口的单向边,但是不会出现循环. 问最少空降多少个士兵可以走完所有路口. 数据输入: 测试组数 t 每组有: 路口数 n 边数 ...
- centos 7 samba 回收站
vim /etc/samba/smb.conf其中添加 #==================================vfs object = recyclerecycle:repositor ...
- 容器使用笔记（List篇）
上一篇博客介绍了Dictionary,这篇博客介绍List的相关内容. C#中要存储一组数据.我们会想到数组Array,ArrayList,List这三个对象,当中,数组是最早出现的,我们就从数组開始 ...
- Please enter a commit message to explain why this merge is necessary.
Please enter a commit message to explain why this merge is necessary. 请输入提交消息来解释为什么这种合并是必要的 git 在pul ...
- vue Iframe
1.Iframe.vue <!-- Iframe --> <template> <div> <!-- 标题栏 --> <mt-header tit ...
- C++标准I/O库：iostream, fstream, sstringstream
在写代码的过程中.我们最常做的事就是io操作,不管是对控制台,还是文件.但一段时间不写代码就忘了,这里理一下C++标准I/O库的详细类和操作. C++的标准I/O库包含我们常常使用的iostream, ...
- android 不同进程间的调用 AIDL 实现通讯服务
android 不同进程间的调用 AIDL 实现通讯服务 近期对aidl android 不同进程间的调用,不同运用间的调用做了一些尝试: 过程例如以下: 1:首先在要被调用的程序里写好 ...
- poj 2585 Window Pains 暴力枚举排列
题意: 在4*4的格子中有9个窗体,窗体会覆盖它之下的窗体,问是否存在一个窗体放置的顺序使得最后的结果与输入同样. 分析: 在数据规模较小且不须要剪枝的情况下能够暴力(思路清晰代码简单),暴力一般分为 ...