HTML Lesson 2 - css - Code World

Please pay attention to the official account: automated testing practice

Let me give you a suggestion first, that is to use the sublime editor to write. It doesn't matter if you use the other, I just suggest, because this will help you autocomplete a lot of code.

css concept

csscalled 层叠样式表. It means layer by layer. The role is to make the visual labels on the page look good.

Three ways to write css

inline

Set by styleattributes in the tag.

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">
</head>
<body>    <!-- 这是注释 -->    <!--通过css改变文字颜色：color属性 -->    <div style="color: red; border: 1px solid red; display: inline;">This is a div tag</div>    <div style="color: rgb(15, 20, 220);">This is a div tag</div>    <div style="color: #ccff66;">This is a div tag</div>
</body>
</html>

How to write colors:

direct English writing
rgb r: red, g: green, b: blue, all colors are red green blue. The value is 0-255, rgb(0，0，0)which means black, rgb(255, 255, 255)white and rgb(0, 255, 0)green .
Hexadecimal: add in front #, such as#ccff00

All colors are written in hexadecimal.

embedded

written in <head>the <style>label.

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <style type="text/css">        /*            css的注释写法        */        div{
            border: 1px solid red;            
            display: inline;        
        }    </style></head><body>    <!-- 这是注释 -->    <!--通过css改变文字颜色：color属性 -->    <div>This is a div tag</div>
</body>
</html>

reference

Import external files through the attributes headof the tags in the linktags . It is a fixed value, just write it like this. If you use the sublime editor, this is automatically completed.hrefcssrel="stylesheet"

File structure:

cssInside the folder is a index.cssfile.

lesson2.html

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <!--    <style type="text/css">        /*            css的注释写法        */        div{            border: 1px solid red;            display: inline;        }    </style> -->    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>    <!-- 这是注释 -->    <!--通过css改变文字颜色：color属性 -->    <div>这是一个div标签</div>
</body>
</html>

index.css

div{
    font-family: 'Microsoft Yahei';    
    font-size: 20px;    
    border: 1px solid red;    
    display: inline;
}

Only use when writing later ; cssonly use 引用式when writing css later; only use when 引用式writing latercss引用式

Note: If you csswrite the style in and also in the divtag style, then there will be a limited selection divof what's stylein it, that's it 就近原则.

Tomorrow css, we will talk about the remaining knowledge points. Let’s digest the above knowledge first.

HTML Lesson 2 - css

css concept

Three ways to write css

Guess you like