How to learn css? What knowledge points need to be learned-CSS Tutorial-php.cn

How to learn css? What knowledge points need to be learned

巴扎黑

Release： 2017-07-31 11:01:02

Original

1686 people have browsed it

Every programmer who learns programming languages must learn HTML and CSS. They are not programming languages, but markup languages. The former is used to add the structure of the web page, and the latter is used to modify and beautify the HTML structure. In this article, we focus on how to learn CSS.

If you want to learn CSS well, you must first study the manual

How to learn css? What knowledge points need to be learned

Recommended studyCSS Online Manual.

After studying the manual, you can then study the example tutorial

How to learn css? What knowledge points need to be learned

Recommended learningCSS 0 basic introductory tutorial is more suitable for novices to learn.

Let’s take a look at the learning steps:

1. CSS rules.

Pseudo class syntax:

selector:pseudo-class {property:value;}

Copy after login

CSS classes can also use pseudo classes:

selector.class:pseudo-class {property:value;}

Copy after login

//m.sbmmt.com/css/css- pseudo-classes.html

2.CSS declaration.

<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>

Copy after login

//m.sbmmt.com/code/3213.html

3. Different writing methods and units of values.

<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>

Copy after login

//m.sbmmt.com/code/3148.html

4. Grouping of selectors.

There are many elements with the same style in the style sheet. In order to minimize the code, you can use grouping selectors. Separate each selector with a comma.

 <style>
 h1,h2,p
 {
 color: #d4d223;
 }
 </style>

Copy after login

//m.sbmmt.com/code/3241.html

5. Inheritance.

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

Copy after login

//m.sbmmt.com/css-tutorial-360263.html

6. Derived selector.

<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>

Copy after login

//m.sbmmt.com/code/3287.html

The above is the detailed content of How to learn css? What knowledge points need to be learned. For more information, please follow other related articles on the PHP Chinese website!