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函数来建立本身字体的名字，和调用本身字体的路径