color 為字型指定顔色
顔色取值可以是對應顔色單詞、rgb（0，0，0）裡面對應分别是紅綠藍、rgba（255，0，0，0.2）a對應的是後面0.2，這個值的取值範圍是0~1。
<style>
//顔色對應的英文單詞
color:"red";
//rgb的取值範圍0~255
rgb(125,125,125)
//rgba和rgb一樣，就多了一個透明度的調節a
rgba(255,255,255，0.2)
</style>
font-style 用于打開和關閉斜體文本
格式：font-style: italic;
取值： normal ： 正常的， 預設就是正常的 italic : 傾斜的
<style>
p {
font-style:italic;
}
</style>
<body>
<p>我是一個段落标簽</p>
</body>
font-weight 為字型設定粗細程度
格式： font-weight: bold;
取值: bold 加粗 bolder 比加粗還要粗 lighter 細線， 預設就是細線
數字取值： 100-900之間整百的數字 400 等同于 normal 700 等同于 bold
style>
p {
/* 設定文字的粗細 */
font-weight: bold;
}
</style>
<body>
<p>我是一個段落标簽</p>
</body>
font-size 為文字指定大小
格式：font-size: 30px;
機關：px（像素 pixel）
注意點： 通過font-size設定大小一定要帶機關， 也就是一定要寫px
<style>
p {
/* 設定字型大小 */
font-size: 20px;
}
</style>
<body>
<p>我是一個段落标簽</p>
</body>
font-family 為文字指定特殊的字型，浏覽器隻會使用浏覽器可以通路到的字型
格式：font-family:"楷體";
通用字型 (直接使用，不需要加引号)
serif:有襯線的字型,筆畫結尾有特殊的裝飾線或襯線
sans-serif:無襯線的字型，筆畫結尾是平滑的字型
monospace:等寬字型，用于代碼，字型中每個字寬度相同
cursive:草書，這種字型有的有連筆，有的還有特殊的斜體效果。
fantasy:裝飾字型 ，具有特殊藝術效果的字型
注意點：
1.如果取值是中文，需要用雙引号或者單引号括起來，多個單詞組合也要加
2.設定的字型必須是使用者電腦裡面已經安裝的字型
3.如果設定的字型不存在, 那麼系統會使用預設的字型來顯示預設使用宋體
<style>
p {
/* 字型設定 */
font-family: serif;
}
</style>
<body>
<p>我是一個段落标簽</p>
</body>
text-decoration 設定或者取消文本修飾
格式:text-decoration: underline;
取值:
underline 下劃線
line-through 删除線
overline 上劃線
none 什麼都沒有, 最常見的用途就是用于去掉超連結的下劃線
<style>
a{
text-decoration: none;
}
</style>
<body>
<a href="" target="_blank" rel="external nofollow" >點我</a>
</body>
text-align 文字排列方式
格式: text-align: right;
取值: left 左 right 右 center 中
<style>
div {
text-align: center;
}
</style>
<body>
<div>
<h2>Hello text-align</h2>
</div>
</body>
text-indent 文本縮進屬性
格式: text-indent: 2em;
取值: 2em, 其中是em機關, 一個em代表縮進一個文字的寬度
<style>
div p {
text-indent: 2em;
}
</style>
<div>
<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
</div>
text-transform 設定或者取消字型改變
用于使文本顯示為全大寫或全小寫
text-transform 允許字型改變，文本變形
none: 防止任何改變
uppercase: 将文本轉換為大寫
lowercase: 将文本轉換為小寫
capitalize: 将所有單詞第一個字母轉換為大寫
full-width: 轉換為類似于一個等寬字型
<style>
div p {
text-transform: uppercase;
}
</style>
<div>
<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
</div>
text-shadow 設定或者取消文本陰影
格式: text-shadow: h-shadow v-shadow blur color;
取值:
none:取消所有陰影
h-shadow :必需。水準陰影的位置。允許負值。
v-shadow :必需。垂直陰影的位置。允許負值。
blur:可選。模糊的距離。
color:可選。陰影的顔色。
<style>
div p {
text-shadow: 2px 2px rebeccapurple;
font-size: 20px;
text-align: center;
}
</style>
<div>
<p>hello</p>
</div>
清單樣式
list-style-type 設定清單項标志類型
取值:
none : 沒有樣式
disc :實心圓
circle :空心圓
square : 方塊
<style>
div ul {
list-style: circle;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
list-style-position 設定清單項标志出現的位置
取值:
outside : 清單項标志出現在主塊框的外部
inside : 清單項标志出現在主塊框的内部
<style>
div ul li {
border: 1px solid rebeccapurple;
list-style: circle;
list-style-position: inside;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
list-style-image 自定義設定清單項标志
取值: url() : 指定圖示位置
<style>
div ul li {
list-style-image: ul("圖檔路徑");
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
其他樣式
-line-height
設定文本的行高 取值為絕對機關或者相對機關
<style>
div {
border: 1px solid rebeccapurple;
height: 100px;
text-align: center;
background-color: aqua;
line-height: 100px;
}
</style>
<div>
<p>hello 其他樣式</p>
</div>
- display
顯示方式的切換
inline 行内顯示，寬高無效
block 塊級顯示，寬高有效
inline-block 為了能夠讓元素既能夠不獨占一行, 又可以設定寬度和高度, 那麼就出現了行内塊級元素， 行内顯示同時寬高有效
none 不顯示，不占據螢幕空間
flex 伸縮盒布局
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
display: inline-block;
}
.div2 {
display: inline-block;
border: 1px solid red;
height: 200px;
width: 200px;
background-color: tomato;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
- visibility
顯示與隐藏
hidden 隐藏，占據螢幕空間
visible 顯示
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
display: inline-block;
visibility: hidden;
}
.div2 {
display: inline-block;
border: 1px solid red;
height: 200px;
width: 200px;
background-color: tomato;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
- opacity
透明度，0-1之間的取值，取值為0的時候隐藏，占據螢幕空間
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
display: inline-block;
}
.div2 {
display: inline-block;
border: 1px solid red;
height: 200px;
width: 200px;
background-color: tomato;
opacity: 0.2;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
- overflow 溢出處理
hidden 超出内容隐藏
auto 超出産生滾動條
scroll 滾動條
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
overflow: auto;
}
.div1>div {
width: 50px;
height: 50px;
background-color: brown;
}
</style>
<body>
<div class="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
- cursor
指定光标的樣式
| default | 預設光标（通常是一個箭頭） |
|---|---|
| auto | 預設。浏覽器設定的光标。 |
| crosshair | 光标呈現為十字線。 |
| pointer | 光标呈現為訓示連結的指針（一隻手） |
| move | 此光标訓示某對象可被移動。 |
| e-resize | 此光标訓示矩形框的邊緣可被向右（東）移動。 |
| ne-resize | 此光标訓示矩形框的邊緣可被向上及向右移動（北/東）。 |
| nw-resize | 此光标訓示矩形框的邊緣可被向上及向左移動（北/西）。 |
| n-resize | 此光标訓示矩形框的邊緣可被向上（北）移動。 |
| se-resize | 此光标訓示矩形框的邊緣可被向下及向右移動（南/東）。 |
| sw-resize | 此光标訓示矩形框的邊緣可被向下及向左移動（南/西）。 |
| s-resize | 此光标訓示矩形框的邊緣可被向下移動（南）。 |
| w-resize | 此光标訓示矩形框的邊緣可被向左移動（西）。 |
| text | 此光标訓示文本。 |
| wait | 此光标訓示程式正忙（通常是一隻表或沙漏）。 |
| help | 此光标訓示可用的幫助（通常是一個問号或一個氣球）。 |
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)