当前位置： 首页 > news >正文

02 CSS基础入门

news 2026/2/9 21:37:37

文章目录

  • 一、CSS介绍
    • 1. 简介
    • 2. 相关网站
    • 3. HTML引入方式
  • 二、选择器
    • 1. 标签选择器
    • 2. 类选择器
    • 3. ID选择器
    • 4. 群组选择器
  • 四、样式
    • 1. 字体样式
    • 2. 文本样式
    • 3. 边框样式
    • 4. 表格样式
  • 五、模型和布局
    • 1. 盒子模型
    • 2. 网页布局

一、CSS介绍

1. 简介

CSS主要用于控制网页的外观，将网页的格式与内容分离。
通过使用CSS，网页可以精确地控制字体、颜色、布局、位置等元素，实现个性化的网页设计。
CSS样式可以直接存储在HTML网页中，也可以单独保存为外部样式表文件。

2. 相关网站

CSS 教程
CSS 参考手册

3. HTML引入方式

  • 外部引入
<link rel="stylesheet" href="CSS文件路径">
  • 内部引入
<style>
CSS具体内容，下面的例子都是内部引入
</style>
  • 行内引入
<标签 style=""></标签>
  • 引入方式的区别
引入方式位置作用范围
外部引入CSS写在单独的css文件中多个页面
外部引入CSS写在head头部style标签中当前页面
行内引入CSS写在标签的style属性中当前标签

二、选择器

1. 标签选择器

  • 通过标签名称，设置CSS样式
h2 {color: red;
}
  • 作用于
<h2>测试页面</h2>
  • HTML页面效果
    在这里插入图片描述

2. 类选择器

  • 通过类名称，设置CSS样式
.color-style {color: red;
}
  • 作用于
<h2 class="color-style">测试页面</h2>
  • HTML页面效果
    在这里插入图片描述

3. ID选择器

  • 通过ID名称，设置CSS样式
#idname {color: red;
}
  • 作用于
<h2 id="idname">测试页面</h2>
  • HTML页面效果
    在这里插入图片描述

4. 群组选择器

  • 查找符合条件的标签，设置CSS样式
p,h2 {color: red;
}
  • 作用于
<h2>测试页面</h2>
<p>测试段落</p>
  • HTML页面效果
    在这里插入图片描述

四、样式

1. 字体样式

h2 {font-family: Arial;font-size: 30px;font-weight: bold;font-style: italic;color: #000000;
}
  • 作用于
<h2>测试页面</h2>
  • HTML页面效果
    在这里插入图片描述
  • font-family 字体类型
  • font-size 字体大小
  • font-weight 字体粗细
  • font-style 字体风格
  • color 字体颜色

2. 文本样式

h2 {text-align: center;text-decoration: line-throught;line-height: 36px;
}
  • 作用于
<h2>测试页面</h2>
  • HTML页面效果
    在这里插入图片描述
  • text-align 水平对齐 left center right
  • text-decoration 文本修饰 underline line-throught overline
  • line-height 行高

3. 边框样式

h2 {border-width: 1px;border-style: dashed;border-color: red;
}
  • 作用于
<h2>测试页面</h2>
  • HTML页面效果
    在这里插入图片描述
  • border-width 边框宽度
  • border-style 边框外观 dashed solid
  • border-color 边框颜色

4. 表格样式

table,tr,th,td {border: 1px solid;
}
table {caption-side: top;border-collapse: separate;border-spacing: 6px;
}
  • 作用于
<table><caption>表格</caption><tbody><tr><td>姓名</td><td>性别</td></tr><tr><td>张三</td><td>男</td></tr></tbody>
</table>

  • HTML页面效果
    在这里插入图片描述

  • caption-side 表格标题位置 top bottom

  • border-collapse 表格边框合并 separate collapse

  • border-spacing 表格边框间距

五、模型和布局

1. 盒子模型

h2 {width: 300px;overflow: scroll;text-align: center;border: 25px solid green;padding: 25px 25px 25px 25px;margin: 25px 25px 25px 25px;
}
  • 作用于
<h2>测试页面</h2>
  • HTML页面效果
    在这里插入图片描述
  • 所有HTML元素可以看作盒子，包括：边距，边框，填充，实际内容
  • margin 外边距 上像素值 右像素值 下像素值 左像素值
  • padding 内边距 上像素值 右像素值 下像素值 左像素值
  • content 内容区 width height overflow
    在这里插入图片描述

  • 2. 网页布局

