Home > Article > Web Front-end > How to learn css? What knowledge points need to be learned

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

巴扎黑Original: 2017-07-31 11:01:021672browse

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

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

CSS classes can also use pseudo classes:

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

http://www.php.cn/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>

http://www.php.cn/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>

http://www.php.cn/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>

http://www.php.cn/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;
}
*/

http://www.php.cn/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>

http://www.php.cn/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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation on the use of direction in CSSNext article：Detailed explanation on the use of direction in CSS

See more

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

Related articles