CSS基础笔记 | 豆包MarsCode AI刷题

用户3065725168461
151 阅读6分钟

CSS概述

CSS（层叠样式表）用于为HTML文档添加样式，它通过控制元素的布局、颜色、字体、间距等视觉效果，帮助设计出结构清晰、视觉美观的网页。CSS 可以内嵌在HTML文档中，也可以通过外部文件链接引用。

基础认知

CSS 的基本语法结构如下：

css 写在 style 标签中，style 标签一般写在 head 标签里面，title 标签下面

此方法为内嵌式：通过 style 属性直接在HTML标签中定义样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        /* 注释 */
        /* 选择器{css属性} */
        /* 选择器：查找标签 */
        p1{
            /* 文字颜色 */
            color: red;
            /* 字体 px：像素 */
            font-size: 30px;
            /* 背景色 */
            background-color: aqua;
            /* width height */
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p1>p1红色字体标签</p1>
</body>
</html>

引入方式

  1. 内嵌式：css 写在 style 标签中

    注意：style 标签通常写在 head 标签中

  2. 外联式：css 写在 一个单独的 .css 的文件中

    注意：需要通过 link 标签在网页中引入

  3. 行内式：css 写在标签的 style 属性中

    注意：配合 js 使用

    <title>引入式</title>
<!-- stylesheet：关系为样式表 -->
<link rel="stylesheet" href="引入式.css">

    <!-- 外联式：p1 -->
<p1>p1标签</p1>
<!--  行内式-->
<div style="color: green; font-size: 20px;">div标签</div>

    /* 选择器 {} */ p1 color: red;

基础选择器

1. 标签选择器

➢结构：标签名 {css 属性名：属性值；}

➢作用：通过标签名，找到页面中所有这类标签，设置样式

➢注意点:

  1. 标签选择器选择的是一 类标签， 而不是单独某一个

  2. 标签选择器无论嵌套关系有多深， 都能找到对应的标签

    基础选择器 /* 定义基础选择器 */ p { color: red; font-size: 66px; }

    标签选择器

2. 类选择器

➢结构: . 类名 {css 属性名：属性值；}

➢作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

➢注意点:

  1. 所有标签上都有 class 属性，class 属性的属性值称为类名 (类似于名字)

  2. 类名可以由数字、 字母、下划线、中划线组成，但不能以数字或者中划线开头

  3. 一 个标签可以同时有多个类名， 类名之间以空格隔开

  4. 类名可以重复，一个类选择器可以同时选中多个标签

    基础选择器 /* 定义类选择器 */ .red { color: red; } .size { font-size: 66px; } </style>

    普通p标签

    类选择器

    加了class

3. id 选择器

➢结构：#id 属性值 {css 属性名：属性值；}

➢作用：通过 id 属性值，找到页面中带有这个 id 属性值的标签，设置样式，配合 js 制作动态效果

➢注意点:

  1. 所有标签上都有 id 属性

  2. id 属性值类似于身份证号码， 在一个页面中是唯一的，不可重复的！

  3. 一个标签上只能有一个 id 属性值

  4. 一个 id 选择器只能选中一个标签

    id选择器 /* 定义id选择器 */ #blue { color: skyblue; }
    蓝色div

4. 通配符选择器

结构: * {css 属性名：属性值；}

作用：找到页面中所有的标签，设置样式

注意点:

  1. 开发中使用极少， 只会在极特殊情况下才会用到

  2. 小页面中可能会用于去除标签默认的 margin 和 padding (后续讲解)

    通配符 /* 定义通配符选择器 */ * { color:red; }

    p

    div

    h1

    span

字体和文本样式

1. 字体样式

  1. 字体大小：font-size 谷歌默认 16px

  2. 字体粗细：font-weight 正常 normal/400 加粗 blod/700

  3. 字体样式：font-style 倾斜 italic

  4. 字体类型：font-family

  5. 字体类型：font 属性连写

    字体样式 p { /* font-size: 18px; font-weight: 700; font-style: italic; font-family: 'Lucida Sans', 'Lucida Sans Regular', sans-serif; */ /* font: style weight size 字体; */ font: normal 700 66px 宋体; /* font: 66px 宋体; 省略style、weight为默认 */ font-style: italic; /* 一个属性冒号后面书写多个值：复合属性 */ } </style>

    Hello World

2. 文本样式

  1. 文本缩进：text-indent (1) 数字 + px (2) 数字 + em (推荐：1em = 当前标签 font-size 大小)

  2. 文本对齐方式：text-align left 左对齐 center 居中对齐 right 右对齐

  3. 文本修饰：text-decoration

    1. underline：下划线 (常用)
    2. line-through：删除线 (不常用)
    3. overline：上划线 (几乎不用)
    4. none：无装饰线 (常用)

    注意：开发中使用 text-decoration : none; 清除 a 标签默认的下划线

    文本样式 p { /* text-indent: 50px; */ /* 首行缩进两个字大小 */ text-indent: 2em; text-decoration: none; } h1 { text-align: left; text-align: right; text-align: center; } body { text-align: center; } /* 文本修饰 */ div { text-decoration: underline; } h2 { text-decoration: line-through; } h3 { text-decoration: overline; } a { text-decoration: none; } </style> 
    <img src="123/qingxun.png" alt="love choice">

<p>前女友分手的时候告诉我这个游戏的，认识7年，因为不合适分开，无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人，不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起，

    所以英梨梨就算十年前就认识伦也一样没有胜算，我们哪里有游戏里重来的机会，每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要，我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的，不过时也命也，人各有处，不必自缚。

        <!-- 文本修饰 -->
    <div>div</div>
    <p>ppp</p>
    <h2>h2</h2>
    <h3>上划线</h3>
    <a href="https://www.ytea.top" target="_blank">我是一个超链接</a>

3. 行高

line-height：控制一行的上下间距

取值：

  1. 数字 + px
  2. 倍数（当前标签 font-size 的倍数）

应用：

  1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
  2. 网页精准布局时， 会设置 line-height: 1 可以取消上下间距

行高与 font 连写的注意点：

  1. 如果同时设置了行高和 font 连写，注意覆盖问题

  2. 字体：样式粗细大小/行高系列 ;

    行高 p { font-weight: 600; font-family: 宋体; line-height: 50px; /* 60px 宋体 倾斜 加粗 行高2倍 */ font: italic 700 30px/2 宋体; } </style>

    英梨梨就算十年前就认识伦也一样没有胜算，我们哪里有游戏里重来的机会，每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要，我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的，不过时也命也，人各有处，不必自缚。

拓展

1. 颜色取值

颜色表示方式表示含义属性值关键词预定义的颜色名红、绿、蓝、 耶洛.....rgb 表示法红绿蓝三原色。每项取值范围: 0~255rgb（0,0,0）、rgb（255,255,255）、 r2550....rgba 表示法红绿蓝三原色 + a 表示透明度，取值范围是 0~1RGBA（255,255,255,0.5）、RGBA（255,0,0,0.3....十六进制表示法#开头，将数字转换成十六进制表示#000000、#f0000、 #e92322， 简写： #000、 #f00

2. 标签水平居中

方法总结：margin : 0 auto

让 div、p、h (大盒子) 水平居中：通过 margin : 0 auto ; 实现，其中 0 为上下间距，auto 为左右间距

注意：

  1. 如果需要让 div、 p、h (大盒子) 水平居中，直接给当前元素本身设置即可

  2. margin: 0 auto - 般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

    标签水平居中 div { width: 300px; height: 300px; background-color: pink; margin: 0 auto; }

实践与总结

学习和掌握CSS的基本语法及布局技巧有助于提高前端开发效率，优化网页设计。 HTML语义化和CSS布局技巧是现代前端开发中不可忽视的两项基本技能，它们不仅影响网页的外观，还能提高网页的可访问性、可维护性和SEO表现。 在实际开发中，推荐使用外部CSS文件进行样式管理，避免内联和内嵌样式的过度使用，保持代码的清晰和模块化。

avatar
文章
阅读
粉丝