color:設置字體顏色:

取值方式有：1.顏色值red,green等 、2.十六進制#FF0000,#FF2313等、3.RGB代碼rgb(225,225,112)或rgb(100%,55%,0%)，取值范圍0-225，0%-100%，rgba是rgb的擴展，其中第四個參數設置的是透明度，取值范圍為0-1，注意：IE低版本不支持此屬性，低版本IE需要：filter:Alpha(opacity=50)，opacity值為0 到 100，如下：

p{color:rgba(112,33,65,0.7);/* 第四個參數設置的是透明度，0.7中的0可以省略直接寫 .7 */}

text-align:設置文本的對齊方式:

強調的是容器中文字對齊，其值：left左對齊、right右對齊、center居中對齊， justify兩邊對齊（自動控制字距使文本緊靠兩邊顯示）

div{text-align:center;}

text-indent:設置段落文本首行縮進:

其單位使用em，em是根據字體大小變化的。

p{text-indent:2em;}

text-decoration:文本裝飾:

通常用于給鏈接裝飾效果，當然其他元素依然適用，其值有：none標準的文本、underline下劃線文本、overline上劃線文本、line-through中劃線文本、blink閃爍（兼容性極大，忽略此值）。

a{text-decoration:none;}p{text-decoration:underline;}

list-style：設置列表樣式:

list-style：none去掉列表前面的點。

li {list-style: none;}

cursor：設置鼠標樣式：

li {cursor: pointer;}

其值有：

繼：

outline輪廓線：

表單input和文本域textarea默認有輪廓線，想要去掉默認的輪廓線就要使用outline屬性，其值none取消輪廓線（值0也是取消輪廓線），一般去掉默認的輪廓線后會添加上一個border邊框。

input {outline: none;border: 1px solid black;}

resize防止拖拽textarea文本域尺寸：

textarea文本域默認有一個拖拽變化尺寸的小腳，一般是通過resize: none來去掉的。

textarea {resize: none;outline: none;border: 1px solid black;}

vertical-align:設置行內元素及行內塊元素對齊方式:

baseline基線對齊，默認值、super垂直對齊文本上標、sub垂直對齊文本下標、top把元素的頂端和行中最高元素的頂端對齊、text-top把元素的頂端與父元素的文本頂端對齊、middle把此元素垂直居中在父元素中部、bottom把元素的頂端與行中最低元素的頂端對齊、text-bottom把元素的低端與父級元素字體的低端對齊、20px等具體的像素值、30%等百分比、inherit繼承父級元素vertical-align值

<style>div {height:500px;background-color:yellow;font-size:50px;}img,del {vertical-align:middle;}</style><div class="main"><sapn>中文English</span><del>測試Test</del><img src="middle.PNG" alt=""></div>

white-space：設置溢出文字是否換行:

在實際開發中，為了防止超出文字自動換行，使用white-space可以很好的解決這個問題，其值：normal默認的會換行、nowrap強制在同一行中顯示所有文本，直到遇到br標簽才換行。

text-overflow：文字溢出顯示省略號:

其值clip文本超出不顯示省略號，只是做簡單的裁剪、ellipsis文本超出后會顯示省略號。

div {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的css设置字体颜色、文本对齐方式、首行缩进、文本装饰、列表样式、鼠标样式、禁止文本域拖拽、轮廓线、块级元素对齐方式、文字溢出设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。