CSS学习笔记

saidailuo

已于 2023-07-01 14:43:33 修改

阅读量159

点赞数

文章标签： css 学习笔记

于 2023-06-30 23:05:06 首次发布

本文链接：https://blog.youkuaiyun.com/saidailuo/article/details/131484171

版权

1. CSS简介

CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。它与HTML（超文本标记语言）一起被广泛用于网页设计和开发中。
CSS的主要目的是将样式从网页的结构中分离出来，使得开发者可以通过样式表来控制网页的外观和排版，从而提高开发效率和代码的可维护性。
CSS采用了一种层叠的设计模式，允许开发者通过选择器来选择HTML元素，并通过属性设置元素的样式。例如，可以通过CSS选择器选择所有的标题元素（h1、h2等），并设置它们的颜色、字体大小和样式。
CSS有许多不同的属性和选择器，可以用于控制元素的外观、布局和动画效果。同时，也有许多CSS预处理器和框架，如Sass、Less和Bootstrap，可以进一步简化CSS的编写和管理。
总之，CSS是网页设计和开发中不可或缺的一部分，它提供了丰富的样式控制能力，使得网页可以呈现出各种各样的外观和布局。

2. CSS的重要概念和功能：

2.1 选择器（Selectors）：

CSS选择器用于选择HTML文档中要应用样式的元素。通过选择器，我们可以针对特定的元素或一组元素应用样式。以下是一些常见的CSS选择器及其使用方法：

2.1.1 元素选择器（Element Selector）：

使用元素名称作为选择器，选择HTML中的特定元素。
例如，p选择器表示选择所有<p>（段落）元素。
示例：

p { 
  color: blue; 
}

2.1.2 类选择器（Class Selector）：

使用类名作为选择器，选择具有相同类名的元素。
类名以.开头。
例如，.highlight选择器表示选择所有具有highlight类的元素。
示例：

.highlight {
 background-color: yellow; }

2.1.3 ID选择器（ID Selector）：

使用元素的唯一ID作为选择器，选择具有指定ID的元素。
ID以#开头。
例如，#header选择器表示选择ID为header的元素。
示例：

#header { font-size: 24px; }

2.1.4 属性选择器（Attribute Selector）：

使用元素的属性值作为选择器，选择具有特定属性的元素。
例如，input[type="text"]选择器表示选择所有type属性为text的<input>元素。
示例：

input[type="text"] { border: 1px solid black; }

2.1.5 后代选择器（Descendant Selector）：

使用空格分隔两个选择器，选择嵌套在另一个选择器中的元素。
例如，ul li选择器表示选择所有嵌套在<ul>元素内的<li>元素。
示例：

ul li { list-style: none; }

2.1.6 直接子元素选择器（Child Selector）：

使用>符号分隔两个选择器，选择作为另一个选择器的直接子元素的元素。
例如，div > p选择器表示选择所有作为<div>元素的直接子元素的<p>元素。
示例：

div > p { color: blue; }

2.1.7 伪类选择器（Pseudo-Class Selector）：

选择处于特定状态或位置的元素。
例如，:hover选择器表示选择鼠标悬停在元素上的状态。
示例：

a:hover { color: purple; }

这些是CSS中常见的选择器，但还有其他更多的选择器可用。使用CSS选择器可以更精确地选择和样式化网页中的元素，增强网页的可读性和交互性。同时，选择器的组合和嵌套使用可以实现更复杂的选择逻辑，使样式更具灵活性。

2.2 属性（Properties）：

CSS属性是用来定义HTML元素的样式和布局的属性。通过使用CSS属性，可以改变元素的颜色、大小、边框、间距等，以及控制元素在页面上的位置和布局。以下是一些常用的CSS属性的详细介绍：

color：用于设置元素文本的颜色。可以使用颜色名称、十六进制值或RGB值来指定颜色。

 color: red;      /* 设置文本颜色为红色 */
color: #ff0000;  /* 设置文本颜色为红色（使用十六进制值） */
color: rgb(255, 0, 0);  /* 设置文本颜色为红色（使用RGB值） */

background-color：用于设置元素的背景颜色。可以使用颜色名称、十六进制值或RGB值来指定颜色。

background-color: blue;      /* 设置背景颜色为蓝色 */
background-color: #0000ff;   /* 设置背景颜色为蓝色（使用十六进制值） */
background-color: rgb(0, 0, 255);   /* 设置背景颜色为蓝色（使用RGB值） */

