CSS学习 Part1

CSS的引入方式

1. 行内样式（Inline CSS）

行内样式是把 CSS 规则直接写在 HTML 元素的style属性中。它的优点是能快速应用样式，缺点是无法复用样式，还会让 HTML 代码变得繁杂。

<p style="color: red; font-size: 16px;">这段文字会显示为红色，字体大小是16像素。</p>2. 内部样式表（Internal/Embedded CSS）

2. 内部样式表（Internal/Embedded CSS）

内部样式表是将 CSS 代码写在 HTML 文件的<style>标签内，通常放在<head>标签中。它适用于单个页面的样式设置，但不利于多个页面共享样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>所有段落都会应用上面定义的样式。</p>
    <div class="highlight">这个div会有黄色背景。</div>
</body>
</html>

3. 外部样式表（External CSS）

外部样式表是把 CSS 代码存放在独立的.css文件中，然后在 HTML 文件里通过<link>标签引入。这种方式能实现样式的复用，便于维护，是大型项目的理想选择。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这个段落的样式由外部CSS文件定义。</p>
</body>
</html>

CSS 文件示例（styles.css）：

h1 {
    color: green;
    font-size: 24px;
}
p {
    color: purple;
    line-height: 1.5;
}
  • 行内样式：适合进行快速测试或者设置特殊的单个元素样式。
  • 内部样式表：适用于小型页面或者演示场景。
  • 外部样式表：是大型项目的首选，能提高代码的可维护性和复用性。

类选择器

在 CSS 里，类选择器是一种十分实用的选择器，它能够依据元素的class属性值来挑选对应的 HTML 元素。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 类选择器示例 */
.alert {
    padding: 10px;
    border: 1px solid #ccc;
}

.success {
    background-color: #4CAF50;
    color: white;
}

.error {
    background-color: #f44336;
    color: white;
}

.warning {
    background-color: #ff9800;
    color: white;
}
</style>
</head>
<body>

<div class="alert success">这是一条成功消息</div>
<div class="alert error">这是一条错误消息</div>
<div class="alert warning">这是一条警告消息</div>

</body>
</html>

id选择器

一般用于JavaScript

id 选择器的作用是选取拥有特定 id 属性的元素，其符号是#。在一个 HTML 文档中，每个 id 都应当是独一无二的，所以 id 选择器一般用于对单个元素的样式进行设置。

示例：

<style>
  #header {
    color: red;
    font-size: 24px;
  }
</style>

<h1 id="header">这是标题</h1>

通配符选择器

通配符选择器用*表示，它的功能是选取页面上的所有元素，或者是某个元素内部的所有子元素。在需要对页面全局样式进行重置，或者给所有元素应用相同样式的时候，通配符选择器就会派上用场。

<style>
  /* 全局样式重置 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* 选取某个元素内的所有子元素 */
  .container * {
    border: 1px solid gray;
  }
</style>

<div class="container">
  <p>段落</p>
  <span>跨度</span>
</div>

行高

在 CSS 中，行高（line-height） 是控制文本行与行之间垂直间距的属性。它影响文本内容的视觉高度和可读性，是排版设计的重要参数。

p {
  line-height: 1.5; /* 行高为字体大小的1.5倍 */
}
h1 {
  line-height: 36px; /* 固定行高36像素 */
}

当元素的 height 等于 line-height 时，单行文本会垂直居中。例如：

.button {
  height: 40px;
  line-height: 40px; /* 文本垂直居中 */
}

字体族

在 CSS 中，字体族（font-family） 用于指定文本的字体类型。它允许你定义一个优先级列表，浏览器会按顺序尝试应用这些字体，直到找到可用的字体。

示例：

p {
  font-family: "Arial";
}

通用字体族

  • 后备字体类别，确保在特定字体不可用时仍有合理的默认显示。常见的通用字体族包括：

    • serif（衬线字体，如宋体）
    • sans-serif（无衬线字体，如 Arial）
    • monospace（等宽字体，如 Consolas）
    • cursive（手写体）
    • fantasy（装饰性字体）
    body {
      font-family: "Helvetica Neue", Arial, sans-serif;
    }

    无衬线字体较为常见

    font属性

    在 CSS 中，**font** 是一个复合属性，用于一次性设置多个字体相关的样式。它可以同时定义字体大小、粗细、样式、行高和字体系列，使代码更简洁。

