Logo

菜单

小熊奶糖(BearCandy)
小熊奶糖(BearCandy)
发布于 2024-04-26 / 18 阅读
0
0

CSS3入门 CSS概述|基础|字体样式属性|文本外观属性|列表样式属性|层叠性和继承性|优先级

#web前端

CSS概述

  1. CSS简介
    CSS（层叠样式表，Cascading Style Sheets）是一种用于定义网页元素样式的样式表语言。它允许开发者将样式信息与HTML文档内容分离，使得网页的设计和内容维护更加高效和灵活。
  2. CSS的发展历史
    CSS最初由哈肯·维姆·莱在1994年提出。1996年，W3C发布了CSS1，随后在1998年发布了CSS2。CSS2.1是CSS2的一个修订版，修复了一些错误并增加了一些澄清。CSS3是一个较大的更新，它被分为多个模块，每个模块独立发布，提供了更多的样式控制和效果。
  3. CSS的基本概念
    CSS由选择器和一组样式声明组成。选择器用于指定要应用样式的HTML元素，样式声明则定义了具体的样式属性和值。例如：
h1 {
  color: blue;
  font-size: 24px;
}

在这个例子中，h1是选择器，它指定了所有的 <h1>元素。color: blue;和 font-size: 24px;是样式声明，它们分别设置了文本颜色和字体大小。
CSS基础

  1. CSS样式规则
    CSS样式规则由选择器和一组包含在花括号内的样式声明组成。每个声明由一个属性和一个值组成，用冒号分隔，声明之间用分号分隔。
p {
  color: red;
  font-size: 16px;
}
  1. 引入CSS样式表3种
    （1）内联样式：直接在HTML元素中使用 style属性定义样式。
<p style="color: red; font-size: 16px;">这是一个段落。</p>

（2）内部样式表：在HTML文档的 <head>部分使用 <style>标签定义样式。

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>

（3）外部样式表：使用 <link>标签引入一个外部的CSS文件。

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
  1. CSS基础选择器
    CSS基础选择器包括元素选择器、类选择器、ID选择器、通用选择器等。
/* 元素选择器 */
p {
  color: red;
}
/* 类选择器 */
.red-text {
  color: red;
}
/* ID选择器 */
#unique {
  color: blue;
}
/* 通用选择器 */
* {
  margin: 0;
  padding: 0;
}

字体样式属性以及参数

  1. font-size: 字号
    用于设置字体的大小，单位可以是px、em、rem、vw等。
p {
  font-size: 16px;
}
  1. font-family: 字体
    用于设置字体类型，可以设置多个字体，以逗号分隔，表示优先级。
p {
  font-family: "Arial", sans-serif;
}
  1. font-weight: 文字粗细
    用于设置字体的粗细，常用的值有normal、bold等。
p {
  font-weight: bold;
}
  1. font-variant: 变体
    用于设置字体的小写字母是否以小型大写字符显示。
p {
  font-variant: small-caps;
}
  1. font-style: 字体风格
    用于设置字体的风格，如normal、italic等。
p {
  font-style: italic;
}
  1. font: 综合设置字体样式
    用于一次性设置字体的所有样式，如字体大小、字体类型、字体粗细等。
p {
  font: bold italic 16px/1.5 "Arial", sans-serif;
}
  1. @font-face 规则
    用于定义服务器上的字体文件，以便在网页中使用。
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.ttf') format('truetype');
}

文本外观属性

  1. color: 文本颜色
    用于设置文本的颜色。
p {
  color: #ff0000;
}
  1. letter-spacing: 字间距
    用于设置字符间距。
p {
  letter-spacing: 2px;
}
  1. word-spacing: 单词间距
    用于设置单词间距。
p {
  word-spacing: 4px;
}
  1. line-height: 行间距
    用于设置行间距。
p {
  line-height: 1.6;
}
  1. text-transform: 文本转换
    用于控制英文字符的大小写，如uppercase、lowercase等。
p {
  text-transform: uppercase;
}
  1. text-decoration: 文本装饰
    用于设置文本的装饰效果，如下划线、删除线等。
p {
  text-decoration: underline;
}
  1. text-align: 水平对齐方式
    用于设置文本的水平对齐方式，如left、right、center等。
p {
  text-align: center;
}
  1. text-indent: 首行缩进
    用于设置首行文本的缩进。
p {
  text-indent: 2em;
}
  1. white-space: 空格处理
    用于设置如何处理元素中的空白符。
p {
  white-space: nowrap;
}
  1. text-shadow: 阴影效果
    用于设置文本的阴影效果。