font-size：用于设置元素文本的字体大小。可以使用像素(px)、百分比(%)或其他单位来指定大小。

font-size: 16px;     /* 设置字体大小为 16 像素 */
font-size: 1.5em;    /* 设置字体大小为父元素字体大小的 1.5 倍 */
font-size: 120%;     /* 设置字体大小为父元素字体大小的 120% */
font-size: larger;   /* 设置字体大小为更大的尺寸 */

font-family：用于设置元素文本的字体系列。可以指定多个字体名称，用逗号分隔，表示如果浏览器不支持第一个字体，将尝试下一个字体。
font-weight：用于设置元素文本的字体粗细。常用值有normal（默认）、bold（粗体）、lighter（比正常细）和bolder（比正常粗）。
text-align：用于设置元素内文本的对齐方式。常用值有left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）。
display：用于控制元素的显示方式。常用值有block（块级元素，占据一行）和inline（内联元素，与其他内联元素在同一行）。
width和height：用于设置元素的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定大小。

width: 200px;    /* 设置宽度为 200 像素 */
width: 50%;      /* 设置宽度为父元素宽度的 50% */
height: 100px;   /* 设置高度为 100 像素 */
height: 25vh;    /* 设置高度为视口高度的 25% */

margin和padding：用于设置元素的外边距和内边距。margin用于控制元素与其他元素之间的距离，padding用于控制元素内容与元素边界之间的距离。

margin: 10px;             /* 设置外边距为 10 像素（四个方向均相同） */
margin: 10px 20px;        /* 设置外边距为 10 像素（上下方向）和 20 像素（左右方向） */
margin: 10px 20px 30px;   /* 设置外边距为 10 像素（上方向）、20 像素（左右方向）和 30 像素（下方向） */
padding: 10px;            /* 设置内边距为 10 像素（四个方向均相同） */
padding: 10px 20px;       /* 设置内边距为 10 像素（上下方向）和 20 像素（左右方向） */
padding: 10px 20px 30px;  /* 设置内边距为 10 像素（上方向）、20 像素（左右方向）和 30 像素（下方向） */

border：用于设置元素的边框样式。可以设置边框的宽度、样式（实线、虚线等）和颜色。
position：用于控制元素的定位方式。常用值有static（默认，元素按其在HTML中的出现顺序进行布局）、relative（相对定位，相对于其正常位置进行定位）和absolute（绝对定位，相对于其最近的具有定位属性的父元素进行定位）。
float：用于控制元素的浮动方式。常用值有none（默认，不浮动）、left（向左浮动）和right（向右浮动）。
text-decoration：用于设置文本装饰效果，如下划线、删除线等。常用值有none（无装饰）、underline（下划线）和line-through（删除线）。

这只是一小部分常用的CSS属性，CSS提供了许多其他属性，用于控制元素在页面上的外观和行为。通过合理使用这些属性，可以实现丰富多样的网页设计。

2.3 值（Values）：

CSS的值是用来设置CSS属性的具体数值、关键字或其他表示方式。通过使用不同的值，可以改变元素的样式、尺寸、颜色等属性。以下是一些常见的CSS值的详细介绍：

数字值：表示一个具体的数值，通常用于设置尺寸、宽度、高度等属性。例如，font-size: 16px;中的16px就是一个数字值。
单位值：用于指定数值的单位。常见的单位有：

px（像素）：绝对单位，表示屏幕上的像素。
em：相对单位，表示相对于元素的字体大小的倍数。
%（百分比）：相对单位，表示相对于父元素的百分比。
rem：相对单位，表示相对于根元素（html）的字体大小的倍数。
vh（视口高度）和vw（视口宽度）：相对单位，表示相对于视口大小的百分比。
颜色值：用于设置元素的颜色。常见的表示方式有：

颜色名称：表示预定义的颜色名称，例如red（红色）、blue（蓝色）等。
十六进制值：以#开头，后跟三个或六个十六进制数字，例如#ff0000表示红色。
RGB值：以rgb()或rgba()开头，后跟红、绿、蓝三个通道的数值，例如rgb(255, 0, 0)表示红色。
HSL值：以hsl()或hsla()开头，后跟色相、饱和度、亮度三个数值，例如hsl(0, 100%, 50%)表示红色。
关键字值：表示预定义的关键字，用于设置特定属性的值。例如，font-weight: bold;中的bold就是一个关键字值，表示粗体文本。
布尔值：表示具有两个可能取值的属性。常见的布尔值有：

