百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

css篇一 什么是css、css的作用以及css的基本格式

liuian 2025-04-26 19:23 35 浏览

一、什么是css

css的英文全称是：Cascading Style Sheets，翻译过来叫：层叠样式表。

这其中有两个关键字，一个是层叠一个是样式。

样式指的是给html调整样式

层叠指的是可以叠加调整，给一个html的a标签指定5条样式，5条样式叠加起来作用到html的标签上。

举个更容易理解的例子：（在index.html中写一个a标签）

用css给a标签加样式，一共加了五条，具体看图片中的注释。

5条样式都加到了a标签上面，都生效，这就是层叠的意思了。

二、css的作用

从上面的例子中也可以明显地感受到，css的主要作用就是美化html的。使用css可以让html变得更加的丰富多彩。如果学了JavaScript的话就可以让html动起来。


在正式开讲css前，先补充一点关于sublime text的快捷使用方法，这样我们写代码的速度就会变得快起来。

如果还有不知道sublime text是什么的同学，可以返回头去看看《踏上编程之路的必经之路之html篇二》，其中用动图的方式仔细讲解了如何下载它。


在sublime text这款编辑器里面可以快速生成html的主要结构（头部、体部），接下来看动图演示：



没错，只要输入一个“!”，按tab键就能快速生成html的主要结构代码了（下图红框的框住的就是tab键）

除了可以快速生成上面代码，还以快速生成经常使用的各种标签代码：（如下图演示）

如果你要写一个a标签，只需要写a再按tab键，sublime text就会自动给你补全代码。

当然了，还有更快捷的

（接下来快捷生成<a href="https://www.baidu.com">百度</a>）

在“[]”里面写要给a标签添加的属性，在{}里面写a标签的文字。如果有多个属性的就写两个“[]”。

具体看动图演示：

接下来再看看ul和li标签如何快速生成（ul里面包含5个li）

新闻后面的$用于生成一个序号，当然你也可以不写，也可以写两个，写两个的话生成的就会是新闻01、新闻02


在sublime text中只要是html的标签就可以快捷生成，那在来试一试table

我们学过很多的html标签，你都可以拿来尝试一下，要想事半功倍，熟练使用sublime text是个有效的途径。

三、css的基本格式


在css的初始阶段，建议大家把css代码写在html的head标签中。


css代码的样式代码写在style标签中。


具体看一下图：


写一个a标签，让a标签中的字变为红色

在style中写css代码，没有style，是不会有效果的。style可以写在任意位置，但是为了代码规范，约定俗成都写在head标签中。


style中我们先要指定给哪一个标签添加样式，这里我们指定了a。这种方式也叫做css选择器，就是你要给谁添加样式，你得先指定或者选定一个标签，然后再写你要添加的样式代码。我们这里选定a，给a添加字体变红的的样式。


上面代码在浏览器中的效果如下：

好了，今天的内容就这么多。记得要勤动手练习。

相关推荐

eino v0.4.5版本深度解析:接口类型处理优化与错误机制全面升级

近日，eino框架发布了v0.4.5版本，该版本在错误处理、类型安全、流处理机制以及代理配置注释等方面进行了多项优化与修复。本次更新共包含6个提交，涉及10个文件的修改，由2位贡献者共同完成。本文将详...

SpringBoot异常处理_springboot异常注解

在SpringBoot中，异常处理是构建健壮、可维护Web应用的关键部分。良好的异常处理机制可以统一返回格式、提升用户体验、便于调试和监控。以下是SpringBoot中处理异常的完整指...

Jenkins运维之路(Jenkins流水线改造Day02-1-容器项目)

这回对线上容器服务器的流水线进行了一定的改造来满足目前线上的需求，还是会将所有的自动化脚本都放置到代码库中统一管理，我感觉一章不一定写的完，所以先给标题加了个-1，话不多说开干1.本次流水线的流程设计...

告别宕机!零基础搭建服务器监控告警系统!小白也能学会!

前言本文将带你从零开始，一步步搭建一个完整的服务器指标监控与邮件告警系统，使用的技术栈均为业界主流、稳定可靠的开源工具：Prometheus：云原生时代的监控王者，擅长指标采集与告警规则定义Node_...

httprunner实战接口测试笔记，拿走不谢

每天进步一点点，关注我们哦，每天分享测试技术文章本文章出自【码同学软件测试】码同学公众号：自动化软件测试码同学抖音号：小码哥聊软件测试01开始安装跟创建项目pipinstallhttprunne...

基于JMeter的性能压测平台实现_jmeter压测方案

这篇文章已经是两年前写的，短短两年时间，JMeter开源应用技术的发展已经是翻天覆地，最初由github开源项目zyanycall/stressTestPlatform形成的这款测试工具也开始慢...

12K+ Star!新一代的开源持续测试工具!

大家好，我是Java陈序员。在企业软件研发的持续交付流程中，测试环节往往是影响效率的关键瓶颈，用例管理混乱、接口调试复杂、团队协作不畅、与DevOps流程脱节等问题都能影响软件交付。今天，给大家...

Spring Boot3 中分库分表之后如何合并查询

在当今互联网应用飞速发展的时代，数据量呈爆发式增长。对于互联网软件开发人员而言，如何高效管理和查询海量数据成为了一项关键挑战。分库分表技术应运而生，它能有效缓解单库单表数据量过大带来的性能瓶颈。而在...

离线在docker镜像方式部署ragflow0.17.2

经常项目上会出现不能连外网的情况，要怎么使用ragflow镜像部署呢，这里提供详细的步骤。1、下载基础镜像根据docker-compose-base.yml及docker-compose.yml中的i...

看，教你手写一个最简单的SpringBoot Starter

何为Starter？想必大家都使用过SpringBoot，在SpringBoot项目中，使用最多的无非就是各种各样的Starter了。那何为Starter呢？你可以理解为一个可拔插式...

《群星stellaris》军事基地跳出怎么办?解决方法一览

《群星stellaris》军事基地跳出情况有些小伙伴出现过这种情况，究竟该怎么解决呢？玩家“gmjdadk”分享的自己的解决方法，看看能不能解决。我用英文原版、德语、法语和俄语四个版本对比了一下，结果...

数据开发工具dbt手拉手教程-03.定义数据源模型

本章节介绍在dbt项目中，如何定义数据源模型。定义并引入数据源通过Extract和Load方式加载到仓库中的数据，可以使用dbt中的sources组件进行定义和描述。通过在dbt中将这些数据集(表)声...

docker compose 常用命令手册_docker-compose init

以下是DockerCompose常用命令手册，按生命周期管理、服务运维、构建配置、扩缩容、调试工具分类，附带参数解析、示例和关键说明，覆盖多容器编排核心场景：一、生命周期管理（核心命令...

RagFlow与DeepSeek R1本地知识库搭建详细步骤及代码实现

一、环境准备硬件要求独立显卡（建议NVIDIAGPU，8GB显存以上）内存16GB以上，推荐32GB（处理大规模文档时更高效）SSD硬盘（加速文档解析与检索）软件安装bash#必装组件Docker...

Docker Compose 配置更新指南_docker-compose配置

高效管理容器配置变更的最佳实践方法重启范围保留数据卷适用场景docker-composeup-d变更的服务常规配置更新--force-recreate指定/所有服务强制重建down→up流程...

一周热门
最近发表
标签列表