CSS 經常使用樣式

時間 2021-08-14

標籤 html ide 字體 spa htm class 欄目 CSS 简体版

原文原文鏈接

CSS 經常使用樣式html

height 設置高度ide

<!-- height: 48px 指定高度：分辨率、width: 200px 指定寬度：分辨率 -->
<div style="height: 48px;width: 200px;border: 1px solid red;">
    xxx
</div>

width 設置寬度字體

<!-- width: 80%; 指定寬度：分辨率 可設置百分號，按照屏幕比例設置百分比 -->
<div style="height: 48px;width: 80%;border: 1px solid red;">
    xxx
</div>

font-size 修改字體大小spa

<!-- font-size: 17px; 修改字體大小 -->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 17px;">
    xxx
</div>

text-align 內容水平方向左右居中htm

<!-- text-align: center; 內容水平方向左右居中 -->
<div style="height: 48px;
            width: 80%;
            border: 1px solid red;
            font-size: 17px;
            text-align: center;">
    xxx
</div>

vertical-align 內容垂直方向居中ci

<!-- vertical-align: middle; 內容垂直方向居中，對某些標籤有限制不生效 -->
<div style="height: 48px;
            width: 80%;
            border: 1px solid red;
            font-size: 17px;
            text-align: center;
            vertical-align: middle;">
    xxx
</div>

line-height 跳轉到指定像素位置it

<!-- line-height: 48px; 跳轉到指定48像素中間的位置 -->
<div style="height: 48px;
　　　　　　　width: 80%;
　　　　　　　border: 1px solid red;
　　　　　　　font-size: 17px;
　　　　　　　text-align: center;
　　　　　　　line-height: 48px;">
    xxx
</div>

font-weight 設置字符樣式io

<!-- font-weight: bold; 加粗指定字符 -->
<div style="height: 48px;
　　　　　　  width: 80%;
　　　　　　  border: 1px solid red;
　　　　　　　font-size: 17px;
　　　　　　  text-align: center;
　　　　　　  line-height: 48px;
　　　　　　　font-weight: bold;">
    xxx
</div>

background-color 設置背景色顏色class

<!-- background-color: black; 設置背景色爲黑色 -->
<div style="height: 48px;
              width: 80%;
              background-color: black">
    xxx
</div>

color 設置字體顏色im

<!-- color: red; 設置字體色爲紅色 -->
<div style="height: 48px;
              width: 80%;
              color: red">
    xxx
</div>

opacity 設置透明度

<!-- opacity: 0.5; 設置透明度 0.5表明50%。-->
<div style="height: 48px;
              width: 80%;
              background-color: black;
              opacity: 0.5;">
    xxx
</div>

z-index 設置層級順序、哪一個值大哪一個在上層

<body>
<!--  添加三層層樣式 -->
<div style="
/* z-index: 10; 設置層級順序爲最大 */
    z-index: 10;
/* position: fixed; 添加佔用頁面位置 */
    position: fixed;top: 50%;left: 50%;
/* 根據三層框自定義移動位置 使其在中間 */
    margin-left: -250px;margin-top: -200px;
/* 設置背景爲白色長寬400，500像素的樣式 */
    background-color: white;height: 400px;width: 500px;
    ;"></div>

<!--  添加二層層樣式 -->
<div style="
/* z-index: 9; 設置層級順序爲二層 */
    z-index: 9;
/* position: fixed; 添加佔用頁面位置 */
    position: fixed;
/* 設置背景顏色，並設置長度0爲所有覆蓋 */
    background: black;top: 0;bottom: 0;right: 0;left: 0;
/* 設置透明度 */
    opacity: 0.5;
    "></div>
<!-- style 設置屬性、height:48px 設置背景分辨率、background-color: green(綠) 修改背景顏色、 -->
<div style="height: 5000px;background-color: green;">
    xxxxxx
</div>
</body>
</html>