CSS 读书笔记

最新推荐文章于 2023-01-04 10:56:19 发布

weixin_34375233

最新推荐文章于 2023-01-04 10:56:19 发布

阅读量152

点赞数

原文链接：http://www.cnblogs.com/jeremyjs/p/4502740.html

版权

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。

对于层叠来说，共有三种主要的样式来源：浏览器对HTML定义的默认样式，用户定义的样式，开发者定义的样式

其中，开发者定义的样式可以有三种形式：定义在外部文件（外链样式）；定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式；定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。

在浏览器中打开前面写的例子页面，你会发现  元素中的文字会比其他文字粗一些。这些样式就是在浏览器定义的默认HTML样式。

而 元素是红色的，这是你在自己的样式表中定义的样式。

同时， 作为  的子元素，也继承了  的样式。同样的，  也从 <body> 中继承了许多的样式。

再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

选择器（Selectors）

来源

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors#

一、标签名称

strong {
  color: red; }

花括号中的部分称为声明（declaration）

关键字color是一个属性, red 是其对应的值.

同一个声明中的属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

这个教程中将类似strong的选择器称为标签选择器（tag selector）.CSS规范中称之为类型选择器（type selector）.

除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.

其中 class 和 id 两个属性具有比较重要的地位。

类选择器（Class selectors）

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器（ID selectors）

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时，ID选择器是以#开头的。

例：

下面的p标签同时具有 class 属性和id 属性:

<p class="key" id="principal">

id 属性值 principal必须在文档中是唯一的；但文档中的其他标签可以有和p相同的 class 属性值 key.

在一个CSS样式表中, 下面的规则将使所有class属性等于key的元素文字颜色呈现绿色。（这些元素不一定都是  元素。）

.key {
  color: green; }

下面的规则将使 id 等于 principal 的那个元素的文字变为粗体:

#principal {
  font-weight: bolder; }

如果多余一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

伪类选择器（Pseudo-classes selectors）

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)，内容状态(如 :checked ), 鼠标位置 (如:hover).

基于关系的选择器

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

常见的基于关系的选择器
选择器	选择的元素
`A E`	任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
`A > E`	任何元素A的子元素
`E:first-child`	任何元素的第一个子元素E
`B + E`	任何元素B的下一个兄弟元素E

你可以任意组合以表达更复杂的关系。

你还可以使用星号（*）来表示”任意元素“。

文本样式

CSS提供了几个属性用来操作字体。

我们先来看一个简写属性 font，使用这个属性可以很方便的指定其他的字体属性。比如：

1、字体加粗，字体的风格：斜体和字体变形：小型大写字母

2、字体的大小

3、行高

4、字体

示例

p {font: italic 75%/125% "Comic Sans MS", cursive;}

这条规则定义了字体的几个属性，使整个段落文本都变成斜体。

字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。

文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。

这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。

盒模型

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_Started/Boxes

转载于:https://www.cnblogs.com/jeremyjs/p/4502740.html

weixin_34375233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 读书笔记

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。对于层叠来说，共有三种主要的样式来源：浏览器对HTML定义的默认样式，用户定义的样式，开发者定义的样式其中，开发者定义的样式可以有三种形式：定义在外部文件（外链样式）；定义在外部文件（外链样式）：本教程中案例...
复制链接

扫一扫