.header,.footer{width: 500px;height: 60px;background: green;
}
.topnav {width: 500px;height: 50px;background: red;
}
.main{width: 500px;height: 300px;background: blue;}
.left,.right{background: #c9e143;width: 100px;height: 300px;
}
.left{float: left;
}
.right{float: right;
}
  • 作用于
<body><div class="header"></div><div class="topnav"></div><div class="main"><div class="left"></div><div class="right"></div></div><div class="footer"></div>
</body>
  • HTML页面效果
    在这里插入图片描述

相关文章：

02 CSS基础入门

文章目录 一、CSS介绍1. 简介2. 相关网站3. HTML引入方式 二、选择器1. 标签选择器2. 类选择器3. ID选择器4. 群组选择器 四、样式1. 字体样式2. 文本样式3. 边框样式4. 表格样式 五、模型和布局1. 盒子模型2. 网页布局 一、CSS介绍 1. 简介 CSS主要用于控制网页的外观&#…...

编程日记 2023/12/13 20:07:05

MyBatis框架中的5种设计模式总结

前言 MyBatis框架中使用的5种设计模式分别是&#xff1a;1、建造者模式&#xff08;生成器模式&#xff09;。2、工厂模式。3、单例模式。4、代理模式。5、适配器模式。 1、建造者模式&#xff08;生成器模式&#xff09; 在MyBatis环境的初始化过程中&#xff0c;SqlSessio…...

编程日记 2023/12/13 20:05:03

ffmpeg相关命令

视频转码 dav转化为mp4格式 ffmpeg -i 2021-08-10.dav -codec copy 11.mp4二进制文件转为mp4格式 // -c:v 指定视频流编码器&#xff0c;不指定编码会默认用mp4这种容器的默认音视频编码进入编码 // copy&#xff1a;不重新编码直接copy源视频流ffmpeg -i 1701687125-4fc72a…...

编程日记 2023/12/13 20:04:02

锂电3V升12V1A升压芯片WT3209

锂电3V升12V1A升压芯片WT3209 WT3209是一款高功率密度全集成BOOST升压转换器&#xff0c;具备高效能解决方案。3V升12V1A,5V升12V1A WT3209内部集成的功率MOSFET管导通电阻为上管13mΩ和下管11mΩ&#xff0c;具备2A开关电流能力&#xff0c;并且能够提供高达12.6V的输出电压。…...

编程日记 2023/12/13 20:03:01

Unity 置顶OpenFileDialog文件选择框

置顶文件选择框 &#x1f32d;处理前&#x1f959;处理后 &#x1f32d;处理前 &#x1f959;处理后 解决方案...

编程日记 2023/12/13 19:59:59

oomall课堂笔记

一、项目分层结构介绍 controller层&#xff08;控制器层&#xff09;&#xff1a; 作用&#xff1a;负责输出和输入&#xff0c;接收前端数据&#xff0c;把结果返回给前端。 1.处理用户请求&#xff0c;接收用户参数 2.调用service层处理业务&#xff0c;返回响应 servi…...

编程日记 2023/12/13 19:56:57

Qt6.5类库实例大全：QFrame

哈喽大家好&#xff0c;我是20YC小二&#xff01;欢迎扫码关注公众号&#xff0c;现在可免费领取《C程序员》在线视频教程哦&#xff01; ~下面开始今天的分享内容~ 1. QFrame介绍 QFrame是Qt框架中的一个框架控件类&#xff0c;主要用于在图形用户界面(GUI)中创建框架&#…...

编程日记 2023/12/13 19:55:56

Java 数据结构篇-用数组、堆实现优先级队列

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 优先级队列说明 2.0 用数组实现优先级队列 3.0 无序数组实现优先级队列 3.1 无序数组实现优先级队列 - 入队列 offer(E value) 3.2 无序数组实现优先级队列 - 出…...

编程日记 2023/12/13 19:54:54

Reactor模型

目录 1.Reactor模型是什么2.Reactor 模型应用场景3.使用 Reactor 模型的软件4.Reactor 模型 与 Actor 模型 的关系 本文主要介绍Reactor模型基本概念以及应用场景。 1.Reactor模型是什么 Reactor模型是一种事件驱动的设计模式&#xff0c;用于处理服务请求&#xff0c;它是由…...

编程日记 2023/12/13 19:53:53

【SpringCloud】通过Redis手动更新Ribbon缓存来解决Eureka微服务架构中服务下线感知的问题

