總結CSS的常用樣式

來源:互聯網
上載者:User
css 說的通俗一點就是 給標籤加樣式的。什麼玩意是樣式呢。你們可以理解為人穿的衣服,化妝之類的修飾,讓自己的寫的標籤變的好看一點

那麼這個css 怎麼加到對應的標籤上面去呢

有3種方法 分別是 外部樣式、內頁樣式、行內樣式。

那麼這個css 怎麼加到對應的標籤上面去呢 有3種方法 分別是 外部樣式、內頁樣式、行內樣式。外部樣式:將網頁連結到外部樣式表。比如這個樣子:<link rel="stylesheet" type="text/css" href="xiaochuan.css">內頁樣式:在網頁上建立嵌入的樣式表比如這個樣子:<style>body{}</style>行內樣式:應用內嵌樣式到各個網頁元素。比如這個樣子:<p style='color:#999999'>xiaochuan</p>那比如說我這三個 樣式都針對 某一個標籤他的優先順序是什麼樣子的呢?行內樣式 > 內頁樣式 > 外部樣式怎麼理解呢比如:行內樣式 設定文字大小為 14px內頁樣式 設定文字大小為 15px外部樣式 設定文字大小為 16px那麼這邊標籤的 設定文字大小為 14pxcss 文法標籤選擇符方式  這是針對頁面上面對應的所有標籤都會生效p{color:#999999}<p >xiaochuan1</p><h1 >xiaochuan2</h1>類選擇符   這是針對頁面上面標籤中class屬性存在對應類名都會生效.xiao{color:#999999}<p class='xiao'>xiaochuan1</p><p >xiaochuan2</p> ID選擇符 這是針對頁面上面標籤中id屬性存在對應類名都會生效 切記這個只能用一次。有可能說某些瀏覽器可以無限使用但是不建議使用多次#xiao{color:#999999}<p id='xiao'>xiaochuan1</p><p >xiaochuan2</p> 關聯選擇符  這是針對頁面上面對應格式的所有標籤都會生效p span{color:#999999}<p><span>xiaochuan1</span></p><p><a>xiaochuan2</a></p>組合方式 這是針對頁面上面對應的所有標籤都會生效h1, h2{ color: red; }<h1>xiaochuan1</h1><h2>xiaochuan2</h2><h3>xiaochuan3</h3>如果我們這邊需要對某個標籤定義多個css怎麼去寫呢格式為 樣式的名稱:樣式的值; 如果寫單個的話分號可以進行省略,最後一個分號也可以省略<p style='color:#999999'>xiaochuan</p><p style='color:#999999;color:font-size:9pt'>xiaochuan</p>css 屬性賦值css 有的屬性是有多個值的 當然也可以多個賦值 也可以直接賦值給一個我這邊就說一下margin 吧margin:10px;這個代表的意思為所有 4 個外邊距都是 10pxmargin:10px 5px;這個代表的意思為上外邊距和下外邊距是 10px右外邊距和左外邊距是 5pxmargin:10px 5px 15px;這個代表的意思為上外邊距是 10px右外邊距和左外邊距是 5px下外邊距是 15pxmargin:10px 5px 15px 20px;這個代表的意思為上外邊距是 10px右外邊距是 5px下外邊距是 15px左外邊距是 20px當然如果搞不懂直接 margin-leftmargin-topmargin-rightmargin-bottom這樣也可以我這邊整理了一下 經常會在項目中用到的一些樣式color 設定文字顏色font-family 定義文字字型font-size 設定文字的大小font-style 設定 文字斜體line-height 設定行高text-align 文字的對齊list-style-type 列表樣式 background 定義背景 可以設定 顏色圖片之類的cursor 設定滑鼠的形狀 border 設定標籤的邊框margin 設定標籤的外邊距padding 設定標籤的內邊距position 定位overflow 溢出float 浮動width 設定寬height 設定高a 標籤這個比較特別 a  所有超連結a:link 超連結顯示文字格式a:visited 瀏覽過的連結文字格式a:active 按下連結的格式a:hover 滑鼠轉到連結
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.