《Head First HTML&CSS》学习笔记第七章：CSS入门

最新推荐文章于 2023-02-22 23:36:30 发布

Interstellar_Light.

最新推荐文章于 2023-02-22 23:36:30 发布

阅读量137

点赞数 2

分类专栏：学习心得文章标签： css html web

本文链接：https://blog.csdn.net/Y_Sai/article/details/119007103

版权

学习心得专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第七章：CSS入门——加点样式

章节总结：

CSS包含一些简单语句，称为规则。
每个规则为选择的一些HTML元素提供样式。
典型的规则包括一个选择器，以及一个或多个属性和值。
选择器指定规则将应用到哪些元素。
每个属性声明以一个分号结束（这很像C++的语法，不是吗？）。
规则中的所有属性和值都放在{ }大括号之间（类似C++我们把函数体放在大括号之间）。
可以使用元素名作为选择器，来选择任意元素。
通过用逗号分隔元素名，可以一次选择多个元素。
要在HTML中包含一个样式，最容易的办法就使用<style>标记。
对于HTML以及相当复杂的网站，可能要链一个外部样式表。
<link>元素用于包含一个外部样式表。
很多属性都能继承。例如，如果为<body>元素设置了一个可继承的属性，那么<body>的所有子元素都会继承这个属性。
通过为你想改变的元素创建一个更特定的规则,能覆盖该元素继承的属性。
可以使用class属性将元素增加到一个类。
通过在元素名和类名之间加一个“ . ”，可以选择该类中的一个特定元素（这有点像C++的选定类成员）。
使用“.classname”可以选择属性这个类的所有元素。
通过在class属性中放入多个类名，可以指定一个元素属于多个类，类名之间用空格分隔。
可以使用W3C验证工具验证CSS 。

和检查HTML一样，它也分三种方式检查：URL、文件、源代码：

我的体会：

一、结合HTML与CSS：

1.建立在<head>里面：使用<style>元素包围CSS。

CSS的语言与HTML很不一样，不需要< >在两边（反倒是和C++的类的结构有些许类似）。
其结构如下：
p /*标记名（选择器）*/ {
	background-color: red;
	/* 需要设置的样式 （属性）： 样式指定（属性值）；[←别忘了分号] */
}
需要我们选择一个元素，写一个规则，规则里面包含属性和属性值。

2.使用.css文件（外部样式表）：样式表里面不需要贴上<style>标签，但需要HTML中使用<link>元素对.css文件进行链接。

其语法为：
<link type="text/css" rel="stylesheet" href="mycss.css">
1.type="text/css" 在HTML可以不需要。
2.rel="stylesheet"：rel属性指定了HTML文件与所链接文件之间的关系。（我们需要链接到一个样式表，所以这里使用"stylesheet"。
3.样式表放到href属性里面。（在这里可以使用相对链接，也可以使用URL）。

二、CSS基础知识：

1.关于选择器：

如果需要对多个元素编写一个规则，只需要在选择器之间加上逗号。
选择器的工作就像导弹与靶点。它只会针对被选择的元素及其子元素赋予样式。

2.CSS作用的范围：

我们只能对体（body）中的元素增加样式。
假如已经对元素1和元素2制定了相同的规则，此时又想只为元素1制定一个新的规则，不必分开写，保持原规则不动，新增对元素1的单独规则即可。

3.有关CSS的继承：

继承：元素可以从它的父元素继承样式。
有的样式不能继承，也有的元素不能继承（如<img>）。
改变段落样式也会改变段落中元素的样式。
覆盖继承：为子元素设定新样式可以覆盖其父元素的样式。

4.CSS中的类：

我们可以定义一种类，对属于该类的所有元素应用格式。
创建类的两个步骤：
1. 为HTML元素增加一个<class>属性；
2. 在CSS中选择这个类。
例如：
```

<p class="myclass">
	this is class "myclass".
</p>

<p>
	this is p.
</p>
```
```
/*在CSS中：*/
p.myclass{
color: blue;
}
```
那么，只有 this is class “myclass”. 的字体颜色变成蓝色， this is p. 不受影响。
如果希望classA类的所有元素都有同一种样式，可以这样写：（忽略所有元素名，只有一个点，那么这个规则会应用到这个类的所有成员）
```
.classA{
    color: blue;
    /*在这里面对样式进行定义*/
    }
```
如果一个元素里面放了多个类，那么各个类名之间用空格分隔。并且，类名的顺序并不重要。

5.其他注意事项：

一份简明的CSS指南：
1. 首先检查一下，有没有某个选择器选择到你的元素；
2. 如果没有与元素匹配的选择器，就要依赖继承；
3. 如果这个元素也没有从它的任何祖先继承到这个值，则使用浏览器定义的默认值。
如果多个选择器选择了一个元素时：
- 如果一个规则比其他规则更特定（也就是更“具体”），则它就会胜出。
- 如果多个选择器有相同的特定性，则使用CSS文件中最后列出的规则（最靠后）的来解决问题。

三、常用属性列表：

color ：设置文本的字体颜色（如果文本里面有链接，链接的颜色不会变）；
background-color ：元素元素的背景颜色；
font-size ：控制文本大小；
font-style ：可以设置斜体文本；
font-family ：控制字体；

例如：font-family: sans-serif;
设置字体为 sans-serif 字体。
font-weight ：控制文本的粗细（可以设置为粗体）；
border ：在元素周围加边框。（可以是实线边框、凸起边框、虚线边框… …）

例如：border-bottom: 1px solid black;
控制元素下边框的外观：粗细为1像素、黑色、实线。
top ：控制元素顶部的位置。
padding ：内边距，可以设置元素边缘和它的内容之间需要有空间。
line-height ：设置文本元素中的行间距。
letter-spacing ：设置字母之间的间距。
list-style ：改变列表中列表项的外观。
background-image ：在元素后放置一个图像。
left ：制定一个元素的左边所在的位置。
text-decoration ：值为 underline 的时候表示文本有下划线。