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函數來建立本身字體的名字，和調用本身字體的路徑