CSS的基本概念———每天一遍小知识

前言

这是我学习了这个网站整理的笔记，接下来还会持续更新。

如果写的不对的地方请告诉我，谢谢大家。

@TOC

一.为什么要使用CSS？

CSS允许您将特定样式应用于特定HTML元素。

CSS的主要好处是它使您可以将样式与内容分开。

仅使用HTML，所有样式和格式都位于同一位置，随着页面的增长，维护变得相当困难。

所有格式都可以（并且应该）从HTML文档中删除，并存储在单独的CSS文件中。

二.CSS的基本样式

将==style属性==（style attribute）添加到==相关标签==（relevant tag）。

列：

This is an example of inline styling.

在HTML页面head的

使用此方法，所有样式规则都包含在单个文本文件中，该文件以.css 扩展名保存。然后使用标记在HTML中引用此CSS文件。元素位于头部内部。

列：

HTML

CSS

p { color:white; background-color:gray; }

==相对路径==和==绝对路径==均可用于定义CSS文件的href。在我们的示例中，路径是相对的，因为CSS文件与HTML文件位于同一目录中。

三.CSS Syntax （CSS语法）

样式规则包含三部分：==选择器（selector），属性（property）和值（value）==。

声明块包含一个或多个用分号分隔的声明。 每个声明都包含一个==属性名称==和一个==值==，并用==冒号==分隔。

列：

p { color: red; font-size:130%; }

CSS声明始终以分号结尾，并且声明组用花括号括起来。

id选择器允许您设置具有id属性的HTML元素的样式，无论它们在文档中的位置如何。

列：

HTML

This paragraph is not in the intro section.（此段落不在简介部分中）

CSS

#intro { color: white; background-color: gray; }

class选择器:和id主要区别在于，id每页只能应用一次，而class可以根据需要在页面上使用多次。

HTML

This is not in the intro section（这不在简介部分）

The second paragraph is not in the intro section.（第二段不在介绍部分）

CSS

.first {font-size: 200%;}

id用#，class用.

这些选择器用于选择作为另一个元素的后代的元素。选择级别时，可以根据需要选择任意多个深度。

所得结果，仅影响选定的元素

后代选择器匹配作为指定元素后代的所有元素。

例如，仅在“intro”部分的第一段中定位元素：

HTML

CSS

#intro .first em { color: pink; background-color:gray; }

四.其他小知识

1.Comments（注释）

/* Comment goes here（注释此处） */

2.Cascade(级联)

CSS指定的样式是级联样式表的缩写。

形成级联的样式信息的三个主要来源是：

浏览器的默认样式

用户使用样式

3.Inheritance（继承）

指属性在页面中流动的方式。除非另有定义，否则子元素通常将具有父元素的特征。

This is a text inside the paragraph. （这是段落内的文本。）