• CSS 笔记/练习

    CSS

    概述

    • 与 html 配合，实现内容与样式分离
    • 样式
    • 美化

    标签中元素作用

    1. class：class属性用于为元素指定一个或多个样式类。通过为元素添加class属性，可以将其与CSS样式表中的样式规则关联起来，从而改变元素的外观和行为。一个元素可以有多个class值，多个class值之间用空格分隔。
    2. id：id属性用于为元素指定一个唯一的标识符。id属性的值在整个HTML文档中应该是唯一的，用于在JavaScript中通过getElementById()方法获取元素，并在CSS中通过#符号选择元素。通过id属性，可以对特定的元素进行操作、样式化或动态修改。
    3. title：title属性用于为元素提供额外的信息，通常以工具提示的形式显示在用户鼠标悬停在元素上时。当用户将鼠标悬停在具有title属性的元素上时，浏览器会显示一个小的文本框，其中包含title属性的值。title属性可以用于提供关于元素的更详细的描述或解释。
    4. name：name属性用于为元素指定一个名称，通常与表单元素一起使用。在表单提交时，浏览器会将表单元素的name属性和用户输入的值一起发送到服务器。通过name属性，可以在服务器端对表单数据进行处理和识别。name属性还可以用于在JavaScript中通过name属性值获取元素。

    使用方法

    属性

    属性作用
    font-size控制文字字号大小
    color控制文字的颜色
    font-family设置文字的字体
    txt-align控制文字的对齐方式 left / center / right（相对于父元素的位置）

    直接引用

    • 可以直接在某个标签直接引用

      "color: red">文本

      • 1

    head 中定义

    • 一般在 中定义好样式

      在 body 中不进行单独设置的

      标签内容都按照如下设置的样式输出

      <head>
    <style>
        p{
            color:blue;
            font-size: 30px;
            text-align: center;
        }
    style>
head>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

      设置在 body 中使用时按照定义的样式输出，但 head 中可以单独设置某条

      image-20231018104837892

    选择器

    • 在 标签下的