true：表示启用属性。
false：表示禁用属性。
列表值：由多个值组成的列表，以空格或逗号分隔。常见的列表值有：

font-family属性中的多个字体名称。
background属性中的多个背景属性值。
其他特定值：某些CSS属性具有特定的值集，用于实现特定效果。例如，text-align属性的值可以是left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）。

以上是一些常见的CSS值类型的详细介绍。了解这些值的用途和语法规则，可以帮助你更好地掌握CSS，并实现所需的样式效果。

2.4 盒模型（Box Model）：

CSS盒模型是用于布局和定位HTML元素的基本概念。它描述了一个元素在页面中占据的空间，由四个主要的部分组成：内容(content)、填充(padding)、边框(border)和边距(margin)。

下面是对CSS盒模型的详细说明：

内容(Content)：盒模型中心的部分，包含元素的实际内容，例如文本、图像或嵌套的元素。内容的大小可以通过width和height属性来指定。
填充(Padding)：内容和边框之间的空间被称为填充。填充可以用来增加内容与边框之间的间距，也可以设置背景颜色或背景图像。填充的大小可以通过padding属性单独设置或者通过padding-top、padding-right、padding-bottom和padding-left属性分别设置。
边框(Border)：包围在填充之外的边界线，用于分隔元素的内容和周围的元素。边框可以设置颜色、宽度和样式。边框的样式可以通过border-style属性设置，颜色可以通过border-color属性设置，宽度可以通过border-width属性设置。
边距(Margin)：边框与相邻元素之间的空间被称为边距。边距用于控制元素相对于其他元素的距离。边距的大小可以通过margin属性单独设置或者通过margin-top、margin-right、margin-bottom和margin-left属性分别设置。

在盒模型中，元素的总宽度和高度等于内容的宽度和高度加上填充、边框和边距的宽度。

CSS盒模型可以通过box-sizing属性进行调整。默认情况下，元素的宽度和高度只包括内容区域，不包括填充、边框和边距。将box-sizing设置为border-box可以使元素的宽度和高度包括填充和边框。

示例代码如下：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
  box-sizing: border-box;
}

上述代码中，.box类定义了一个具有200px宽、100px高的元素。填充为20px，边框为1px实线边框，边距为10px。通过设置box-sizing: border-box;，元素的总宽度和高度包括填充和边框。

使用CSS盒模型，您可以更好地控制元素在页面中的布局和定位。了解和灵活使用CSS盒模型对于创建丰富和响应式的网页布局是非常重要的。

2.5 布局（Layout）：

CSS布局是指通过CSS样式来定位和排列网页中的元素，以实现所需的页面结构和外观。

下面是对CSS布局的详细说明：

块级布局(Block Layout)：块级元素（如<div>、<p>等）默认以块级布局进行渲染。块级元素会占据一行的全部宽度，并且下一个块级元素会另起一行。您可以使用display属性将元素设置为块级布局，例如：

display:
   block;

行内布局(Inline Layout)：行内元素（如<span>、<a>等）默认以行内布局进行渲染。行内元素会根据内容的长度自动换行，并且水平排列在一行上。您可以使用display属性将元素设置为行内布局，例如：

 display:
   inline;。

行内块布局(Inline-Block Layout)：行内块元素（如<input>、<img>等）既具有行内元素的特性，又具有块级元素的特性。行内块元素会水平排列在一行上，并且可以设置宽度、高度等样式属性。您可以使用display属性将元素设置为行内块布局，例如：

 display:
   inline-block;。

弹性布局(Flexbox Layout)：弹性布局是一种用于创建灵活且自适应的布局模型。通过将容器元素设置为display: flex;，可以将其内部的子元素组织为一行或一列，并根据需要调整它们的大小，对齐方式和顺序。弹性布局提供了很多属性和值，如flex-direction、justify-content和align-items等，用于进一步控制布局的行为。
网格布局(Grid Layout)：网格布局是一种二维布局模型，可以将容器元素分成多个网格单元，并进行更精细的布局和对齐。通过将容器元素设置为display: grid;，可以定义行和列的大小，并指定子元素在网格中的位置。网格布局提供了诸如grid-template-columns、grid-template-rows和grid-column等属性，用于定义网格的结构和布局。
浮动布局(Float Layout)：浮动布局是一种传统的布局技术，通过将元素浮动到页面的左侧或右侧，来实现多列布局。浮动元素会脱离文档流，使得其他元素可以环绕它。浮动布局需要谨慎使用，因为它可能引起一些布局问题，如父元素高度坍塌等。

