Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS实践-引入CSS的三种方式
Blogger Information
Blog 11
fans 0
comment 0
visits 10883
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS实践-引入CSS的三种方式
山下之石
Original
1006 people have browsed it

CSS基础-CSS的引入方式

有三种引入方式：1 内联样式，2 内部样式，3 外部样式

1 内联样式：只针对当前标签，写法：<标签 style=”css属性:属性值”>

例如：

  2. <body style="background:pink;">
  3. </body>

2 内部样式：

例如：

  2. <head>
  3. <style>
  4. p{color:red}
  5. </style>
  6. </head>

3 外部样式：

<link rel="stylesheet" type="text/css" href="static/css/mycsss.css">
以上面语句引入编辑好的外部CSS文件。

4 css 作用优先级【就近优先原则】：外部样式<内部样式<内联样式

5 测试代码【外部样式需要先自行编写mycss.css文件】

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 外部方式 -->
  9.     <link rel="stylesheet" type="text/css" href="static/css/mycsss.css">
  10.     <!-- 内部方式  -->
  11.     <style>
  12.     body{
  13.         background:pink;
  14.     }
  15.     </style>
  16. </head>
  17. <!-- 内联方式 <body style="background:pink;"> -->
  19. <body>
  20.     <span>i am span </span>
  21. </body>
  23. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post