selector {
  font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

必填值：font-size 和 font-family
可选值：font-style、font-variant、font-weight、line-height
顺序要求：必须按上述顺序书写，否则属性可能无效。

示例：

/* 合法写法 */
p {
  font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

/* 省略可选值（只保留font-size和font-family） */
h1 {
  font: 24px "Georgia", serif;
}

/* 非法写法（缺少font-size或font-family） */
div {
  font: bold italic; /* 错误！缺少font-size和font-family */
}
  • 顺序严格：必须按 style → variant → weight → size/line-height → family 的顺序书写。

文本缩进

在 CSS 中，文本缩进（text-indent） 用于控制段落首行内容的起始位置，即首行文字与左侧边界的距离。它常用于排版场景（如书籍、文章）以增强可读性。

p {
  text-indent: 2em; /* 首行缩进2个字符宽度 */
}

仅影响首行
text-indent 只对块级元素的第一行文本有效。

文本对齐

在 CSS 中，文本对齐（text-align） 用于控制块级元素内文本的水平排列方式。它决定了文本如何在元素的内容区域内分布，是排版设计的基础属性之一。

selector {
  text-align: left | right | center | justify | justify-all | start | end | match-parent | initial | inherit;
}

  1. 常规对齐方式

    • left：左对齐（默认值，文本靠左排列）。
    • right：右对齐（文本靠右排列）。
    • center：居中对齐（文本居中排列）。
    • justify：两端对齐（文本均匀分布，左右边缘对齐）。

  2. 方向性对齐

    • start：与文本方向起始端对齐（如 LTR 语言为左对齐，RTL 语言为右对齐）。
    • end：与文本方向结束端对齐。

  3. 特殊关键字

    • justify-all：类似 justify，但强制最后一行也两端对齐（支持有限）。
    • match-parent：继承父元素的 text-align，但方向相反（如父元素为 right，子元素为 left）。

文字颜色

使用十六进制值

十六进制颜色值也是设置文字颜色的常用方法，它的格式为#RRGGBB或者#RGB。

p {
  color: #FF0000; /* 红色 */
}
h1 {
  color: #333333; /* 深灰色 */
}

采用 RGB 值

通过 RGB 值同样可以设置文字颜色，其格式是rgb(红, 绿, 蓝)，其中每个参数的取值范围是 0 - 255。

p {
  color: rgb(255, 0, 0); /* 红色 */
}
h1 {
  color: rgb(51, 51, 51); /* 深灰色 */
}

使用 RGBA 值

RGBA 值在 RGB 的基础上增加了透明度参数，格式为rgba(红, 绿, 蓝, 透明度)，透明度的取值范围是 0.0（完全透明）到 1.0（完全不透明）。

p {
  color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}
h1 {
  color: rgba(51, 51, 51, 0.8); /* 半透明深灰色 */
}

综合示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
<style>
h1 {
    text-align: center;
    font-weight: 400;
    font-size: 30px;
    color: #333;
}
div {
    color:gray;
    font-size: 14px;
}
p{
    text-indent: 2em;
}
</style>
</head>
<body>
    <h1>在希望的田野上</h1>
<div>来源：央视网|2222年12月12日</div>
<p>
    <strong>央视网消息：</strong>
    眼下，湖北省秋收开镰已有一周多的时间
</p>
<p>
    中稻占据了湖北全年粮食产量的一半以上
</p>
</body>
</html>

综合示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
h1{
    color: #333333;
}
p {
    color: #444444;
    font-size: 14px;
    text-indent: 2em;
}
ul {
    font-size: 30px;
}
    </style>
</head>
<body>
    <h1>CSS(层叠样式表)</h1>
<p>
层叠样式表，是一种<a href="#">样式表</a>语言，用来描述HTML或XML文档的呈现。CSS描述了......
</p>
<p>
    <strong>CSS是开放网络的核心语言之一</strong>，由W3C规范实现跨浏览器的标准化......
</p>
<ul>
    <li>
        CSS介绍 如果你是Web开发的新手......
    </li>
    <li>
        CSS教程......
    </li>
    <li>
        CSS参考......
    </li>
</ul>
</body>
</html>