以上只是CSS布局的一些常见技术，您可以根据具体需求选择适合的布局方式。另外，CSS布局还可以结合使用，比如将弹性布局和网格布局相结合，以实现更复杂的布局效果。

2.6 媒体查询（Media Queries）：

媒体查询是CSS中的一种技术，它允许根据设备的不同特性（如窗口宽度、设备类型、屏幕分辨率等）为不同的媒体类型应用不同的CSS样式。通过使用媒体查询，您可以为不同的设备或浏览器提供优化的布局和样式，从而实现响应式设计。

下面是对CSS媒体查询的详细说明：

媒体类型(Media Types)：CSS媒体查询可以基于不同的媒体类型应用样式。常见的媒体类型有：

all：适用于所有媒体设备。 screen：适用于计算机屏幕、平板电脑、智能手机等屏幕设备。
print：适用于打印机和打印预览页面。 speech：适用于语音合成器。
例如，您可以使用以下媒体查询规则来针对不同的媒体类型应用不同的样式：

@media screen {
  /* CSS样式规则适用于屏幕设备 */
}

@media print {
  /* CSS样式规则适用于打印设备 */
}

媒体特性(Media Features)：除了媒体类型，您还可以使用媒体特性来根据设备的不同属性应用样式。常见的媒体特性包括：

width：窗口或屏幕的宽度。
height：窗口或屏幕的高度。
device-width：设备屏幕的宽度。
device-height：设备屏幕的高度。
orientation：设备的方向（纵向或横向）。
例如，您可以使用以下媒体查询规则来基于窗口宽度应用不同的样式：

@media (max-width: 768px) {
  /* 窗口宽度小于等于768像素时应用的样式 */
}

@media (min-width: 1200px) {
  /* 窗口宽度大于等于1200像素时应用的样式 */
}

您还可以组合多个媒体特性来实现更复杂的媒体查询。例如：

@media (min-width: 768px) and (max-width: 1200px) {
  /* 窗口宽度介于768像素到1200像素之间时应用的样式 */
}

媒体查询应用位置：媒体查询可以在CSS文件中的任何位置使用，但通常习惯将其放在样式表的顶部。媒体查询通过检测条件来确定应用哪些样式，因此，放置在顶部可以确保样式在页面加载时就被正确应用。

使用CSS媒体查询，您可以根据不同的设备和屏幕特性为网页应用不同的样式和布局。这使得您的网页可以适应不同的屏幕尺寸和设备类型，提供更好的用户体验和可访问性。

2.7 动画和过渡（Animations and Transitions）：

当涉及到在网页上创建视觉效果和动态交互时，CSS动画和过渡是两个非常有用的技术。它们允许您使用CSS来为元素添加动画效果，使页面更加生动和吸引人。

下面是对CSS动画和过渡的详细介绍：

CSS过渡（Transitions）：

CSS过渡允许您定义元素在状态改变时应用的过渡效果。一般情况下，过渡效果是通过在CSS属性发生更改时逐渐改变属性的值来实现的。您可以定义过渡的持续时间、延迟时间、过渡属性以及过渡的缓动函数。

过渡的语法：

 transition: <property> <duration> <timing-function> <delay>;

<property>：指定要过渡的CSS属性。可以使用all来选择所有属性。
<duration>：指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。
<timing-function>：指定过渡的缓动函数，控制过渡的速度曲线。常见的缓动函数有linear、ease、ease-in、ease-out、ease-in-out等。
<delay>：指定过渡的延迟时间，以秒（s）或毫秒（ms）为单位。
过渡的示例：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.3s ease-in-out;
}

.box:hover {
  width: 200px;
}

在上面的示例中，当鼠标悬停在具有.box类的元素上时，元素的宽度将以0.3秒的持续时间进行平滑过渡，使用缓动函数ease-in-out。

CSS动画（Animations）：

CSS动画允许您创建更复杂的动画效果，可以定义多个关键帧（Keyframes），每个关键帧定义动画的不同状态和属性。与过渡不同，动画不一定需要触发事件来启动，您可以通过添加类或使用JavaScript来控制动画的启动。

