日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css常用样式标签

發布時間：2023/12/10 编程问答 25 豆豆
生活随笔 收集整理的這篇文章主要介紹了 css常用样式标签 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css常用樣式標簽

  • css 字體的設置 font-family

  • font-size 設置字號大小

  • 設置字體樣式 font-style
    normal : 正常顯示。瀏覽器默認的樣式
    italic ：斜體顯示文字
    oblique : 歪斜體顯示，比斜體的傾斜角度更大

  • font-weight 設置字體加粗 可取值為hold和normal

  • 調整字符間距 letter-spacing 可以設置兩個字符之間的間距（英文，中文，數字）

  • 調整單詞間距 word-spacing 主要用于單詞之間的距離。

    <style>div,button{letter-spacing: 0.5em;word-spacing: 1em;} </style><body><div>這是div1</div><div id="d2">hello world!</div><button>點擊我</button> </body>

  • 添加文字修飾 text-decoration

    under line 給文字加下劃線

    over line 給文字加上劃線

    line-through 給文字加刪除線

    • 案例

    • 代碼
    <style>.gray{ color:gray;}.red{color:red;}.large{font-size: 1.5em;}.small{font-size:0.6em}#old{text-decoration: line-through;/*加刪除線*/}.btn{background-color:#40c19d ;color: #ffffff;border-radius: 3px;padding:3px}</style></head><body><span class="gray">￥</span><span class="red large">49</span><span class="red">.00</span><span class="gray small" id="old">￥98.00</span><span class="btn">包郵</span></body>

  • 設置文本排列方式

    text-align (水平對齊)：left 、center 、right

    水平對齊和垂直對齊

    水平對齊分為三種：左、居中、右

    ? left. Center.right【用于元素在塊級里面】

    垂直對齊分為三種: 頂端、居中、底部

    【元素與元素之間】

  • 元素之間的垂直對齊方式

    <style>div,span{background-color: gray;text-align: center;}img{width: 100px; vertical-align: middle;} </style>

  • 調整行高 line-height

    <style>div{line-height: 10px;}p{width: 100px;height: 50px;border:2px red dotted;text-align: center;line-height: 50px;}/*dotted 點線 solid 實線*/</style> </head> <body><div>hello <br> world</div><p>女士上衣</p> </body>

    讓line-height等于自己的高度

    設置垂直居中

    boder 后面加3個值。像素、顏色、線型

  • color設置前景（字體）顏色

    color：顏色關鍵字 | RGB函數 | 6位16進制數

  • CSS中設置背景顏色 background-color

  • 插入背景圖片：background-image

    導入圖片用url引入

    如果取100%或cover將圖片設置為和容器一樣大

    如果大小變小了，他會重復，因此現在用

    用backgound-repeat：no-repeat；

  • background-size 背景圖片的大小

  • background-repeat 設置背景圖片的重復方式

  • background-position 背景圖片的位置調整

  • background-attachment 可以 使得背景圖片固定

    <style>body{background-image: url(./image/bg2.jpg); /* 插入背景圖片 */background-size: 200px 100px; /*背景圖片的大小*/background-repeat:no-repeat ; /*不重復*/background-position: center; /*背景圖片的位置調整*/min-height: 100vh;margin:0px;background-attachment: fixed; /*使背景圖片固定*/}div{line-height: 10px; /*調整行高*/background-image: url(./image/bg1.jpg);}p{width: 100px;height: 800px;border:2px red dotted; /*boder 后面加3個值。像素、顏色、線型*/text-align: center; /*水平對齊*/line-height: 50px;} </style> </head> <body><div>hello <br> world</div><p>花開富貴</p> </body>

  • min-height 可視化高度

  • border

    顏色 border-color 默認值為black

    粗細 border-width 默認值為1.5

    線型 border-style 無默認值

    邊框：broder 內邊距：padding 盒子間距：margin

  • background-attachment：fixed；

    設置背景圖片固定，拉動滾動條，圖片不動

    • 案例

      border:red 2px solid; 可以拆分為三個單獨的樣式。 border-color: green; border-width: 5px; border-style: outset; border-top: red 2px dotted; border-bottom: green 3px solid; border-bottom-color: pink;

    border-color:red; 四個共用 border-color:red green; 第一個分給上下 第二個分給左右 border-color:red green blue ; 第一個分給上，第二個分給左右，第三個分給下 border-color:red green blue purple; 按照順時針方向，上 右 下 左
    • 代碼
    <style>div{border:5px solid;border-color:red green blue purple;}</style> </head> <body><div>hello <br> world</div><p>女士上衣</p> </body>

    列表樣式

    列表樣式 list-style 或 list-style-type

    取值：

    disc : CSS1 默認值。實心圓

    circle : CSS1 空心圓

    square : CSS1 實心方塊

    decimal : CSS1 阿拉伯數字

    lower-roman : CSS1 小寫羅馬數字

    upper-roman : CSS1 大寫羅馬數字

    lower-alpha : CSS1 小寫英文字母

    upper-alpha : CSS1 大寫英文字母

    none : CSS1 不使用項目符號

    armenianl : CSS2 未支持。傳統的亞美尼亞數字

    cjk-ideographic : CSS2 未支持。淺白的表意數字

    georgian : CSS2 未支持。傳統的喬治數字

    lower-greek : CSS2 未支持。基本的希臘小寫字母

    hebrew : CSS2 未支持。傳統的希伯萊數字

    hiragana : CSS2 未支持。日文平假名字符

    hiragana-iroha : CSS2 未支持。日文平假名序號

    katakana : CSS2 未支持。日文片假名字符

    katakana-iroha : CSS2 未支持。日文片假名序號

    lower-latin : CSS2 未支持。小寫拉丁字母

    upper-latin : CSS2 未支持。大寫拉丁字母

    none：沒有列表符號。

    • 案例

    • 代碼
    <style>ul{border:1px gray solid;list-style:none ;padding:0px;width:120px;text-align: center;}li:hover{ border-color:#cccccc #999999;background-color: #999999;color:white;}li{font-weight: bold;border:8px solid;border-color:white;}</style></head><body><ul><li>Home</li><li>Contact us</li><li>Web Dev</li><li>Web Design</li><li>Map</li></ul></body>

    數字

    lower-greek : CSS2 未支持。基本的希臘小寫字母

    hebrew : CSS2 未支持。傳統的希伯萊數字

    hiragana : CSS2 未支持。日文平假名字符

    hiragana-iroha : CSS2 未支持。日文平假名序號

    katakana : CSS2 未支持。日文片假名字符

    katakana-iroha : CSS2 未支持。日文片假名序號

    lower-latin : CSS2 未支持。小寫拉丁字母

    upper-latin : CSS2 未支持。大寫拉丁字母

    none：沒有列表符號。

    • 案例

    • 代碼
    <style>ul{border:1px gray solid;list-style:none ;padding:0px;width:120px;text-align: center;}li:hover{ border-color:#cccccc #999999;background-color: #999999;color:white;}li{font-weight: bold;border:8px solid;border-color:white;}</style></head><body><ul><li>Home</li><li>Contact us</li><li>Web Dev</li><li>Web Design</li><li>Map</li></ul></body>

    總結

    以上是生活随笔為你收集整理的css常用样式标签的全部內容，希望文章能夠幫你解決所遇到的問題。

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