CSS文本

CSS文本属性可以定义文本外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进等等。

常用的文本属性

属性	描述
color	文本颜色
direction	文本方向
line-height	行高
letter-spacing	字符间距
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素文本的首行
text-transform	元素中的字母大小写
white-space	规定段落中的文本不进行换行
word-spacing	字间距

color

用来改变颜色的CSS样式

p {

    color: #6777E2;

}

direction

用来改变文字方向，可以改成想古代一样，从右往左读。

body{

    /*修改文本方向*/

    /*rtl是从右到做，r是right，t是to，l是left*/

    direction: rtl;

}

line-height

用来改变段落的行距

p {

    /*修改行距*/

    line-height: 100px

}

text-align

这个是对齐方式

p{

    /*文本对齐*/

    /*text-align: left; 是左对齐*/

    /*text-align: right; 是右对齐*/

    /*居中对齐*/

    text-align: center;

}

text-decoration

这个可以修饰元素，主要是加横线，其中比较有用的是可以去掉<a>标签下方的横线

h2 {

    /*在文字上方加横线*/

    text-decoration: overline;

}

h3{

    /*在文字上加横线*/

    text-decoration: line-through;

}

h5{

    /*在文字下加横线*/

    text-decoration: underline;

}

a {

    /*去掉a属性的横线*/

    text-decoration: none;

}

text-indent

可以定义文字缩进多少像素，通常用来首行缩进

p {

    /*<p>标签缩进50像素*/

    text-indent: 50px;

}

text-transform

文字大小写

/*所有英文大写*/

h2 {

    text-transform:uppercase

}

/*所有英文小写*/

h3 {

    text-transform:capitalize

}

/*所有英文首字母大写*/

p {

    text-transform:lowercase

}

white-space

这个可以是标签中的文本不换行

/*p标签中的文本不进行换行*/

p{

      white-space: nowrap

  }

word-spacing

这个属性与text-indent不同，text-decoration是将每个字符的间距调整，而word-spacing却是针对每个单词的间距

/*英文单词间距*/

p {

    word-spacing: 100px;

}

CSS字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形

属性	描述
font-family	设置字体系列
font-size	设置字体的尺寸
font-style	设置字体的风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

font-size

设置文本的字体大小

p {

    /*将字体大小设置为20像素*/

    font-size: 20px;

}

font-family

p {

    /*设置字体*/

    font-family: consolas;

}

自定义字体

以前设置字体是需要使用“安全字体”，“安全字体”就是为了保证用户所在的环境中，使用的浏览器一定会支持一些字体，那些就是“安全字体”，但是现在CSS3中，可以将自己设置的字体保存起来，在用户访问了你的网页，它会加载CSS样式，同时就把你设置的字体下载到缓存里面了。然后可以直接调用那些字体，显示到网页上。非常方便。

@font-face{

    /*设置自己定义字体的名字*/

    font-family: myfont;

    src: url(/*这里是字体的路径*/);

}

div{

    /*调用自己定义的字体名字*/

    font-family: myfont;

}

CSS链接

CSS的链接就是<a>标签了。其实<a>标签页可以设置很多样式的。

下面就是CSS链接的四种状态：

属性	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的连接
a:hover	鼠标指针位于连接的上方
a:active	连接被点击的时刻

/*在未访问链接的情况下，修改链接为棕色*/

a:link{

    color: #804040;

    /*将链接的下划线去掉*/

    text-decoration: none;

    /*设置字体为50px，方便查看*/

    font-size: 50px;

}

/*在用户已经访问链接的情况下，修改链接为橙色*/

a:visited{

    color: #FF8000;

}

/*在鼠标悬停在链接上时，修改链接为绿色*/

a:hover{

    color: green;

}

/*在鼠标点击链接时，链接为蓝色*/

a:active{

    color: #0080FF

}

总结：

这次学了文本格式，字体样式和自定义字体，还有链接的4种状态。

在使用自定义字体时需要使用@font-face函数来创建自己字体的名字，和调用自己字体的路径

CSS文本与连接的更多相关文章

CSS 文本、字体、链接
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...
CSS：CSS 文本格式
ylbtech-CSS:CSS 文本格式 1.返回顶部 1. CSS 文本格式文本格式 This text is styled with some of the text formatting pr ...
CSS 文本控制
one more time one more chance. 一歩重头学前端, css入门. 学习一些 CSS 文本控制的属性,防止做傻事.请大家对照下面列表检验下: 会的.不会的.似懂非懂的.笔者是 ...
第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇本节课, ...
第 15 章 CSS 文本样式[上]
学习要点: 1.字体总汇 2.字体设置 3.Web 字体主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇本节 ...
css文本格式详解
一.css文本主体内容: 二.css文本详解: 1.文本缩进语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...
[CSS]文本属性（Text）
CSS 文本属性(Text) 属性描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...
CSS文本效果
前面的话本文将详细介绍CSS文本效果凸版印刷效果这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...
CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

随机推荐

Bootstrap:表格和栅格分页
拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCT ...
laravel 4.2 session
laravel的session简要API Session的API还是比较简单的,大家看看中文文档也大概知道是怎么个意思.但是有那么几个还不太好理解. //session的永久保存(在不过期范围内) S ...
android发送/接收json数据
客户端向服务器端发送数据,这里用到了两种,一种是在url中带参数,一种是json数据发送方式: url带参数的写法: url+/?r=m/calendar/contact_list&uid=3 ...
syslog-ng日志系统
一.基础syslog-ng作为syslog的替代工具,可以完全替代syslog的服务,并且通过定义规则,实现更好的过滤功能.系统自带版本(我的是红旗,不同系统用不同的方式查询): 引用 # rpm - ...
Rsyslog配置文件详解
Rsyslog配置文件详解https://my.oschina.net/0757/blog/198329 # Save boot messages also to boot.log 启动的相关信息lo ...
cocos2dx 3.x(定时器或延时动作自动调用button的点击响应事件)实现自动内测
// // ATTGamePoker.hpp // MalaGame // // Created by work on 2016/11/09. // // #ifndef ATTGamePoker_h ...
关于Thread.IsBackground属性的理解（转载）
C#中,Thread类有一个IsBackground 的属性.MSDN上对它的解释是:获取或设置一个值,该值指示某个线程是否为后台线程.个人感觉这样的解释等于没有解释. .Net中的线程,可以分为后台 ...
加密解密及其javascript实现
前端提交数据到后台,如果不适用https协议,则提交的数据就有被第三者窃取的可能.前端使用js来编码数据主要分为以下三种: 1.摘要算法 2.对称加密 3.非对称加密下面分别介绍三种算法中对应的一个 ...
oracle rac重建控制文件
1.使用sqlplus连接到已经mount或open的rac数据库 sql> alter database backup controlfile to trace noresetlogs; 2. ...
《30天自制操作系统》15_day_学习笔记
harib12a: 这一部分我们来尝试两个任务的切换.下面我们一步一步的看: 1.定义TSS任务状态段(task statuc segment):定义的一种段,需要在GDT中定义使用 //TSS任务状 ...

CSS文本与连接