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

02 CSS基础入门

news 2025/11/5 21:58:34

文章目录

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/11/4 21:14:04

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/11/4 17:18:52

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/11/3 3:43:05

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/10/10 10:23:21

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/10/30 3:39:37

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/10/30 3:39:11

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/10/24 13:36:43

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/11/1 1:15:01

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

编程新知 2025/10/31 21:45:23

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2025/10/31 12:22:46