首頁 > 開發者 > 網站開發

css瞭解一下!!!

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：head   層疊   瞭解   type   一個   size   結束   標記   ima   

css簡介
  • css(cascading style sheet,層疊樣式表):為了讓網頁的內容核樣式拆分開;
  • 當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化(渲染);
css文法
    • css樣式由兩個組成部分:選取器和聲明;聲明又包括屬性和屬性值,聲明結束分號結束;
    • h1(選取器) {color(屬性):red(值);font-size:14px;}
  • css引入方法:
    • 行內樣式:在標記的style的屬性中設定css樣式,不推薦大規模使用
    • <p style="color: red">Hello world.</p>

       

    • 內部樣式:嵌入式將css樣式集中寫在網頁的<head></head>
    • <style>       body{            margin: 0;            font-family: Ebrima,Helvetica,sans-serif;        }        .topnav{            overflow: hidden;            background-color: aquamarine;        } </style>

       

    • 外部樣式:將css寫在一個單獨的檔案中,然後在頁面進行引入即可;
    • <head>    <meta charset="UTF-8">    <title>mishopping</title>    <link rel="stylesheet" href="object.css">   #用link在這裡匯入</head>

       

css選取器
  • 基本選取器:優先順序(內聯樣式-1000 >> id選取器-100 >> 類別選取器-10 >> 元素選取器(1))
    • 元素選取器
    • div{color: "red";}

       

    • id選取器
    • HTML:<div id = ‘c1‘></div>CSS:#c1{backgroud-color:red;}

       

    • 類別選取器
    • HTML:<div id = ‘c1‘></div>CSS:.c1 {  font-size: 14px;}div.c1 {  color: red;}

      注意:樣式類名不要用數字開頭(有的瀏覽器不認)  標籤中的class屬性如果有多個,要用空格分隔;

    • 通用選取器:*號

 

  • 組合選取器
    • 後代選取器:尋找的是父級標籤的子子孫孫
    • div    a{color:green;}#在HTML檔案中,所有的div標籤下的a標籤都會被找到;

       

    • 兒子選取器:只能找到下一代,所有跟下一代同級的都會被尋找
    • div>p{color:red;}所有div的下一級的所有p標籤都會被找到;

       

    • 毗鄰選取器:緊挨著前面標籤,中間不能有其他標籤
    • div+p{margin:5px}只看緊挨著div標籤有沒有p標籤;

       

    • 弟弟選取器:比毗鄰選取器進階一點,是前標籤下所有的目標標籤
    • div~p{color:red}div後的所有同級P標籤

       

css瞭解一下!!!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
H5 中html 頁面存為圖片並長按 儲存
__x__(20)0907第四天__ css 框模型
SVN提示https認證驗證失敗問題svn: E230001: Server SSL certificate verifi...
JS如何判斷文字是全形還是半形（轉載）
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More