繁星CSS3之旅-CSS入門基礎知識

時間 2019-12-07

標籤繁星 css3 css 之旅入門基礎知識欄目 CSS 简体版

原文原文鏈接

CSS介紹css

概述:CSS指層疊樣式表，極大提升了工做效率（好處：使咱們的UI看起來更加完美）。html

CSS基礎語法spa

語法：屬性選擇器{屬性名:屬性值}code

selector{property:value}

例：htm

h1{color:red;font-size:14px;}

提醒：屬性大於1個以後，屬性之間用分號隔開，若是值大於1個單詞，則須要加上引號：blog

p{font-family:"sans serif";}

CSS高級語法繼承

一、選擇器分組文檔

h1,h2,h3,h4,h5,h6{color:red;}

二、繼承it

body{
    color:green;
}

例：class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1,a{color: red;font-size:14px;}
        body{color:blue}
    </style>
</head>
<body>
    <h1>
        應用了樣式表
    </h1>
    <a href="www.cowyun.com">這是一個a標籤樣式</a>
    <h2>
       這是h2標題
    </h2>
</body>
</html>

備註：根據上面例子可知，已定義的屬性會選擇本身屬性選擇器的屬性值，未定義屬性會繼承body或者其餘父類的屬性值。

CSS派生選擇器

一、派生選擇器

經過依據元素在其位置的上下文關係來定義樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li strong{color: red;font-size:14px;}
        strong{color: blue}
    </style>
</head>
<body>
    <p><strong>p標籤Hello</strong></p>
    <ul><li><strong>li標籤Hello</strong></li>
    </ul>
</body>
</html>

備註：已經定義好的效果是不會被覆蓋的，沒有具體指定被咱們當前的strong效果覆蓋掉。這就是派生選擇器的使用。

CSSid選擇器

一、id選擇器

id選擇器能夠爲標有id的HTML元素指定特定的樣式

id選擇器以"#"定義

二、id選擇器和派生選擇器

目前比較經常使用的方式是id選擇器經常用於創建派生選擇器

例：

html文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p id="pid">Hello CSS<a href="http://www.cowyun.com">科沃雲</a></p>
    <div id="divid">這是div<p>這是第一個div</p></div>
</body>
</html>

CSS文檔

#pid{
    color: green;
}
#pid a{
    color:red;
}
#divid p{
    color: blue;
}

CSS類選擇器

一、類選擇器

類選擇器以一點來顯示

二、class也能夠用做派生選擇器

例：

HTML文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p class="pclass">這是一個class效果<a href="http://www.cowyun.com">科沃雲</a></p>
    <div class="divclass">
    Hello Div
    <p>我愛你</p>
    </div>
</body>
</html>

CSS文檔

.pclass{
    color: red
}
.divclass{
    color: blue
}
.pclass a{
    color: green
}
.divclass p{
    color: black
}

CSS屬性選擇器

一、屬性選擇器

對帶有指定屬性的HTML元素設置樣式

二、屬性和值選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        [title]{
            color:blue;
        }
        [title=te]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="t">屬性選擇器</p>
    <p title="te">屬性和值選擇器</p>
</body>
</html>

備註：屬性選擇器若是沒有指定值，他的值怎麼顯示無所謂，但若是指定其值，必須按照其具體的值來生效，若是值變化將再也不生效。注意：屬性選擇器在IE6或者更低的版本是不支持的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。