1. 程式人生 > 其它 >Java基礎之淺談網路程式設計

Java基礎之淺談網路程式設計

CSS屬性

1.文字屬性

  • font-size 字型大小 單位是px,瀏覽器預設是16px,設計圖常用字號是12px
  • font-family 字型 多個字型中間用逗號連線,先解析第一個字型,如果沒有解析第二個人字型
  • color 字型顏色 color:red; color:rgb(255,0,0)取值在0~255之間 ;十六進位制color:#fffff
  • font-weight 字型加粗

font-weight:bolder (更粗的) / bold (加粗) / normal (常規) /lighter(細的)

font-weight: 100-900; 100-500 不加粗 600-900 加粗

常用:100 細體 400 正常 700 加粗 900 更粗

  • font-style 字型傾斜

font-style: italic(傾斜字)/ oblique (傾斜的文字)/ normal (常規顯示)

  • text-align 文字水平對齊

text-align:left; 水平靠左

text-align:right; 水平靠右

text-align: center; 水平居中

text-align: justify; 水平2端對齊,但只對多行起作用;

  • line-height 行高

line-height的資料=height的資料,可以實現單行文字垂直居中

  • text-indent 首行縮排

text-indent可以取負值

text-indent屬性只對第一行起作用

.p{
	text-indent:2em;
}
  • letter-spacing 字間距

控制文字和文字之間的間距

  • word-spacing 詞間距

控制英文單詞,詞與此之間的間距

  • text-decoration 文字修飾

text-decoration: none沒有/underline 下劃線/overline 上劃線/ line-through刪除線

  • font 文字簡寫

​ font是font-style font-weight font-size/ line-height font-family的簡寫。

​ font:italic 800 30px/80px "宋體"; 順序不能改變

,必須同時指定font-size和font-family屬性時才起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p{
            font: italic bold 20px/1em 微軟雅黑;
        }
    </style>
</head>
<body>
    <p>
        大家好,Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Numquam dignissimos exercitationem iure laborum inventore
         rerum sit expedita natus a ipsam, possimus deleniti cum unde 
         officia maiores debitis cumque. Rem, iure.
    </p>
</body>
</html>
  • text-transform 大小寫
CSS
text-transform 大小寫 
capitalize 單詞首字母大寫
lowercase 所有單詞字母小寫
uppercase 所有單詞字母大寫
none      沒有
 p{
            /* text-transform: capitalize; */
            /* text-transform: lowercase; */
            text-transform: uppercase;
   }

2. 列表屬性

  • list-style-type 定義列表符合樣式

list-style-type:disc(實心圓)/circle(空心圓)/square(實心方塊)/none(去掉符號)

  • list-style-image 將圖片設定為列表符合樣式
CSS
list-style-image:url();
  • list-style-position 設定列表項標記的放置位置
CSS
list-style-position:outside; 列表的外面 預設值
list-style-position:inside; 列表的裡面 
  • list-style 縮寫
CSS
list-style:none;	去除列表符號