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

02 CSS基础入门

news 2025/9/12 8:57:33

文章目录

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/8/17 16:33:04

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/9/8 2:13:23

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/7/31 23:29:01

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/9/10 1:53:18

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/9/10 7:13:28

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/9 1:34:25

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/7/5 19:39:42

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2025/9/9 10:08:54