动画的语法：

@keyframes <name> {
  from {
    /* 初始状态 */
  }
  to {
    /* 最终状态 */
  }
}

或者，

@keyframes <name> {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 最终状态 */
  }
}

动画的示例：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 1s infinite alternate;
}

@keyframes myAnimation {
  0% {
    width: 100px;
  }
  50% {
    width: 200px;
  }
  100% {
    width: 100px;
  }
}

在上面的示例中，.box元素将根据定义的关键帧动画myAnimation无限循环地在初始宽度和200px之间进行过渡。

CSS过渡和动画是实现网页元素动画效果的两种主要技术。过渡适用于简单的状态变化，通过平滑过渡元素属性的值来创建动画效果。动画则适用于更复杂的动画场景，可以定义多个关键帧和不同的动画属性。无论是过渡还是动画，它们的效果都能为网页添加生动和吸引人的交互体验。

3. CSS难点

在CSS学习过程中，可能会遇到一些难点。以下是几个常见的CSS学习难点：

1.盒模型：CSS的盒模型是一个基础概念，但对初学者来说可能会感到困惑。理解盒模型的不同组成部分（内容、内边距、边框和外边距）以及如何影响元素的布局和大小是重要的。初学者可能需要花一些时间来熟悉盒模型的概念和计算方法。

2.布局：CSS布局经常是学习过程中的难点之一。选择适当的布局技术和理解如何使用它们来创建所需的布局可能会有一定的挑战。例如，浮动、相对定位、绝对定位、弹性盒子等布局技术都有自己的特点和用法，初学者可能需要花些时间去理解和实践。

3.层叠与优先级：CSS样式的层叠和优先级规则是学习过程中的另一个难点。了解不同选择器的权重和优先级如何影响样式的应用是重要的。初学者可能会遇到样式不生效或意外覆盖的情况，需要仔细研究CSS的层叠规则。

4.响应式设计：随着移动设备和不同屏幕尺寸的普及，响应式设计变得越来越重要。学习如何创建适应不同屏幕和设备的响应式布局和样式可能会有一定难度。适应性媒体查询、弹性盒子和网格布局等技术可以帮助实现响应式设计，但初学者可能需要时间来理解和应用它们。

5.浏览器兼容性：CSS在不同浏览器和版本中有一些差异，可能会导致样式在某些浏览器中不一致或不生效。了解常见的浏览器兼容性问题，并掌握如何处理和解决这些问题是学习CSS的一项挑战。

克服这些难点需要持续的练习和深入的理解。查阅权威的CSS文档、参考书籍和在线资源，结合实际项目实践，可以帮助克服这些难点，并逐步提升CSS技能水平

4.学习总结

学习CSS给我带来了很多启示和体会。以下是我在个人学习CSS过程中得出的一些感悟：

1.样式与内容分离：CSS的核心理念是将样式与内容分离，这让我意识到网页设计和开发是一个有组织、有结构的过程。通过将样式从HTML中分离出来，我可以更好地管理和维护代码，实现代码的重用和效率提升。
2.细微的样式改变可以产生巨大的影响：在学习CSS过程中，我发现通过微调样式，如颜色、字体大小、边距等，可以使网页的外观和体验有很大的改变。细小的调整可以起到引人注目的效果，这使我明白了细节对于设计的重要性。
3.层叠和优先级的概念：CSS的层叠和优先级概念让我意识到不同样式规则之间的相互影响。深入理解选择器的优先级和样式的层叠顺序，可以帮助我更好地控制和管理样式，并解决样式冲突的问题。
4.灵活性和创造力：CSS提供了丰富的样式属性和选择器，允许我自由地探索和实现独特的设计想法。学习CSS让我意识到在设计中拥有无限的可能性和创造力，可以实现自己的视觉愿景。
5.持续学习和进步：随着学习CSS，我意识到技术和设计趋势在不断变化。为了跟上最新的发展，我要不断学习和深入了解新的CSS功能和技术。我也体会到，学习CSS不仅仅是为了应对当前需求，更是为了持续进步、成为更好的设计师或开发者。

通过学习CSS，我逐渐掌握了一种重要的技能，能够创建具有吸引力和舒适体验的网页。这让我对网页设计和开发充满了热情，并不断激励着我进一步深入学习和拓展我的技能。