text-shadow CSS属性用于给文本添加阴影效果，它可以增强文本的可读性或在视觉上使文本更加突出。这个属性可以指定多个阴影，每个阴影由水平偏移、垂直偏移、模糊半径和颜色组成。
text-shadow 的基本语法如下：

element {
  text-shadow: h-offset v-offset blur-radius color, h-offset v-offset blur-radius color, ...;
}

属性值说明：

  • h-offset：水平偏移量，正值阴影将出现在文本右侧，负值将出现在文本左侧。
  • v-offset：垂直偏移量，正值阴影将出现在文本下方，负值将出现在文本上方。
  • blur-radius：模糊半径，可选，值越大，阴影越模糊。
  • color：阴影的颜色。
    例如，如果你想要给一个元素中的文本添加阴影效果，你可以这样使用 text-shadow：
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

在这个例子中，h1 元素中的文本将有一个水平偏移量为 2px，垂直偏移量为 2px，模糊半径为 4px，颜色为半透明的黑色的阴影。
你也可以添加多个阴影，只需要用逗号分隔每个阴影的值：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(255, 255, 255, 0.5);
}

在这个例子中，文本将有两个阴影：一个向右下角的黑色阴影和一个向左上角的白色阴影。
text-shadow 可以创造出多种视觉效果，例如浮雕效果、多重阴影等，通过调整偏移量、模糊半径和颜色，可以实现丰富的文本装饰效果。

p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
  1. text-overflow: 处理溢出的文本
    用于设置当文本溢出包含元素时如何处理。
p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  1. word-wrap属性用于设置如何处理长单词或URL地址的溢出问题。
p {
  word-wrap: break-word;
}

word-wrap CSS属性用于指定浏览器是否可以在单词内部进行断行以防止单词溢出容器。这个属性对于处理较长的单词或URL地址非常有用，尤其是在不希望单词被强制断开的情况下。
word-wrap 的基本语法如下：

element {
  word-wrap: normal | break-word;
}

属性值说明：

  • normal：默认值，表示只在允许的断行点进行单词断行。
  • break-word：允许在单词内部进行断行，以避免单词溢出其容器。
    例如，如果你有一个包含长单词或URL的段落，并且你不希望这些内容溢出其容器，你可以使用 word-wrap: break-word;：
p {
  width: 300px;
  border: 1px solid #000;
  word-wrap: break-word;
}

在这个例子中，任何超过 300px 宽度的单词或URL将在适当的位置被断开，以适应容器的大小。
需要注意的是，word-wrap 属性已经被 overflow-wrap 属性所取代，overflow-wrap 是 word-wrap 的更新、更标准的名称。虽然 word-wrap 仍然被广泛支持，但在现代CSS中，推荐使用 overflow-wrap。overflow-wrap 的行为与 word-wrap 相同，但提供了额外的 anywhere 值，该值允许在任何字符之间断行，包括中文、日文和韩文等通常不允许断行的字符。

element {
  overflow-wrap: normal | break-word | anywhere;
}
  • anywhere：允许在任何字符之间断行，包括那些通常不允许断行的字符。

综合应用例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Styling Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }
    .container {
      width: 80%;
      margin: auto;
      overflow: hidden;
    }
    h1 {
      color: #333;
      font-size: 36px;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.6;
      color: #666;
      text-align: justify;
      text-indent: 2em;
      word-spacing: 2px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
    .footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 20px 0;
      position: relative;
      bottom: 0;
      width: 100%;
    }
    .footer p {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #999;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to the CSS Styling Example</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  </div>
  <div class="footer">
    <p>© 2023 CSS Styling Example. All rights reserved.</p>
  </div>
</body>
</html>

在这个例子中，我们定义了一个简单的网页布局，包括一个标题、一个段落和一个页脚。我们使用了多种CSS属性来设置样式，包括字体大小、颜色、对齐方式、行间距、文本装饰、阴影等。这个例子展示了CSS如何影响网页的视觉效果和布局。

@font-face

@font-face 是 CSS 中的一个规则，它允许网页开发者自定义字体，即使这些字体没有安装在用户的计算机上。通过 @font-face，开发者可以从服务器加载字体文件，并在网页中使用这些字体。这样可以确保网页在不同用户的设备上有一致的字体表现，同时也能使用更多样化的字体设计。
@font-face 的基本语法如下：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path-to-the-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

这里的几个关键属性解释如下：

  • font-family: 定义了一个名称，用于在 CSS 中引用这个字体。
  • src: 指定了字体文件的 URL 路径。可以使用 url() 函数来指定路径。如果字体文件有多种格式，可以列出多个 url()，用逗号分隔。format() 函数是可选的，它指定了字体文件的格式，这有助于浏览器更有效地处理字体。
  • font-weight: 指定了字体的粗细。默认值是 normal，也可以设置为 bold 或其他具体的数值。
  • font-style: 指定了字体的样式。默认值是 normal，也可以设置为 italic 或 oblique。
    例如，如果你有一个名为 MyFont.ttf 的字体文件，你可以在 CSS 中这样使用 @font-face：
@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'MyFont', sans-serif;
}

