简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS视频教程,第2章CSS样式基本知识
Blogger Information
Blog 11
fans 0
comment 1
visits 7920
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视频教程,第2章CSS样式基本知识
鬼牛阿飞
Original
620 people have browsed it

课程目录
1 内联式CSS样式
2 嵌入式CSS样式
3 外部式CSS样式
4 三种方法的优先级

1 内联式CSS样式

css样式可以写在哪些地方了？从css样式代码插入的形式基本分为以下三种：内联式、嵌入式、外部式三种；
<p style="color: aqua;">大灰牛博客分享wordpress建站和dedecms等开源程序建站及web前端开发</p><!-- 内联式css样式 -->

2 嵌入式CSS样式

可以把css样式代码写在html页面中的style标签之间，一般情况下嵌入式css样式写在标签head之间，这种写法针对单一页面方便，但是对于一个包含很多页面的网址，不推荐使用

  1. <!DOCTYPE html>
  2. <html>
  3.     <heade>
  4.         <title>嵌入式CSS样式</title>
  5.         <meta charset="UTF-8"/>
  6.         <link rel="stylesheet" type="text/css" href="style.css"/>
  7.         <style type="text/css">
  8.         h1{font-size: 24px;color:#f90;font-weight: normal;}    
  9.         </style>
  10.     </heade>
  11.     <body>
  12.         <h1>dhnblog.com大灰牛博客</h1>
  13. </html>

3 外部式CSS样式

外部式（外联式）外部样式就是把css代码写在一个以.css为拓展名的文件中，在标签head中不在style标签中，通过link标签链接到html页面中
<link rel="stylesheet" type="text/css" href="style.css"/>
e.g：
1.css文件名称以有意义的英文字母命名
2.其中rel=”stylesheet” type=”text/css”为固定写法，不可更改
3.link标签一般写在head内，不写在style标签中

4 三种方法的优先级

对于同一个元素，我们同时使用三种方法设置css样式，根据优先级：内联式>嵌入式>外部式，其中嵌入式css样式>外部式的前提：嵌入式css样式位置一定再外部式后面，注意根据就近原则（离被设置元素越近，优先级别越高）

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！