[第五季]8.CSS概述及选择器和优先级_样式优先级zeep-优快云博客

本文介绍CSS内部与外部样式表的应用技巧，包括内嵌样式、类选择器及ID选择器的使用方法，并探讨样式表优先级的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

1.内部选择器
①建立内嵌样式,设置文字大小为26像素,并调节大小看看是否可以修改.
②把样式放到中,使用类选择器a调用.
③更改为id选择器进行调用.
2.外部样式表
①在外面新建一个css,将样式拖动到中(首先建立类选择器),修改一下,在内嵌样式中调用,修改一下,看看是否有效.
②在css中建立一个类选择器,b,然后调用看看.
③在内部选择器中直接写样式,看看是否可以调用.

5.自测代码

2.课堂笔记

1.内选择器
①修改字体的大小<div>,内嵌样式表<div style="font-size:26px">
②写在head里面=内部样式表
<style type="text/css">
.a
{
    font-size:16px;
}
</style>
并在div里调用
<div class="a">
这是一段文字
</div>
(3)id选择器
<div id="a">
前面的要编程#a
一般id代表了唯一性,id不可以重复.

selector:选中一个元素,对其进行样式设置的办法
只讲两种,class(前面要用点(.)),id(前面要用#)
(4)外部样式表
单独建立一个css,存储为myfile
删除<style type="text/css">字样
在DW文件目录中找到文件,然后拖动到<head>里面去
工作中这种方法比较常用.
2.样式表的优先级
(1)就近原则>id类的选择器(#a)>类选择器(.b).
<div class="b" id="a" style="font-size:100px">(就近原则)

3.课程效果图

这里写图片描述

1.代码

test1.html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

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

<body>
<div class="b" id="a" style="font-size:100px">
这是一段文字
</div>
</body>
</html>

myfile.css样式文件代码

#a
{
    font-size:20px;
    color:#F00;
}


.b
{
    font-size:100px;    
}