【CSS学习笔记】

一、CSS概述

CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。

二、CSS选择器

（一）id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。
用 /* 开始, 以 */ 结束。
需求描述 ：为id为part1的段落添加红色字体样式
示例:

<p id="part1">段落1</p>
<p id="part2">段落2</p>

#part1 {
    color: red;
}

（二）class选择器

class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。
需求描述 ：为class为green的段落添加绿色字体样式，为class为bold的段落添加加粗字体样式

<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>

.green {
    color: green;
}
.bold {
    font-weight: bold;
}

（三）标签选择器

除了使用id选择器和class选择器，我们也可以直接使用标签选择器。
需求描述 ：为所有段落标签添加黄色字体样式，为所有超链接标签添加红色字体样式

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打开百度，你就知道！</a>

p {
    color: yellow;
}
a {
    color: red;
}

（四）子代选择器

子代选择器可以选择当前元素的所有儿子元素。定义的时候用 > 隔开。
需求描述 ：为div标签下所有h1儿子节点设置为红色文本样式

<div>
    <h1>儿子标题</h1>
    <span><h1>孙子标题</h1></span>
    <h1>儿子标题</h1>
</div>

div>h1{
    color: red;
}

（五）后代选择器

标签元素除了并列书写还可以嵌套书写，后代选择器就是用于选择嵌套标签元素的一种选择器。定义的时候用 空格 隔开。
需求描述 ：为所有段落标签中的超链接标签添加红色文本

<p class="part">
    <a href="http://www.baidu.com/">打开百度，你就知道！</a>
</p>
<a href="http://www.baidu.com/">打开百度，你就知道！</a>

.part a {
    color: red;
}

（六）相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。定义的时候用 + 隔开。
需求描述 ：为div之后的第一个p标签元素设置为黄色文本样式

<div>
    <p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

div + p {
    background-color: yellow;
}

（七）后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。定义的时候用 ~ 隔开。
需求描述 ：为div之后的所有p标签元素设置为黄色文本样式

<div>
    <p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>

div ~ p {
    background-color: yellow;
}

三、CSS常见样式

（一）背景样式

background:简写属性，作用是将背景属性设置在一个声明中
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-color:设置元素的背景颜色
background-image:把图像设置为背景
background-position:设置背景图像的起始位置

（二）文本样式

color:设置文本颜色
direction:设置文本方向
letter-spacing:设置字符间距
line-height:设置行高
text-align:对齐元素中的文本
text-decoration:向文本添加修饰

（三）链接样式

<a href="https://www.baidu.com/">打开百度，你就知道！</a>

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

（四）列表样式

list-style:简写属性，用于把所有用于列表的属性设置于一个声明中
list-style-image:将图像设置为列表项标志
list-style-position:设置列表中列表项标志的位置
list-style-type:设置列表项标志的类型

（五）多重样式优先级

border-collapse:设置是否把表格边框合并为单一的边框
border-spacing:设置分隔单元格边框的距离
caption-side:设置表格标题的位置
empty-cells:设置是否显示表格中的空单元格
table-layout:设置显示单元、行和列的算法

四、CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

（一）内边距

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
常用的属性：
padding:简写属性。作用是在一个声明中设置元素的所内边距属性
padding-bottom:设置元素的下内边距
padding-left:设置元素的左内边距
padding-right:设置元素的右内边距

（二）边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线，CSS边框属性允许你指定一个元素边框的样式和颜色。
常用的属性：
border：简写属性，用于把针对四个边的属性设置在一个声明
border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中

（三）外边距

margin 清除周围的（外边距）元素区域，margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin：简写属性。在一个声明中设置所有外边距属性
margin-bottom：设置元素的下外边距
margin-left：设置元素的左外边距
margin-right：设置元素的右外边距

（四）外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

五、CSS显示特性

（一）块级元素：

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

（二）内联元素：

内联元素(inline)特性：
和相邻的内联元素在同一行
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

（三）可变元素：

**可变元素主要有：**根据上下文关系确定该元素是块元素还是内联元素
applet ,button ,del ,iframe , ins ,map ,object , script

（四）类别修改：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有

元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

六、CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

CSS 定位属性：
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常的流中

（一）相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

（二）绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

（三）浮动定位

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS 浮动属性
在 CSS 中，我们通过 float 属性实现元素的浮动。
left:元素向左浮动
right:元素向右浮动
none:默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit:规定应该从父元素继承 float 属性的值

.news {
    background-color: gray;
    border: solid 1px black;
}
.news img {
    float: left;
}
.news p {
    float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

学习总结

学习CSS是网页开发中非常重要的一环。CSS（层叠样式表）为HTML文档添加了样式和布局，使网页具有更好的外观和用户体验。
首先，我了解了CSS的基本概念和语法。CSS使用选择器来选中HTML元素，并通过属性和值来定义它们的样式。通过学习不同类型的选择器和各种属性，我能够为文本、背景、边框、布局等方面添加样式，使网页更加美观和吸引人。
其次，我学会了使用CSS盒模型来布局和定位元素。盒模型将HTML元素视为一个矩形盒子，包括内容、内边距、边框和外边距等部分。掌握盒模型的概念使我能够精确地控制元素的大小、位置和间距，实现各种网页布局的需求。
总结而言，通过掌握CSS的语法、盒模型和布局技巧，我能够为网页添加各种样式，实现丰富、吸引人的界面设计。我相信这些所学的知识和技能将在我的网页开发工作中发挥重要作用，并持续推动我的学习和成长。