HTML+CSS培训教案（九）

最新推荐文章于 2023-10-13 17:08:46 发布

红壶吃猬队

最新推荐文章于 2023-10-13 17:08:46 发布

阅读量183

点赞数

分类专栏： HTML/CSS HTML+CSS培训教案文章标签： HTML CSS 教程

本文链接：https://blog.csdn.net/chenmiaoqin950606/article/details/89434731

版权

HTML/CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML+CSS培训教案

16 篇文章 1 订阅

订阅专栏

十九、引入CSS样式

代码

（事先在同级目录下创建19.html和19.css）

[19.html]

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>三大选择器</title>
        <link rel="stylesheet" type="text/css" href="19.css" />
    </head>
    <body>
        <p>段落一</p>
        <p class="red">段落二</p>
        <p id="head">段落三</p>
    </body>
<html>

[19.css]

p{font-size:20px;}
.red{color:red;}
#head{color:green;}

知识点

可以用<link>链接.css文件的方法引入CSS样式，这种方法叫链接式。

在<head></head>中嵌入<style></style>标记的方法叫嵌入式

扩展

注释掉<link>，在第一个<p></p>处加属性style=“color:red;font-size:20px;”

答案：(1)可以在标记内部使用style属性来引入样式（这种方法叫做行内式）

(2)CSS中各个属性间用“;”隔开

二十、三大方式优先级

代码

（事先在同级目录下创建20.html和20.css）

[20.html]

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>三大方式优先级</title>
        <link rel="stylesheet" type="text/css" href="20.css" />
    </head>
    <body>
        <p>来看看我是什么颜色？</p>
    </body>
<html>

[20.css]

p{color:red;}

扩展

<style></style>加 p{color:green;}

答案：(1)链接式样式被嵌入式样式覆盖，优先级：嵌入式>链接式
（在扩展1基础上）<p></p>加属性style=“color:blue;”

答案：(2)嵌入式样式被行内式样式覆盖，优先级：行内式>嵌入式>链接式

二十一、选择器优先级

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>选择器优先级</title>
        <style>
        p{color:red;}
        </style>
    </head>
    <body>
        <p class="para" id="paragram">来看看我是什么颜色？</p>
    </body>
<html>

扩展

<style></style>加 .para{color:green;}

答案：标记选择器样式被类选择器样式覆盖，优先级：类选择器>标记选择器
（在扩展1基础上）<style></style>加 #paragram{color:blue;}

答案：类选择器样式被id选择器样式覆盖，优先级：id选择器>类选择器>标记选择器

红壶吃猬队

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS培训教案（九）

十九、引入CSS样式代码（事先在同级目录下创建19.html和19.css）[19.html]<html> <head> <meta content="text/html;charset=utf-8"> <title>三大选择器</title> <link rel="s...
复制链接

扫一扫