建站
咨詢
售后
建站咨詢
新聞中心
CSS字體與文本樣式詳解
學習導航
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了源城免費建站歡迎大家使用！
1、css中的長度與顏色
2、css中的文字屬性
3、css中的文本屬性
1、文字樣式屬性
font-family 字體屬性
作用：元素內文字以什么字體來顯示
語法：font-family:[字體1],[字體2],[......];
說明：含空格字體名和中文，用英文引號（"）括起；多個字體用英文逗號隔開；引號嵌套，外使用雙引號，內使用單引號。
font-size 文字大小
作用：元素內文字大小
語法：font-size:絕對單單位，相相對單位
color 文字顏色
語法：顏色名|十六進制|RGB
font-weight 文字粗細
語法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 細體 | 100-900
說明：默認值：normal 400等同于normal,而700等同于bold
font-style 文字樣式
作用：為元素內文字設置樣式
語法：font-style:normal 正常顯示 | italic 文字傾斜 | oblique 文字傾斜（基本不用）
font-variant 字體變形
作用：設置元素中文本為小型大寫字母
語法：font-variant:normal 正常顯示| small-caps 將英文大小寫字母調成為同寬
font 屬性簡寫
語法：font:font-style font-variant ?font-weight font-size/line-height font-family;
說明：值之間空格隔開，注意書寫順序。
2、CSS文本樣式
text-align
作用：設置元素內文本的水平對齊方式
語法：tex-align:left 左對齊?| right 右對齊 | center 居中對齊 | justify 兩端對齊
注意：該屬性對塊級元素設置有效
line-height
作用：設置元素中文本行高
語法：line-height:長度值 | 百分比
說明：一行文字的高度，行高指文本行的基線間的距離
文字基線
注意：基線并不是漢字文字的下沿，看圖理解自行理解
行高和行距
行高：基線到基線的距離
行距：底線到頂線的距離
注意：看圖自行理解
行框和行內框
注意：看圖自行理解
vertical-align
作用：設置元素內容的垂直方式
語法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |?長度 | 百分比
注意：看圖自行理解
text-indent 首行縮進
3、文本樣式屬性
text-transform:?capitzlize?首字母大寫 |?uppercase?字母大寫?|?lowercase? 字母小寫 |?none 正常
text-decoration:?underline?下劃線 |?overline 上劃線?|?line-through?刪除線 | none 正常
綜合實操案例
如果您覺得有用，記得在下方點贊、關注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動力，么么噠。
每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術。陪有夢想的人一起成長！
CSS如何設置文字字體
如果你想你網(wǎng)站上的文字看起來更加不一樣，就必須要給網(wǎng)頁中的標題、段落和其他頁面元素應用不同的字體。你可以用font-family屬性在CSS樣式里設置字體，如： font-family:Arial; 但是設置的這種字體，你電腦上必須裝有該字體，否則將按原字體樣式顯示。當然，也可以寫上多種字體，當對方瀏覽你的網(wǎng)站，沒有安裝第一種字體時，瀏覽器就會在列表中繼續(xù)往上搜尋，直到找到有適合的字 體為止，像這樣： font-family:Arial,Helvetica,sans-serif; 在上例中，Web瀏覽器會先看看是否安裝了Arial字體。如果安裝了，那么就用Arial字體顯示；如果沒有安裝，瀏覽器就會繼續(xù)尋找Helvetica字體；如果還是沒有找到，最后它就會指定一種通用的字體--sans-serif。如果字體的名稱中包含多個單詞時，則必須用雙引號（“”）將它們括起來，如： font-family:"Times New Roman",Times,serif; 以下就介紹幾種常用的font-family字體類型組合，每一列的最后都包含一種通用的字體。 1、Serif字體：最適用于冗長的文字信息，因為讀者都會覺得這種字體使字母主筆劃的結尾處會有一些細小的“足”，能夠比較有效地引導人們的視線從一個字母一到到下一個字母，閱讀起來感覺更加輕松。serif字體包括：Times，Times New Roman、Georgia。 2、Sans-serif字體：它看起來干凈而簡潔，所有經常被用在標題上。Sans-serif字體包括：Arial、Helvetica、Verdana和Formata。 3、Monospaced字體：它經常用于顯示計算機代碼，它每個字母都是等寬的。
如何通過CSS設置文字 3D效果
style
.test
{
text-shadow:
1px?1px?0?#CCC,
2px?2px?0?#CCC,?/*?end?of?2?level?deep?grey?shadow?*/
3px?3px?0?#444,
4px?4px?0?#444,
5px?5px?0?#444,
6px?6px?0?#444;?/*?end?of?4?level?deep?dark?shadow?*/
}
/style
body
h13D效果/h1
/body????????
//?具體效果可以改變顏色值和位移值來實現(xiàn)不同的3d效果
如何css制作3d旋轉立方體效果？
具體步驟如下：
一、立方體結構中，使用一個wrapper div來包裹立方體。在里面使用6個div來制作立方體的6個面。
二、立方體的每一個面都有它自己的元素。我們稍后會使用CSS來將立方體的6個面放置到正確的位置上。
三、在立方體的CSS樣式中，首先要關注的是立方體的wrapper div。為了制作3D效果，我們需要為它提供一個 CSS perspective。
四、CSS perspective屬性是一個比較復雜的CSS3屬性。最好的理解它的方法是看完文檔后，自己動手修改一下DEMO中的perspective屬性來看看它的變化。
下面需要給包含立方體6個面的立方體的容器.cube提供樣式：
1、.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
2、給立方體容器200像素的寬度，并設置為相對定位，這樣在它里面的立方體的6個面可以設置為絕對定位。
3、preserve-3d屬性確保所有6個面都處于3D立體狀態(tài)。
4、在為6個面設置它們的位置之前，先給它們一些通用的樣式：
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
5、在進過上面對立方體6個面的一系列設置之后，現(xiàn)在我們可以為6個面制作變形效果，以使它們組裝為一個立方體。
6、rotateY的值可以旋轉立方體的各個面，使上面的文字處于正確的位置上。
7、而 translateZ 的值使元素在指定容器中向前或向后移動。translateY的值看起來有些混亂，但是請記住，它的作用是通過透明的面板來使指定的面升高或降低來制作3D效果。
8、每一個面都有自己的translations值來使它們處于適當?shù)奈恢蒙?。你可以自己修改一下這些值來看看效果。
如何css制作3d旋轉立方體效果
HTML結構
立方體結構中，使用一個wrapper div來包裹立方體。在里面使用6個div來制作立方體的6個面。
div class="wrap"
div class="cube"
div class="front"front/div
div class="back"back/div
div class="top"top/div
div class="bottom"bottom/div
div class="left"left/div
div class="right"right/div
/div
/div
立方體的每一個面都有它自己的元素。我們稍后會使用CSS來將立方體的6個面放置到正確的位置上。
CSS樣式
在立方體的CSS樣式中，首先要關注的是立方體的wrapper div。為了制作3D效果，我們需要為它提供一個 CSS perspective屬性。
.wrap {
perspective: 800px;
perspective-origin: 50% 100px;
}
CSS perspective屬性是一個比較復雜的CSS3屬性。最好的理解它的方法是看完文檔后，自己動手修改一下DEMO中的perspective屬性來看看它的變化。下面需要給包含立方體6個面的立方體的容器.cube提供樣式：
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
給立方體容器200像素的寬度，并設置為相對定位，這樣在它里面的立方體的6個面可以設置為絕對定位。preserve-3d屬性確保所有6個面都處于3D立體狀態(tài)。在為6個面設置它們的位置之前，先給它們一些通用的樣式：
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
在進過上面對立方體6個面的一系列設置之后，現(xiàn)在我們可以為6個面制作變形效果，以使它們組裝為一個立方體。
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
rotateY的值可以旋轉立方體的各個面，使上面的文字處于正確的位置上。而 translateZ 的值使元素在指定容器中向前或向后移動。translateY的值看起來有些混亂，但是請記住，它的作用是通過透明的面板來使指定的面升高或降低來制作3D效果。每一個面都有自己的translations值來使它們處于適當?shù)奈恢蒙?。你可以自己修改一下這些值來看看效果。
水平旋轉的立方體
該效果是DEMO1中的第一種效果。我們使用關鍵幀技術來使立方體在水平方向上旋轉：
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
}
是不是比想象中的要簡單得多？6個面上的文字在立方體旋轉時都處于正確的位置上。使用關鍵幀可以制作出許多神奇的動畫效果。
垂直旋轉的立方體
該效果是DEMO1中的第二種效果。要在垂直方向上旋轉立方體只需要簡單的改變動畫的旋轉軸為Y軸。但是這種情況下面板上的文字有時候會顯示在相反的方向上，所以我們需要修改一下元素旋轉的代碼：
@keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
.cube-wrap.vertical .cube {
margin: 0 auto; /* keeps the cube centered */
transform-origin: 0 100px;
animation: spin-vertical 5s infinite linear;
}
.cube-wrap.vertical .top {
transform: rotateX(-270deg) translateY(-100px);
}
.cube-wrap.vertical .back {
transform: translateZ(-100px) rotateX(180deg);
}
.cube-wrap.vertical .bottom {
transform: rotateX(-90deg) translateY(100px);
}
扁平旋轉的立方體
該效果是DEMO1中的第三種效果。該效果中移除了立方體的3D效果，每次只顯示一個面。要做到只一點，我們可以從wrapper中移除perspective和原點的設置：
.wrap {
/* no more perspective */
perspective: none;
perspective-origin: 0 0;
}
現(xiàn)在立方體每次只會顯示一個面。
資源：
本文題目：css3d字體樣式,css3字體顏色
分享URL：http://fisionsoft.com.cn/article/dsiedpd.html
