第四章初识css3

akangznl2026-02-04 19:53

第四章初识css3

1.style标签

html 复制代码

<style type="text/css">
    h1{
        font-size:12px;
        color:#F00;
    }
</style>

行内样式

使用style属性引入CSS样式

html 复制代码

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表

CSS代码写在<head>的<style>标签中

html 复制代码

<style>
        h1{color: green; }
</style>

外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

链接式

html 复制代码

<head>
  ......
<link href="style.css" rel="stylesheet" type="text/css" />
......                      rel使用外部样式表    type文件类型
</head>

2.导入式

html 复制代码

<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

css样式优先级

就近原则

2.基本选择器

标签选择器

css 复制代码

p { font-size:16px;}

类选择器

html 复制代码

<标签名 class= "类名称">标签内容</标签名>

css 复制代码

.class { font-size:16px;}

ID选择器

css 复制代码

#id { font-size:16px;}

第四章初识css3

第四章初识css3

1.style标签

行内样式

内部样式表

外部样式表

css样式优先级

2.基本选择器

标签选择器

类选择器

ID选择器

交集选择器

并集选择器

基本选择器优先级（不遵循"就近原则"）

3.高级选择器

第四章 初识css3

第四章 初识css3

1.style标签

行内样式

内部样式表

外部样式表

css样式优先级

2.基本选择器

标签选择器

类选择器

ID选择器

交集选择器

并集选择器

基本选择器优先级（不遵循"就近原则"）

3.高级选择器

第四章初识css3

第四章初识css3