CSS样式表：行内、内部与外部样式解析

96 浏览量更新于2024-06-18 收藏 8.63MB PDF 举报

"html+css pdf" 本文主要介绍了CSS的基础知识，包括CSS的含义、编写位置以及样式表的优先级规则，特别关注了如何有效地组织和应用CSS来美化HTML内容。一、CSS简介 CSS（层叠样式表）是一种用于设置HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的样式语言。它允许开发者控制网页的布局，如字体大小、颜色、元素宽度等，从而实现内容与表现的分离，让HTML专注于内容的结构化，而CSS负责外观的呈现。二、CSS的编写位置 1. 行内样式：直接在HTML元素的`style`属性中编写，仅对该元素生效。这种方式虽然方便快捷，但可能导致代码重复、难以维护，因此不推荐大量使用。 ```html <h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1> ``` 2. 内部样式：CSS代码写在HTML文档的`<style>`标签内，通常置于`<head>`标签中，可以应用于整个文档中的元素，比行内样式更具复用性。 ```html <style> h1 { color: red; font-size: 40px; } </style> <h1>欢迎来到尚硅谷学习</h1> ``` 3. 外部样式：CSS代码存储在独立的`.css`文件中，通过`<link>`标签引入HTML文档。这种方式实现了结构与样式的完全分离，便于代码管理和重用，是实际开发中最推荐的方法。 ```html <head> <link rel="stylesheet" href="styles.css"> </head> <h1>欢迎来到尚硅谷学习</h1> ``` 三、样式表的优先级 CSS的优先级遵循以下规则： 1. 行内样式具有最高优先级，无论何时都会覆盖内部样式和外部样式。 2. 内部样式和外部样式具有相同的优先级，后定义的样式会覆盖先定义的样式，遵循“后来者居上”的原则。例如： ```html <style> h1 { color: red; font-size: 40px; } </style> <style> h1 { color: blue; /* 此处蓝色将覆盖之前的红色 */ font-size: 50px; } </style> ``` 在实际开发中，合理利用优先级规则能帮助我们精确控制元素的样式，同时保持代码的整洁和易于维护。结合HTML结构和CSS选择器，我们可以创建复杂且灵活的布局设计。总结来说，CSS是网页设计的关键技术之一，通过理解其基本概念、编写位置和优先级规则，开发者可以更高效地设计和管理网页的视觉样式。在实际工作中，外部样式表是最常用的方式，它能提供更好的代码组织和复用，同时有助于提升网站性能。

注意：

1. 并集选择器，我们一般竖着写。

2. 任何形式的选择器，都可以作为并集选择器的一部分。

3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 HTML元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

1. 父元素：直接包裹某个元素的元素，就是该元素的父元素。

2. 子元素：被父元素直接包含的元素（简记：儿子元素）。

3. 祖先元素：父亲的父亲......，一直往外找，都是祖先。

备注：父元素，也算是祖先元素的一种。

例如：张三的父亲，也算是张三的祖先，但一般还是称呼：父亲。

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */

#peiqi,

.rich,

.beauty {

 font-size: 40px;

 background-color: skyblue;

 width: 200px;

}

剩余41页未读，继续阅读

u014378108

粉丝: 245
资源: 3

CSS样式表：行内、内部与外部样式解析

html+css教程.pdf

HTML+CSS.pdf

html+css.pdf

网页pdf预览控件，html+js+css pdf预览控件

div+css pdf 教程

div+csspdf版

php+MYSQL+HTML+DIV+CSS.pdf

页面设计html+css+js.pdf

HTML+CSS+CSS3高频面试题_88题.pdf_前端面试题

DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端

最新资源