CSS样式表基础与简写规则详解

需积分: 9 37 浏览量更新于2024-08-17 收藏 617KB PPT 举报

本文主要介绍了CSS样式的引入方式以及CSS的一些基础概念，包括行间样式、内嵌样式表、外部样式表的使用，以及CSS代码的结构、简写规则等。在网页设计中，CSS（Cascading Style Sheets）样式表用于控制网页元素的外观和布局。CSS样式引入有多种方式： 1. **行间样式**：这是将CSS样式直接写在HTML元素内的`style`属性中，如`<body style="background:red;"></body>`。虽然这种方式直观且快速，但不推荐使用，因为它违反了结构与表现的分离原则，不利于代码维护。 2. **内嵌样式表**：将CSS代码放在`<head>`标签内的`<style type="text/css">`标签中，如`<style>Body {...}</style>`。这样样式只对当前文档生效，但若需修改，需要逐个页面更新。 3. **外部样式表**：通过`<link rel="stylesheet" type="text/css" href="styles.css">`引入外部CSS文件，使得样式可复用，便于维护和管理。 CSS代码的基本结构由选择器（Selector）和声明块（Declaration Block）组成，如`.class-name {property: value}`。选择器指定了CSS作用的对象，声明块则包含了属性和对应的值。在CSS中，有一些简写规则，可以提高代码的简洁性： - **颜色简写**：对于十六进制颜色，如`#RRGGBB`，可以简写为`#RGB`，例如`#F00`代表`#FF0000`。颜色名称和RGB函数值则不能简写。 - **单位值的省略**：当数值为0时，单位可以省略，如`width: 0;`。 - **内外补丁（padding, margin）简写**：可以设置所有边的值，如`margin: 10px;`，或者指定不同边的值，如`margin: 10px 20px 30px 40px;`。 - **边框简写**：`border`属性可以同时设置宽度、样式和颜色，如`border: 1px solid #FF0000;`。也可以按顺序分别定义四个边的样式，如`border-style: solid dashed double;`。 - **背景简写**：`background`属性可以合并设置背景颜色、图像、重复方式等，如`background: #FF0000 url('background.gif') no-repeat;`。了解并熟练运用这些CSS样式引入方法和简写规则，能够帮助开发者更高效地编写和管理CSS代码，提升网页的视觉效果和维护性。在实际工作中，应尽量遵循最佳实践，如使用外部样式表以实现代码复用和更好的组织。

劳劳拉

粉丝: 20
资源: 2万+

CSS样式表基础与简写规则详解

CSS笔记-011

CSS基础与提高的笔记

2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc

css权威指南--笔记(必看)

html-css-js-study-notes

具有html-css-and-javascript的pluralsight-building-websites

learning-mar-2021-tailwind-css:学习-2021年3月-Tailwind CSS

CSS笔记 - 培训那会记录的（详解）

css-tech-talk:2014 年 9 月 25 日 G+J 上关于 CSS 基础的技术讨论

html-css-learning：HTML + CSS学习笔记

最新资源