css基礎-css選擇器和css文本樣式相關

時間 2019-12-30

標籤 css 基礎選擇器文本樣式相關欄目 CSS 简体版

原文原文鏈接

css基礎-css選擇器和css文本樣式相關：css

使用link鏈入外部樣式，頁面加載時會同時加載樣式html

@import url(「*.css」);使用導入式，頁面加載完後，纔會加載樣式api

連接僞類的順序字體

:link-> :visited ->:hover-> :activeurl

或者spa

: visited -> : link ->:hover-> :activecode

選擇器的優先級：orm

id選擇器>class選擇器>標籤選擇器htm

若是設置了一樣的類樣式，類樣式與元素裏類的順序沒有關係，取決於哪一個樣式離須要引用樣式的元素最近就用哪一個，因此div裏的文字顏色是「橘色「blog

選擇器權值：

標籤選擇器：1

類和僞類選擇器：10

id選擇器：100

通配符選擇器：0

行內樣式：1000

!important：優先級最最高

權值不一樣時，根據權值判斷樣式；權值相同時，根據就近原則判斷樣式

經常使用選擇器：

input:focus

p:first-letter p元素的首字母

p:first-line p元素的首行

serif字體和sans-serif字體的區別：

sans-serif有修飾

sans-serif無修飾

font-style:normal/italic/oblique

正常斜體傾斜

font簡寫順序： font-style font-variant font-weight font-size font-family；

img水平居中：

img不是塊級元素，不能使用img{text-align:center;}

能夠在img外面包裹div，使用div{text-align:center;}

margin:0 auto也能夠實現

vertical-align能夠設置數值

單行文字水平垂直居中：

height與Line-height相同，text-align:center;

多行文字水平垂直居中：

多行文字設置margin:0 auto；

文字外容器設置：display:table-cell;vertical-align:middle;

文字外容器的外容器設置：display:table;

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;} .warp1{ height:80px; width: 100%; background-color: #14191e; line-height:80px; text-align:center; } .warp1 h1{ color:#fff; font-size:24px; } .warp2{ height:400px; width: 100%; border:1px #14191e solid; display:table; } .content{ display:table-cell; vertical-align:middle; } .content p{ width:500px; font-family: "微軟雅黑"; line-height:1.5em; font-size:14px; margin:0 auto; } </style> </head> <body> <div class="warp1"> <h1>CSS vertical-align 屬性</h1> </div> <div class="warp2"> <div class="content"> <p>vertical-align 屬性設置元素的垂直對齊方式</p> <p>該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值。這會使元素下降而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。</p> </div> </div> </body> </html>

文本大小寫：

text-transform：capitalize/uppercase/lowercase/none

文本裝飾線：

text-decoration: underline/overline/line-through

文本樣式應用demo：

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;} .wrap{ height:200px; line-height:200px; width:100%; text-align:center; background-color: #abcdef; font-family: "宋體"; } span.words{ font-size: 28px; color: gray; text-decoration: underline; letter-spacing: 5px; margin-left: 10px; vertical-align: 12px; } span.name{ color:red; font-size: 60px; letter-spacing: 10px; text-transform:uppercase; } span.mark{ font-style: italic; color: gray; font-weight: bold; font-size: 60px; } </style> </head> <body> <div class="wrap"> <span class="name">cyy</span><span class="words">你會愈來愈棒棒</span><span class="mark">！</span> </div> </body> </html>

文本樣式demo2：

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title>vertical-align</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;} .wrap{ height: 100px; line-height: 34px; width: 100%; padding-left:10px; } hr{ margin:10px 0; } h3{ color:green; margin: 10px 0; } a{ text-decoration: none; color:#009; } span{ color:orange; } </style> </head> <body> <div class="wrap"> <h3>大話西遊之大聖娶親的影評</h3> <a href="#">熱門</a>/<a href="#">最新</a>/<a href="#">好友</a> <hr> <p><a href="#">羅紅黴素</a><span>★★★★★</span>2019-07-26</p> <p>有人跟我比賽背臺詞麼</p> <p>閱讀：1615 <a href="#">有用</a></p> <hr> <p><a href="#">十七隻貓和魚</a><span>★★★★</span>2019-04-26</p> <p>任什麼時候候任何場合均可以再看一遍的電影</p> <p>閱讀：515 <a href="#">有用</a></p> <hr> <p><a href="#">暖家男</a><span>★★★★</span>2019-04-22</p> <p>必定有一些電影，永遠都不能被超越</p> <p>閱讀：490 <a href="#">有用</a></p> <hr> </div> </body> </html>