Home > Web Front-end > CSS Tutorial > css folding style (1) - three ways to use css style

css folding style (1) - three ways to use css style

黄舟
Release: 2016-12-28 15:59:04
Original
2179 people have browsed it

css folding style (1) - three ways to use css style

1. The declaration tag of css tells the browser what form it should use to parse you, usually: Because html5 supports downward compatibility, see the details Pictured above.

2. How to use css style:
(1) Internal link style sheet:
demo.html

<!DOCTYPE html>  
<html>  
<head>  
    <title>内链样式使用</title>  
    <meta charset="utf-8">  
</head>  
<body style="background-color:green; margin:0; padding:0;">  
    <h1>内链样式使用</h1>  
    <div style="background-color:red;font-size:20px;">  
    内链样式使用  
    <div>  
</body>  
</html>
Copy after login

(2) Embedded style sheet:
demo .html

<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>嵌入式样式</title>  
    <style type="text/css">  
    <!--HTML标记定义 -->  
        body{  
            background:yellow;font-size:20px  
        }  
        div{  
            background:red;font-size:40px  
        }    
  
          
    </style>  
</head>  
      
<body>  
    <h1>嵌入式样式</h1>  
    <div>嵌入式样式</div>  
</body>  
  
</html>
Copy after login

(2) Introduced style sheet:
demo.htnl

<!DOCTYPE html>  
<html>  
<head>  
    <title>引入式样式</title>  
    <meta charset="utf-8">  
      
    <!--style.css就是指定的样式,href为指定路径作用-->     
    <link rel="stylesheet" type="text/css" href="style.css">  
      
     
</head>  
<body>  
    <h1>引入式样式</h1>  
    <a href="http://www.baidu.com" target="_blank">百度</a>  
    <br>  
    <p>引入式样式</p>  
    <div>css的html选择器</div>  
</body>  
  
</html>
Copy after login

style.css

/* HTML样式定义   */  
body{  
    background-color:yellow;  
    color:#fff  
}  
  
div{  
    background:red;font-size:20px  
}
Copy after login

The above is the css folding style (1 ) - Contents on three ways to use css styles. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template