首頁 > web前端 > css教學 > 如何學習css?需要學習哪些知識點

如何學習css?需要學習哪些知識點

巴扎黑
發布: 2017-07-31 11:01:02
原創
1724 人瀏覽過

每個學習程式語言的程式設計師,都必須學習的是HTML和CSS,它們並非是程式語言,而是標記語言。前者是用來加入網頁的結構,後者則是樣式,用來修飾美化HTML結構的。本篇文章我們著重講的是有關css的學習方法。

想學好css,首先就是要學習手冊

如何學習css?需要學習哪些知識點

#推薦學習CSS 線上手冊

學習完手冊,接下來就可以學習實例教學

如何學習css?需要學習哪些知識點

#推薦學習CSS 0基礎入門教學比較適合新手學習。

下面來看下學習步驟:

1.CSS規則。

偽類別的語法:

selector:pseudo-class {property:value;}
登入後複製

CSS類別也可以使用偽類別:

selector.class:pseudo-class {property:value;}
登入後複製

#http://www.php.cn/css/css- pseudo-classes.html

2.CSS宣告。

<html>
<head>
 <meta charset="utf-8">
 <title>php中文网(php.cn)</title>
 <style>
 p
 {
 border-top-style:dotted;
 border-right-style:solid;
 border-bottom-style:dotted;
 border-left-style:solid;
 }
 </style>
</head>
<body>
<p>两个不同的边界样式。</p>
</body>
</html>
登入後複製

http://www.php.cn/code/3213.html

#3.值的不同寫法和單位。

<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        body {color:red;}
        h1 {color:#00ff00;}
        p.ex {color:rgb(0,0,255);}
    </style>
</head>

<body>
<h1>这是标题</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义的默认文本颜色选择器。</p>
<p class="ex">这是一段使用class选择器定义的p。这段文字是蓝色的。</p>
</body>
</html>
登入後複製

http://www.php.cn/code/3148.html

#4.選擇器的分組。

在樣式表中有很多相同樣式的元素,為了盡量減少程式碼,你可以使用分組選擇器。每個選擇器用逗號分隔。

 <style>
 h1,h2,p
 {
 color: #d4d223;
 }
 </style>
登入後複製

http://www.php.cn/code/3241.html

5.繼承。

html {
  font-family: sans-serif;
}
 
p {
  line-height: 1.5;
}
 
/*
This rule is not needed ↷
p a {
  line-height: 1.5;
}
*/
登入後複製

http://www.php.cn/css-tutorial-360263.html

6.衍生選擇器。

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
登入後複製

http://www.php.cn/code/3287.html

以上是如何學習css?需要學習哪些知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板