CSS

CSS

CSS入门

  • CSS（层叠样式表）用于描述HTML或XML文档的呈现方式，包括布局、颜色、字体等。

  • 基本结构

    • CSS规则由选择器和声明块组成。

    • selector {
    property: value;
    property: value;
    /* 更多属性和值 */
}
      • 选择器（Selector）：指定要应用样式的HTML元素。
      • 声明块（Declaration Block）：包含一个或多个声明，用大括号 {} 包围。
      • 声明（Declaration）：由属性和值组成，用冒号 : 分隔，以分号 ; 结束。

  • 示例

    • p {
    color: blue;
    font-size: 16px;
}
      • p 是选择器，表示所有 <p> 元素。
      • color: blue; 和 font-size: 16px; 是声明，分别设置文本颜色和字体大小。

  • CSS注释

    • CSS注释用 /* 和 */ 包围，不会影响样式。

    • /* 这是一个注释 */
p {
    color: blue; /* 这是另一个注释 */
}

插入CSS样式

  • 内联样式（Inline Styles）

    • 直接在HTML元素的style属性中定义样式。

    • <p style="color: blue; font-size: 14px;">这是一个段落。</p>

  • 内部样式表（Internal Style Sheet）

    • 在HTML文档的<head>部分使用<style>标签定义样式。

    • <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

  • 外部样式表（External Style Sheet）

    • 将样式定义在一个单独的CSS文件中，然后在HTML文档中通过<link>标签引入

    • CSS样式文件

      • p {
    color: blue;
    font-size: 14px;
}

    • HTML文件

      • <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

  • 使用@import导入样式表

    • 在<style>标签或外部CSS文件中使用@import语句导入其他CSS文件

    • 在HTML文件中导入其他CSS文件

      • <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>@import示例</title>
    <style>
        @import url('styles.css');
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

    • 在CSS文件中导入其他CSS文件

      • @import url('another-styles.css');

p {
    color: blue;
    font-size: 14px;
}

  • 优先级问题

    • CSS 的样式可以来自多个来源（如外部样式表、内部样式表、内联样式等），浏览器会根据以下规则确定最终样式：
      • 内联样式 > 内部样式表 > 外部样式表（含@import）。

CSS选择器

基本选择器

  1. 元素选择器

    • 选择指定标签名称的元素。

    • 选择所有 <p> 元素

      • p {
    color: red;
}

  2. 类选择器

    • 选择具有指定 class 属性的元素，以 . 开头。

    • 选择所有 class="text" 的元素。

      • .text {
    font-size: 16px;
}
<div class="text" />

  3. ID 选择器

    • 选择具有指定 id 属性的元素，以 # 开头。

    • 选择 id="header" 的元素

      • #header {
    background-color: yellow;
}
<div id="header">

  4. 通配符选择器

    • 选择所有元素。

      • * {
    margin: 0;
    padding: 0;
}

组合选择器

  1. 后代选择器

    • 后代选择器用于选择某个元素的后代元素。它使用空格（ ）来分隔两个选择器

    • 祖先选择器 后代选择器 {
  样式声明
}

      • 其中祖先选择器和后代选择器可以是基本选择器中的任意一个

      • .container p {
  color: blue;
}
或者
div p{
  color: blue;
}
<div class="container">
  <p>这是一个段落。</p>
  <span>这是一个span。</span>
</div>

  2. 子元素选择器

    • 子元素选择器用于选择某个元素的直接子元素。它使用大于号（>）来分隔两个选择器

    • 父元素选择器 > 子元素选择器 {
  样式声明
}

  3. 相邻兄弟选择器

    • 相邻兄弟选择器用于选择紧接在另一个元素后的兄弟元素。它使用加号（+）来分隔两个选择器

    • h1 + p {
  color: green;
}

<h1>标题</h1>
<p>这是紧接在标题后的段落。</p>
<p>这是另一个段落。</p>

    • h1 + p 选择紧接在 <h1> 元素后的第一个 <p> 元素，并将其文本颜色设置为绿色。第二个 <p> 元素不会被选中。

  4. 群组选择器（Grouping Selector）

    • 群组选择器用于同时选择多个元素，并为它们应用相同的样式。它使用逗号（,）来分隔多个选择器

    • 选择器1, 选择器2, 选择器3 {
  样式声明
}

属性选择器

属性选择器根据元素的属性及其值来选择元素。

  1. [attr]

    • 选择带有指定属性的元素，无论属性值是什么

    • 选择所有带有target属性的<a>元素。

    • a[target] {
    color: red;
}

  2. [attr=value]

    • 选择属性值完全等于指定值的元素。

    • 选择所有type属性为text的<input>元素

    • input[type="text"] {
    border: 1px solid #ccc;
}

  3. [attr~=value]

    • 选择属性值包含指定词汇的元素（词汇以空格分隔）

伪类选择器

伪类选择器用于选择元素的特定状态或位置。

  1. :hover选择鼠标悬停在其上的元素

    • a:hover {
    color: orange;
}

  2. :active选择被用户激活的元素（如点击时)

  3. :focus选择获得焦点的元素（如表单输入框）

  4. :first-child:选择作为其父元素第一个子元素的元素

  5. :last-child选择作为其父元素最后一个子元素的元素

  6. :checked选择被选中的表单元素（如复选框或单选按钮）

  7. :disabled选择被禁用的表单元素

CSS常用属性

颜色和背景

  • color: 设置文本颜色
  • background-color: 设置背景颜色
  • background-image: 设置背景图片
  • background-repeat: 控制背景图片的重复方式
  • background-position: 设置背景图片的位置

文本

  • font-family: 设置字体。
  • font-size: 设置字体大小。
  • font-weight: 设置字体粗细。
  • text-align: 设置文本对齐方式。
  • text-decoration: 设置文本装饰。
  • line-height: 设置行高。

盒子模型

  • width 和 height: 设置元素的宽度和高度。

    • width: 100px;
height: 50px;

  • margin: 设置外边距。

    • margin: 10px; /* 上下左右 */
margin: 10px 20px; /* 上下 左右 */
margin: 10px 20px 30px 40px; /* 上 右 下 左 */

  • padding: 设置内边距。

    • padding: 10px; /* 上下左右 */
padding: 10px 20px; /* 上下 左右 */
padding: 10px 20px 30px 40px; /* 上 右 下 左 */

  • border: 设置边框。

    • border: 1px solid #000; /* 宽度 样式 颜色 */
posted @ 2025-03-18 14:47  QAQ001  阅读(25)  评论(0)    收藏  举报