首页 > 代码库 > CSS文本与连接
CSS文本与连接
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文本与连接
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。