在这个例子中，我们定义了一个名为 MyFont 的字体，指定了字体文件的路径，并在 body 选择器中使用了这个字体。如果 MyFont 字体不可用，浏览器将回退到 sans-serif 字体系列中的默认字体。
使用 @font-face 时，需要确保你有权使用和分发字体文件，并且字体文件的格式与用户的浏览器兼容。常见的字体格式包括 TrueType (.ttf)、OpenType (.otf)、Web Open Font Format (.woff) 和 Embedded OpenType (.eot)。

CSS中用来控制列表样式的属性主要有以下三个：

  1. list-style-type

    • 这个属性用来设置列表项目（<li>元素）前面的标记类型，例如：
      • disc：实心圆点，这是无序列表的默认样式；
      • circle：空心圆；
      • square：实心方块；
      • decimal：数字，适用于有序列表（<ol>元素）；
      • lower-alpha 或 upper-alpha：小写或大写字母；
      • lower-roman 或 upper-roman：小写或大写罗马数字等。
    • 设置为 none 可以移除列表项前的标记。

  2. list-style-image

    • 通过这个属性，您可以使用图像替换列表项的默认标记，通过URL指定图像资源： 
      list-style-image: url('image.jpg');
    • 如果图像加载失败，则会回退到 list-style-type定义的样式。

  3. list-style-position

    • 决定列表标记相对于列表项内容的位置：
      • outside：标记位于列表项目的边框外侧，默认值；
      • inside：标记位于列表项目的内边距区域，即内容旁边。

这三个属性也可以合并简写为 list-style，示例代码如下：

li {
  list-style: square url('image.gif') inside;
}

在这个简写形式中，各属性值的顺序可以变化，未指定的属性将会采用默认值。如果只需要改变其中一项，可以单独声明，例如仅修改列表项的类型：

li {
  list-style-type: decimal;
}

CSS的层叠性和继承性是其两大核心特性，它们决定了样式是如何应用到HTML文档中的各个元素上的。

CSS层叠性（Cascading）

层叠性意味着当多个CSS规则应用于同一元素时，浏览器会根据规则的优先级决定最终使用的样式。CSS的层叠规则包括以下几个方面：

  1. 来源：作者样式表 > 用户样式表 > 浏览器默认样式表（用户代理样式）。

  2. 选择器的优先级：

    • ID选择器（#id）的优先级最高，每个ID选择器计为100分。
    • 类选择器（.class）、属性选择器（[attr]）和伪类（:hover等）每种计为10分。
    • 标签选择器（element）和伪元素（::before、::after）每种计为1分。
    • 通配符选择器（*）和子代选择器（>）等不记分。

    如果一个规则有多个选择器组合而成，就将所有选择器的分数相加得到总分，优先级按照得分从高到低排列。

  3. 特殊性相同时，后来定义的样式（即出现在CSS文件或样式块后面）会覆盖先前定义的样式，这称为“层叠顺序”。

CSS继承性（Inheritance）

继承性是指子元素可以自动获取父元素的一些样式属性。不是所有的CSS属性都能被继承，能够被继承的主要是那些与文本相关的属性，例如：

  • color
  • font-family
  • font-size
  • font-weight
  • line-height
  • text-align
  • text-indent
  • letter-spacing
  • word-spacing
  • 等等

非继承属性，如盒模型属性（width、height、padding、margin）、定位属性（position、top、right、bottom、left）、背景属性（background-color等）以及大多数布局相关的属性，不会自动继承给子元素，需要针对子元素单独定义。

理解并掌握CSS的层叠性和继承性对于编写高效、易于维护的CSS代码至关重要。在实际应用中，开发者通常会利用这些特性优化样式结构，避免不必要的重复定义，确保样式在复杂场景下仍能按预期表现。

CSS 纯CSS制作轮播图|结合J...
Linux 详解history h...

评论