文章目录 前言1.第一次尝试1.1服务被调用方更新1.2压测第一次尝试1.3 问题分析1.4 同步的不是最新列表 2.第二次尝试2.1调用方过滤下线服务2.2压测第二次尝试2.3优化 写到最后 前言 在上文的基础上&#xff0c;通过压测的结果可以看出&#xff0c;使用DiscoveryManager下线服务…...

编程日记 2023/12/13 19:51:51

如何做好性能压测？压测环境设计和搭建的7个步骤你知道吗？

简介&#xff1a;一般来说&#xff0c;保证执行性能压测的环境和生产环境高度一致是执行一次有效性能压测的首要原则。有时候&#xff0c;即便是压测环境和生产环境有很细微的差别&#xff0c;都有可能导致整个压测活动评测出来的结果不准确。 1. 性能环境要考虑的要素 1.1 系…...

编程日记 2023/12/13 19:49:48

Qt12.13

...

编程日记 2023/12/13 19:48:47

目标检测YOLO系列从入门到精通技术详解100篇-【目标检测】SLAM（基础篇）（五）

目录 前言 几个相关概念 双目视惯雷达SLAM 相关工作 系统综述 视觉前端...

编程日记 2023/12/13 19:47:46

鸿蒙开发之页面与组件生命周期

一、页面间的跳转 创建文件的时候记得选择创建page文件&#xff0c;这样就可以在main->resources->profile->main_pages.json中自动形成页面对应的路由了。如果创建的时候你选择了ArkTS文件&#xff0c;那么需要手动修改main_pages.json文件中&#xff0c;添加相应的…...

编程日记 2023/12/13 19:46:45

Kotlin开发之低功耗蓝牙（引用三方库）的详解一

在我们工作中&#xff0c;如果涉及到软硬结合&#xff0c;经常会用到蓝牙&#xff0c;而蓝牙有两种&#xff1a;一种是普通的蓝牙&#xff0c;一种是低功耗的蓝牙&#xff0c;今天我们主要讲解的是低功耗蓝牙&#xff1a;主要根据第三方库进行的讲解 第一步&#xff1a;在使用…...

编程日记 2023/12/13 19:43:43

5G/4G工业DTU扬尘在线监测：解决工地扬尘困扰的最佳方案

在如今快速发展的工业环境中&#xff0c;扬尘污染成为了一个严重的问题。工地扬尘不仅对环境造成污染&#xff0c;还对工作人员的健康产生负面影响。为了解决这一问题&#xff0c;5G/4G工业DTU扬尘在线监测应运而生。 5G/4G工业DTU扬尘在线监测原理 5G/4G工业DTU扬尘在线监测是…...

编程日记 2023/12/13 19:42:42

思源黑体某些字显示成日式中文，太先进了（附解法）

由于字体版权问题&#xff0c;公司外发的材料一般都需要把字体换成“思源黑体”才可以。 很久以前下载过显示为“Noto Sans CJK”的思源黑&#xff0c;后来改成了“SourceHanSans”&#xff0c;一直以为自己的思源黑体是正常的。 然后问题来了&#xff1a;在替换ppt里的字体后…...

编程日记 2023/12/13 19:32:31

.NET医院检验系统LIS源码，使用了oracle数据库,保证数据的隔离和安全性

医院检验系统LIS源码&#xff0c;LIS系统全套商业源码 LIS系统实现了实验室人力资源管理、标本管理、日常事务管理、网络管理、检验数据管理&#xff08;采集、传输、处理、输出、发布&#xff09;、报表管理过程的自动化&#xff0c;使实验室的操作人员和管理者从繁杂的手工劳…...

编程日记 2023/12/13 19:30:30

html实现动漫视频网站模板源码

文章目录 1.视频设计来源1.1 主界面1.2 动漫、电视剧、电影视频界面1.3 播放视频界面1.4 娱乐前线新闻界面1.5 关于我们界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/detail…...

编程日记 2023/12/13 19:29:29

python zblog API实现类似XMLRPC/发布文章

我发现python对Zblog的XML发布并不友好&#xff0c;虽然也有对应的模块&#xff0c;但是远远没有XPCRPC更直接方便&#xff0c;但是使用xmlRpc是直接给发布文章带来了不小的便利&#xff0c;但是对系统也并不友好&#xff0c;但是zblog也开放了Api&#xff0c;但是干部子弟不乐…...

编程日记 2023/12/13 19:26:26

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2026/1/26 9:07:56

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

编程新知 2025/9/12 8:55:56

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

编程新知 2025/11/28 7:53:17

用鸿蒙HarmonyOS5实现国际象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的国际象棋小游戏的完整实现代码&#xff0c;使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├── …...

编程新知 2025/8/21 20:40:56