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函数来创建自己字体的名字，和调用自己字体的路径