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
}

111

 

总结:

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

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

posted @ 2015-01-11 14:28  ﹏猴子请来的救兵  阅读(1548)  评论(0编辑  收藏  举报