CSS视频教程|CSS样式基本知识

弹指间学会CSS admin 457浏览

第2章CSS样式基本知识

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

内联式CSS样式

css样式可以写在哪些地方了?从css样式代码插入的形式基本分为以下三种:内联式、嵌入式、外部式三种;

<p style="color: aqua;">大灰牛博客分享wordpress建站和dedecms等开源程序建站及web前端开发</p><!-- 内联式css样式 -->

嵌入式CSS样式

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

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

外部式CSS样式

外部式(外联式)外部样式就是把css代码写在一个以.css为拓展名的文件中,在标签head中不在style标签中,通过link标签链接到html页面中

<link rel="stylesheet" type="text/css" href="style.css"/>

  1. css文件名称以有意义的英文字母命名
  2. 其中rel=”stylesheet” type=”text/css”为固定写法,不可更改
  3. link标签一般写在head内,不写在style标签中

三种方法的优先级

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

转载请注明:大灰牛博客 » CSS视频教程|CSS样式基本知识