百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-05-22 14:54 6 浏览

一、什么是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添加字体变红的的样式。


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

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

相关推荐

办公小技巧:杜绝意外 让字体永不丢失

当精心编辑的文档，在其它电脑上打开时，最常见的问题就是页数增加了，表格被撑破了，有些严重的甚至会出现乱码……为什么会这样呢？究其根源都是因为缺少相应的字体。本文介绍各类文档中（包括Word文档、PPT...

网站速度优化:从10秒到2秒的极致性能提升方案

核心内容：性能诊断工具：PageSpeedInsights与Lighthouse的评分差异解读。WebPageTest多地区、多设备性能对比。前端优化：CSS/JS压缩与合并的自动化方案（如Webp...

如何在WordPress中删除谷歌字体(2种简单方法)

许多WordPress主题都会用Google字体，然而，Google字体并不存储在网站本地，它是一个第三方资源，这会影响网站的加载速度，让网站变慢，尤其当你的网站面向的是国内用户时，更需要禁用Goog...

2019年免费可商用字体大全(附打包下载)

私信“字体”可免费获得。附送一个几十G的，有商业授权要求的字体包！不说那么复杂了，简单讲，可能你下载的大多数字体都是收费的。比如方正、文鼎、汉仪等的90%以上需要商业授权，甚至个人授权。这儿的授权，指...

开源免费、美观实用的后台管理系统模版，简单轻量、开箱即用!

项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模版，专注于用户体验和快速开发的开源后台管理解决方案。基于ElementPlus设计...

【推荐】一款开源免费、美观实用的后台管理系统模版

如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模...

想要字体图标设计师却给了SVG?没关系，自己转

本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。Varlet提供了一些常用的图标，图标都来自Mater...

零基础教你学前端——66、CSS谷歌字体和Icon图标

我们学习CSS谷歌字体和CSSIcon图标。我们在应用font-family属性声明样式字体时，除了使用HTML中的标准字体外，还可以使用谷歌字体。谷歌字体是免费使用的，并且有1000多种字体...

必须掌握的前端开发基础知识，什么是字体图标?

必须掌握的前端开发基础知识,什么是字体图标?显示隐藏元素display显示隐藏none隐藏block显示隐藏后不再占有原来的位置visibility隐藏元素后,继续占有原来的位置visible元...

让你的网站速度提升10倍!(四):压缩~~~

在前面的内容中讲了如何降低页面大小（给页面瘦身）,重点讲的是如何优化图片，而没有讲文本内容如何优化，这是因为与其辛苦的优化文本还不如使用我们的秘密武器：Gzip压缩！如果你还不清楚Gzip是什么，看这...

MFC转QT - Qt界面开发 - 常用控件

基础控件(QPushButton,QLabel,QLineEdit等)按钮控件族Qt提供了丰富的按钮控件，比MFC的按钮控件更加细分和功能丰富。QPushButton（标准按钮）//创建按钮...

使用CSS实现苹果官网文字渐入效果

效果分析文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。渐变文字渐变文字该如何实现呢？这是实现这个效果的关键...

HarmonyOS NEXT - ArkUI: Text组件

Text组件用于在界面上展示一段文本信息，可以包含子组件Span。文本样式包含文本元素的组件，例如Text、Span、Button、TextInput等，都可以使用文本样式。文本样式的属性如下表：.f...

计算机网络的 166 个核心概念，你知道吗?

上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...

软网推荐:请个多功能纯文本管理助手

纯文本不单是指常用的语言文字，还包括各种类型的程序代码、编码等。作为常用的纯文本处理工具，“记事本”显得力不从心。我们可用一款免费软件AlternateTextbrowser，随心所欲地管理各种类型...

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