学习，永无止境！|
收藏闪存小组博问

韩熙隐ario

园龄：2年11个月粉丝：0关注：0

📂Java学习 / 前端基础
🔖前端CSS
2025-02-01 23:25阅读: 13评论: 0推荐: 0

CSS基础

学习资源

CSS简介

  1. CSS 简介：CSS（层叠样式表，Cascading Style Sheets）是用于控制网页样式和布局的语言。它能对 HTML 文档中的元素进行字体、颜色、大小、背景、边框等样式设定，使网页在视觉上更具吸引力和可读性。通过将样式与 HTML 内容分离，不仅提高了代码的可维护性，还能实现一个样式表控制多个页面的效果，提升开发效率。
  2. CSS 引入方式
    • 内联样式：直接在 HTML 标签的style属性中编写 CSS 代码。例如：<p style="color: red; font-size: 16px;">这是一段红色、16像素字体的文本。</p>。内联样式仅对当前标签生效，优点是简单直接，适合对单个元素进行临时样式调整；缺点是代码重复度高，不利于样式的统一管理和复用，当需要修改样式时，需逐个标签调整，工作量大。
    • 内部样式表：在 HTML 文档的<head>标签内，使用<style>标签包裹 CSS 代码。示例如下：
<head>
    <style>
        p {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

内部样式表可对整个页面的相同元素应用统一样式，相较于内联样式，代码的复用性有所提高，但如果页面较多，样式代码会集中在 HTML 文件中，导致文件冗长，维护不便。

  • 外部样式表：创建独立的 CSS 文件（以.css为后缀），在 HTML 文件中通过<link>标签引入。如：<link rel="stylesheet" href="styles.css">。这种方式将样式和 HTML 内容完全分离，使代码结构清晰，便于维护和管理。多个 HTML 页面可引用同一个 CSS 文件，实现样式的统一更新和复用，是实际项目中最常用的引入方式 。

CSS选择器

  1. 元素的 id 和 class：在 HTML 中，id用于唯一标识一个元素，一个页面中每个元素的id值应是独一无二的；class则可用于给多个元素添加相同的类别，多个元素可共享同一个class值。在 CSS 中，通过#加id名来选择具有特定id的元素，如#myElement { color: green; }；通过.加class名选择具有该class的所有元素，如.myClass { font-size: 14px; }。利用id和class，可以精准地为不同元素或元素组设置样式。
  2. 选择器是什么：CSS 选择器是一种模式，用于选择要设置样式的 HTML 元素。通过选择器，CSS 能够准确找到目标元素并应用相应的样式规则，它是 CSS 样式生效的关键机制。选择器的准确性和灵活性直接影响样式设置的效果和效率。
  3. CSS 选择器
    • 标签选择器：直接使用 HTML 标签名作为选择器，如p { line-height: 1.5; }会选中页面中所有的<p>标签元素，为它们设置行高为 1.5 倍字体大小的样式。这种选择器简单直接，但针对性不强，对所有相同标签元素统一设置样式。
    • 类选择器：以.开头，后跟自定义的类名，可选择具有该类名的所有元素。例如，给多个段落元素添加class="highlight"，然后使用.highlight { background-color: yellow; }，就能为这些段落设置黄色背景。类选择器提高了样式的复用性，方便对一组元素进行相同样式设置。
    • ID 选择器：以#开头，后跟唯一的id值，仅选择具有该id的单个元素。比如#header { color: white; }，只会对id为header的元素应用白色文本颜色样式。ID 选择器具有最高的优先级，但由于其唯一性，不适合大量复用样式。
    • 后代选择器：用于选择某元素的后代元素。例如，ul li { list-style-type: none; }，会选择<ul>列表内的所有<li>列表项元素，将它们的列表项符号去除。后代选择器可实现对特定元素层级结构内的元素进行样式控制。
    • 子选择器：使用>符号，仅选择某元素的直接子元素。如div > p { font-weight: bold; }，只会使<div>元素的直接子元素<p>标签内的文本加粗，而不会影响<div>内嵌套更深层次的<p>元素。

字体样式

  1. 字体样式简介：字体样式用于控制网页中文本的字体外观，包括字体类型、大小、粗细、风格和颜色等方面，通过合理设置字体样式，能提升文本的可读性和页面的整体美观度。
  2. 字体类型:font-family：font-family属性用于指定文本的字体。可以设置多个字体名称，以逗号分隔，浏览器会按顺序查找并使用系统中已安装的字体。例如：body { font-family: Arial, sans-serif; }，表示优先使用 Arial 字体，如果用户系统中没有 Arial，则使用无衬线字体（sans-serif）作为替代。常见的字体分类有衬线字体（如 Times New Roman）、无衬线字体（如 Arial、Helvetica）、等宽字体（如 Courier New，常用于显示代码等需要固定宽度字体的场景）等。
  3. 字体大小:font-size：font-size属性用于设置文本的字体大小。可以使用绝对单位（如px，像素）或相对单位（如em、rem）。例如，p { font-size: 16px; }将段落文本设置为 16 像素大小；h1 { font-size: 2em; }表示<h1>标签的字体大小是其父元素字体大小的 2 倍。相对单位能使字体大小随父元素或根元素的字体大小变化而自适应，提高页面在不同设备上的兼容性 。
  4. 字体粗细:font-weight：font-weight属性用于设置文本的粗细程度。常见取值有normal（正常粗细，相当于数值 400）、bold（加粗，相当于数值 700），也可以直接使用 100 - 900 之间的数值来更精确地控制粗细。如span { font-weight: bold; }会使<span>标签内的文本加粗显示 。
  5. 字体风格:font-style：font-style属性用于设置字体的风格，常见取值有normal（正常风格，即文本不倾斜）、italic（斜体）、oblique（倾斜，与 italic 效果类似，但在某些字体中略有差异）。例如，em { font-style: italic; }会让<em>标签包裹的文本以斜体显示。
  6. 字体颜色:color：color属性用于设置文本的颜色。可以使用颜色名称（如red、blue）、十六进制颜色值（如#FF0000表示红色）、RGB 值（如rgb(255, 0, 0)同样表示红色）或 HSL 值（如hsl(0, 100%, 50%)也表示红色）来指定颜色。如a { color: #0000FF; }会将超链接文本颜色设置为蓝色 。
  7. CSS 注释：CSS 注释使用/* 注释内容 */进行标注。注释用于在代码中添加解释和说明，提高代码的可读性，方便自己和其他开发者理解代码逻辑。注释内容不会在浏览器中显示，例如：/* 这是为所有段落设置字体颜色的样式 */ p { color: green; } 。

文本样式

  1. 文本样式简介：文本样式主要针对文本的排版和显示效果进行设置，包括首行缩进、水平对齐、文本修饰、大小写转换、行高、字符间距和单词间距等方面，使文本在页面中呈现出更清晰、美观的布局。
  2. 首行缩进:text-indent：text-indent属性用于设置文本第一行的缩进量。可以使用长度值（如px、em）或百分比来指定缩进量。例如，p { text-indent: 2em; }会使段落的第一行缩进两个字符的宽度，常用于文章段落排版，符合传统阅读习惯。
  3. 水平对齐:text-align：text-align属性用于设置文本在水平方向上的对齐方式。常见取值有left（左对齐，默认值）、right（右对齐）、center（居中对齐）、justify（两端对齐）。比如，h1 { text-align: center; }会使<h1>标题文本在其所在容器内居中显示 。
  4. 文本修饰:text-decoration：text-decoration属性用于给文本添加修饰效果。常见取值有none（无修饰，可用于去除超链接默认的下划线）、underline（下划线，常用于突出显示或表示链接）、overline（上划线）、line-through（删除线）。例如，a:hover { text-decoration: underline; }表示当鼠标悬停在超链接上时，显示下划线 。
  5. 大小写:text-transform：text-transform属性用于控制文本的大小写转换。取值包括none（不转换，保持原始大小写）、uppercase（转换为大写）、lowercase（转换为小写）、capitalize（每个单词的首字母大写）。例如，h2 { text-transform: uppercase; }会将<h2>标题文本全部转换为大写显示 。
  6. 行高:line-height：line-height属性用于设置文本行与行之间的垂直间距，即行间距。可以使用数字（表示相对于字体大小的倍数）、长度值（如px）或百分比。例如，p { line-height: 1.5; }表示段落文本的行间距为字体大小的 1.5 倍，合适的行高能提高文本的可读性。
  7. 间距:letter-spacing、word-spacing：letter-spacing属性用于设置字符之间的间距，可以使用正值增加间距，负值减小间距。例如，h3 { letter-spacing: 2px; }会使<h3>标题中字符之间的间距增加 2 像素。word-spacing属性用于设置单词之间的间距，同样可以用正值或负值调整，如p { word-spacing: 5px; }会使段落中单词之间的间距增加 5 像素 。

边框样式

  1. 边框样式简介：边框样式用于为 HTML 元素添加边框，通过设置边框的样式、宽度、颜色等属性，可以增强元素的视觉层次感和区分度，使页面布局更加清晰。
  2. 整体样式：使用border属性可以一次性设置元素的边框宽度、样式和颜色。例如，div { border: 1px solid black; }，表示为<div>元素设置 1 像素宽、实线样式、黑色的边框。其中，边框样式常见取值有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等 。
  3. 局部样式：也可以分别设置边框的各个边的样式，如border-top（上边框）、border-right（右边框）、border-bottom（下边框）、border-left（左边框）。例如，p { border-top: 2px dashed red; }会为段落元素设置 2 像素宽、虚线样式、红色的上边框 。
  4. 本章练习：创建多个不同类型的 HTML 元素（如<div>、<p>、<img>等），使用整体和局部边框样式属性为它们设置不同样式的边框，包括不同的宽度、样式和颜色组合，观察边框对元素外观的影响。

列表样式

  1. 列表项符号:list-style-type：list-style-type属性用于设置列表项前的符号样式。对于无序列表（<ul>），常见取值有disc（实心圆，默认值）、circle（空心圆）、square（方块）等；对于有序列表（<ol>），常见取值有decimal（数字 1,2,3...）、lower-roman（小写罗马数字 i,ii,iii...）、upper-alpha（大写英文字母 A,B,C...）等。例如，ul { list-style-type: square; }会将无序列表的列表项符号设置为方块 。
  2. 列表项图片:list-style-image：list-style-image属性可以用自定义图片作为列表项的符号。例如，ul { list-style-image: url('bullet.png'); }，会将bullet.png图片作为无序列表的列表项符号。需注意图片路径要正确，否则图片无法显示 。

表格样式

  1. 表格标题位置:caption-side：caption-side属性用于设置表格标题（<caption>标签）的位置。常见取值有top（默认值，标题显示在表格顶部）、bottom（标题显示在表格底部）。例如，table { caption-side: bottom; }会使表格标题显示在表格底部 。
  2. 表格边框合并:border-collapse：border-collapse属性用于控制表格边框的合并方式。取值collapse表示合并边框，相邻单元格的边框会合并为一个边框；取值separate表示边框分离，每个单元格都有独立的边框。例如，table { border-collapse: collapse; }会将表格边框合并 。
  3. 表格边框间距:border-spacing：border-spacing属性用于设置相邻单元格边框之间的间距，仅在border-collapse属性值为separate时生效。可以设置两个值，第一个值表示水平间距，第二个值表示垂直间距；如果只设置一个值，则表示水平和垂直间距相同。例如，table { border-spacing: 5px 10px; }会使表格单元格水平间距为 5 像素，垂直间距为 10 像素 。

图片样式

  1. 图片大小：通过width和height属性可以设置图片的宽度和高度。可以使用长度值（如px）或百分比。例如，img { width: 200px; height: 150px; }会将图片的宽度设置为 200 像素，高度设置为 150 像素；若设置img { width: 50%; }，则图片宽度会变为其父元素宽度的 50%，高度会按比例自动调整，以保持图片的原始纵横比 。
  2. 图片边框：与其他元素一样，图片也可以设置边框样式。使用border属性或其局部属性（如border-top、border-right等）为图片添加边框。例如，img { border: 2px solid blue; }会为图片设置 2 像素宽、实线样式、蓝色的边框 。
  3. 图片对齐：text-align属性可以用于设置图片在其容器内的水平对齐方式，如img { display: block; margin: 0 auto; }（将图片设置为块级元素并左右自动外边距）可以使图片在父容器内居中对齐；还可以使用vertical-align属性设置图片与周围文本的垂直对齐方式，常见取值有top（顶部对齐）、middle（中间对齐）、bottom（底部对齐）等 。
  4. 文字环绕:float：float属性用于实现文字环绕图片的效果。取值left表示图片向左浮动，文字环绕在图片右侧；取值right表示图片向右浮动，文字环绕在图片左侧。例如，img { float: left; margin-right: 10px; }会让图片向左浮动，并在其右侧留出 10 像素的空白区域用于文字环绕。需要注意的是，使用float属性后，可能会导致父元素高度塌陷，一般需要通过清除浮动来解决这个问题。

背景样式

  1. 背景样式简介：背景样式用于为 HTML 元素设置背景，包括背景颜色、背景图片、背景图片的重复方式、位置以及是否固定等，通过合理设置背景样式，可以增强页面的视觉效果和整体美感。
  2. 背景颜色:background-color：background-color属性用于设置元素的背景颜色。可以使用颜色名称、十六进制颜色值、RGB 值或 HSL 值来指定颜色。例如，body { background-color: #f0f0f0; }会将页面的背景颜色设置为浅灰色。
  3. 背景图片样式:background-image：background-image属性用于为元素添加背景图片。例如，div { background-image: url('background.jpg'); }，其中url('background.jpg')指定了背景图片的路径。图片路径可以是相对路径或绝对路径，确保路径正确才能正常显示图片。
  4. 背景图片重复:background-repeat：background-repeat属性用于控制背景图片的重复方式。常见取值有repeat（默认值，在水平和垂直方向重复平铺图片）、repeat-x（仅在水平方向重复平铺）、repeat-y（仅在垂直方向重复平铺）、no-repeat（不重复，只显示一次背景图片）。比如，body { background-image: url('pattern.png'); background-repeat: repeat-x; }会使pattern.png图片在页面水平方向重复平铺作为背景。
  5. 背景图片位置:background-position：background-position属性用于指定背景图片在元素内的位置。可以使用关键字（如top、bottom、left、right、center）或长度值（如px）来设置。例如，div { background-image: url('logo.png'); background-repeat: no-repeat; background-position: right top; }会将logo.png图片显示在<div>元素的右上角，并且不重复。
  6. 背景图片固定:background-attachment：background-attachment属性用于设置背景图片是否随页面滚动而移动。取值scroll（默认值，背景图片随页面滚动）、fixed（背景图片固定，不随页面滚动，常用来创建视差效果）、local（背景图片随元素内容滚动）。例如，body { background-image: url('bg.jpg'); background-attachment: fixed; }会使bg.jpg作为固定的背景图片，在页面滚动时保持不动

超链接样式

  1. 超链接伪类：超链接在不同状态下可以有不同的样式，通过超链接伪类来实现。常见的超链接伪类有:link（未访问过的链接样式）、:visited（已访问过的链接样式）、:hover（鼠标悬停在链接上时的样式）、:active（链接被点击激活时的样式）。例如：
a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: orange;
}
  1. 深入了解:hover：:hover伪类是超链接交互效果的重要部分，除了可以改变链接的颜色和文本修饰，还能用于显示隐藏元素、改变元素的大小或位置等。例如，当鼠标悬停在一个按钮上时，可以通过:hover伪类让按钮的背景颜色变亮，以提示用户该按钮可点击。
  2. 鼠标样式：通过cursor属性可以改变鼠标悬停在元素上时的样式。常见取值有default（默认箭头样式）、pointer（小手样式，常用于表示链接或可点击元素）、text（文本输入光标样式）、wait（等待光标样式）等。例如，a { cursor: pointer; }会使超链接上的鼠标样式变为小手，增强交互性和用户体验。

盒子模型

  1. CSS 盒子模型：CSS 盒子模型是 CSS 布局的基础概念，每个 HTML 元素都可以看作是一个矩形的盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒子模型对于精确控制元素的大小、位置和布局至关重要。
  2. 宽高:width、height：width和height属性用于设置元素内容区域的宽度和高度。例如，div { width: 200px; height: 100px; }会将<div>元素的内容区域宽度设置为 200 像素，高度设置为 100 像素。需要注意的是，元素的实际宽度和高度还会受到内边距、边框和外边距的影响。
  3. 边框:border：边框在前面的边框样式章节已详细介绍，它围绕在元素内容和内边距的周围，可以设置边框的宽度、样式和颜色，影响元素的外观和布局。
  4. 内边距:padding：padding属性用于设置元素内容与边框之间的距离，即内边距。可以使用padding属性一次性设置四个方向的内边距，也可以使用padding-top、padding-right、padding-bottom、padding-left分别设置上、右、下、左四个方向的内边距。例如，div { padding: 10px; }会为<div>元素的四个方向都设置 10 像素的内边距；div { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }可以为不同方向设置不同的内边距值。
  5. 外边距:margin：margin属性用于设置元素与其他元素之间的距离，即外边距。与padding类似，也可以使用margin一次性设置四个方向的外边距，或使用margin-top、margin-right、margin-bottom、margin-left分别设置单个方向的外边距。例如，p { margin: 20px; }会为段落元素的四个方向都设置 20 像素的外边距；p { margin-bottom: 10px; }会仅为段落元素的底部设置 10 像素的外边距。外边距可以为正值、负值或 0，负值外边距会使元素重3叠

浮动布局

  1. 文档流简介：文档流是 HTML 元素在网页中排列的默认方式，块级元素在文档流中自上而下依次排列，每个块级元素独占一行；行内元素在文档流中从左到右依次排列，直到一行排满后换行。理解文档流是掌握浮动布局和其他布局方式的基础。

  2. 浮动：float属性用于实现元素的浮动效果，使元素脱离文档流，向左或向右移动，直到碰到父元素的边缘或其他浮动元素。常见取值有left（向左浮动）、right（向右浮动）、none（不浮动，默认值）。例如，img { float: left; }会使图片向左浮动，周围的文本会环绕在其右侧。浮动常用于实现多列布局、图文混排等效果，但使用不当会导致布局混乱。

  3. 清除浮动

    ：由于浮动元素脱离了文档流，可能会导致父元素高度塌陷，影响页面布局。清除浮动的目的是让父元素能够包含其内部浮动元素，恢复正常的布局。常见的清除浮动方法有：

    • 使用clear属性：在浮动元素之后添加一个空的<div>元素，并设置clear: both;，例如：
<div style="float: left;">浮动元素</div>
<div style="clear: both;"></div>
  • 使用伪元素清除浮动：在父元素上添加如下 CSS 样式：
.parent::after {
  content: "";
  display: block;
  clear: both;
}

定位布局

  1. 定位布局简介：定位布局通过position属性来实现，它可以精确控制元素在页面中的位置。position属性有五个取值：static（静态定位，默认值，元素按照文档流正常排列）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和sticky（粘性定位，是 CSS3 新增属性）。不同的定位方式适用于不同的布局需求。
  2. 固定定位:fixed：position: fixed;使元素相对于浏览器窗口进行定位，元素的位置不会随页面滚动而改变。例如，固定在页面顶部的导航栏可以使用固定定位实现：
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
}
  1. 相对定位:relative：position: relative;使元素相对于其在文档流中的原始位置进行定位。通过设置top、right、bottom、left属性可以移动元素，但元素在文档流中占据的空间仍然保留。例如，div { position: relative; top: 10px; left: 20px; }会使<div>元素相对于其原始位置向下移动 10 像素，向右移动 20 像素。
  2. 绝对定位:absolute：position: absolute;使元素相对于最近的已定位（非静态定位）祖先元素进行定位，如果没有已定位的祖先元素，则相对于浏览器窗口。绝对定位的元素脱离文档流，不占据空间。例如：
<div style="position: relative;">
  <div style="position: absolute; top: 50px; left: 50px;">绝对定位元素</div>
</div>
  1. 静态定位:static：position: static;是元素的默认定位方式，元素按照文档流正常排列，不受top、right、bottom、left等属性的影响。

本文作者：韩熙隐ario

本文链接：https://www.cnblogs.com/arioya/p/18696594

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   韩熙隐ario  阅读(13)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
收起