CSS簡介

weixin_34148340發表於2018-11-17
CSS

CSS(Cascading Style Sheets)：層疊樣式表，它用來控制HTML標籤的樣式，在美化網頁中起到非常重要的作用

CSS的編寫格式是鍵值對的形式

格式：屬性名 : 屬性值
color:blue;
background-color:green;
font-size:15px;

CSS的3種使用形式

行內樣式（內聯樣式）：在標籤的style屬性中書寫（標籤都有style屬性）

!-- 行內樣式 -->

<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>

<h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>

業內樣式：在本網頁的style標籤中書寫（因為body標籤用來描述內容和結構，其它東西都放到head中,所以將業內樣式寫在head標籤內）

<meta charset="UTF-8">
<title>CSS頁內樣式</title>

<style>
/* 標籤選擇器 /
/ div文字顏色為藍色,字型大小25,邊框為紅色單邊框 /
div{
color: blue;
font-size: 25px;
border:2px solid red;
}
/ p文字顏色為橘色,字型17,邊框為紫色雙邊框寬度為5 */
p{
color: orange;
font-size: 17px;
border:5px double blueviolet;
}
</style>
</head>
<body>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<p>段落段落段落段落段落段落段落段落</p>
</body>

外部樣式：在單獨的CSS檔案中書寫，然後在網頁中用link標籤進行引用

  • 先新建一個css檔案，在css檔案內書寫我們需要的樣式
    br>

    
    <head>
        <meta charset="UTF-8">
        <title>CSS外部樣式</title>
        <!-- 引入外部樣式 -->
        <link rel="stylesheet" href="css/index.css">
    </head>

    <body>

CSS常用選擇器

屬性：通過屬性的複雜疊加，才能做出漂亮的網頁
選擇器：通過選擇器找到對應的標籤設定樣式
標籤選擇器：根據標籤名找到對應的標籤
<style>
/* 標籤選擇器 /
/ div文字顏色為藍色,字型大小25,邊框為紅色單邊框 */
div{
color: blue;
font-size: 25px;
border:2px solid red;
}
</style>

類選擇器

/* 類選擇器 */
.test1{
color: red;
font-size: 30px;
border:5px double green;
}
<div class="test1">類選擇器</div>
<p class="test1">類選擇器</p>

id選擇器

<div id="main">id選擇器</div>

並列選擇器

/* 複合選擇器(且,前面不可以是ID選擇器) */
p.test1{
color: yellow;
}

後代選擇器

/* 直接後代選擇器 */
div > p{
font-size: 90px;
}

相關文章