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

02 CSS基础入门

news 2026/2/9 21:30:55

文章目录

  • 一、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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2026/2/4 16:02:36

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29