内联与外部CSS：基础语法、选择符与应用实例

需积分: 9 12 浏览量更新于2024-08-17 收藏 4.37MB PPT 举报

本资源主要介绍了CSS（Cascading Style Sheets）的基本概念和用法，特别是内联样式、内部样式和外部样式的区别与应用。CSS是用于描述HTML或XML（包括Web页面）的呈现方式的样式表语言，它能够控制文档的布局、颜色、字体等视觉元素。首先，CSS样式表基础部分讲解了CSS的基本语法，包括选择符和属性值的使用。选择符用于指定要应用样式的HTML元素，如`h1`, `p`, `div`等，属性值则是赋予这些选择符具体的样式，如颜色、字体、大小等。例如，`font-color` 和 `font-family` 属性用于设置文本的颜色和字体类型。在内联样式中，CSS样式被直接写在HTML元素的`style`属性里，如`<h2 style="font-color: #0000FF; font-family: 黑体;">CSS标记1</h2>`，这种方式虽然可以直接控制单个元素的样式，但不利于管理和复用，且当需要更新样式时，修改起来可能会很麻烦。相比之下，内部样式是将CSS代码放在`<style>`标签内的`<head>`部分，如`<style> h2 { font-family: 幼圆; color: #ff0000; } </style>`，这样可以为多个元素应用样式，提高代码的可维护性。外部样式则通过`<link>`标签链接到外部CSS文件，进一步实现代码分离和管理。接下来，资源展示了HTML标签的使用，如`<html>`, `<head>`, `<title>`, `<body>`, `<h2>`, `<p>`等，这些都是构成HTML文档的基本结构，而CSS的引入则通过在`<head>`部分定义样式规则，实现了对页面样式的集中控制。在CSS的继承、层叠和特殊性方面，继承指的是子元素会继承父元素的一些样式，而层叠原则决定了不同来源的样式如何优先级排列。特殊性（specificity）则是指选择符的复杂度决定其样式优先级，例如ID选择符通常比类选择符具有更高的优先级。最后，例子中错误的`color`属性值`#-0000ff`表明在实际使用中应避免这种格式，正确的应该是`color: #0000ff`。整体来看，这个资源帮助读者理解了CSS的基本结构、语法以及如何在HTML文档中有效利用CSS来美化和组织内容。

昨夜星辰若似我

粉丝: 47
资源: 2万+

内联与外部CSS：基础语法、选择符与应用实例

HTML-and-CSS-Basic

Basic-html-css-js-template

Basic-HTML-and-CSS-Webpage:HTML、CSS

basic-html-css

css-basic-concept:CSS基本的Cocept Pracetices存储库

react-basic-template:react-basic-template admin

static-site-basic

letswrite-taiwan-map-basic:D3、Vue 画一个台湾地图

first-basic-html-site

vanilla-basic

最新资源