百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

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

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

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


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

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

相关推荐

电脑最高配置是什么配置2025

一,2023最新主流电脑装机配置如下。二,处理器可以使用十二代的i512400或者i512490f,内存16gb双通道,显卡rtx3060,主板可以使用b660m或者h610m。三,如果十三代酷睿...

MySQL慢查询优化:从explain到索引,DBA手把手教你提升10倍性能

数据库性能是应用系统的生命线,而慢查询就像隐藏在系统中的定时炸弹。某电商平台曾因一条未优化的SQL导致订单系统响应时间从200ms飙升至8秒,最终引发用户投诉和订单流失。今天我们就来系统学习MySQL...

一文读懂SQL五大操作类别(DDL/DML/DQL/DCL/TCL)的基础语法

在SQL中,DDL、DML、DQL、DCL、TCL是按操作类型划分的五大核心语言类别,缩写及简介如下:DDL(DataDefinitionLanguage,数据定义语言):用于定义和管理数据库结构...

闲来无事,学学Mysql增、删,改,查

Mysql增、删,改,查1“增”——添加数据1.1为表中所有字段添加数据1.1.1INSERT语句中指定所有字段名语法:INSERTINTO表名(字段名1,字段名2,…)VALUES(值1...

数据库:MySQL 高性能优化规范建议

数据库命令规范所有数据库对象名称必须使用小写字母并用下划线分割所有数据库对象名称禁止使用MySQL保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来)数据库对象的命名要能做到见名识意,...

下载工具合集_下载工具手机版

迅雷,在国内的下载地位还是很难撼动的,所需要用到的地方还挺多。缺点就是不开会员,软件会限速。EagleGet,全能下载管理器,支持HTTP(S)FTPMMSRTSP协议,也可以使用浏览器扩展检测...

mediamtx v1.15.2 更新详解:功能优化与问题修复

mediamtxv1.15.2已于2025年10月14日发布,本次更新在功能、性能优化以及问题修复方面带来了多项改进,同时也更新了部分依赖库并提升了安全性。以下为本次更新的详细内容:...

声学成像仪:泄露监测 “雷达” 方案开启精准防控

声学成像仪背景将声像图与阵列上配装的摄像实所拍的视频图像以透明的方式叠合在一起,就形成了可直观分析被测物产生状态。这种利用声学、电子学和信息处理等技术,变换成人眼可见的图像的技术可以帮助人们直观地认识...

最稳存储方案:两种方法将摄像头接入威联通Qu405,录像不再丢失

今年我家至少被4位邻居敲门,就是为了查监控!!!原因是小区内部监控很早就停止维护了,半夜老有小黄毛掰车门偷东西,还有闲的没事划车的,车主损失不小,我家很早就配备监控了,人来亮灯有一定威慑力,不过监控设...

离岗检测算法_离岗检查内容

一、研发背景如今社会许多岗位是严禁随意脱离岗位的,如塔台、保安室、监狱狱警监控室等等,因为此类行为可能会引起重大事故,而此类岗位监督管理又有一定困难,因此促生了智能视频识别系统的出现。二、产品概述及工...

消防安全通道占用检测报警系统_消防安全通道占用检测报警系统的作用

一、产品概述科缔欧消防安全通道占用检测报警系统,是创新行业智能监督管理方式、完善监管部门动态监控及预警预报体系的信息化手段,是实现平台远程监控由“人为监控”向“智能监控”转变的必要手段。产品致力于设...

外出住酒店、民宿如何使用手机检测隐藏的监控摄像头

最近,一个家庭在他们的民宿收到了一个大惊喜:客厅里有一个伪装成烟雾探测器的隐藏摄像头,监视着他们的一举一动。隐藏摄像头的存在如果您住在酒店或民宿,隐藏摄像头不应再是您的担忧。对于民宿,房东应报告所有可...

基于Tilera众核平台的流媒体流量发生系统的设计

曾帅,高宗彬,赵国锋(重庆邮电大学通信与信息工程学院,重庆400065)摘要:设计了一种基于Tilera众核平台高强度的流媒体流量发生系统架构,其主要包括:系统界面管理模块、服务承载模块和流媒体...

使用ffmpeg将rtsp流转流实现h5端播放

1.主要实现rtsp转tcp协议视频流播放ffmpeg下载安装(公认业界视频处理大佬)a、官网地址:www.ffmpeg.org/b、gitHub:github.com/FFmpeg/FFmp…c、推...

将摄像头视频流从Rtsp协议转为websocket协议

写在前面很多通过摄像头拿到的视频流格式都是Rtsp协议的,比如:海康威视摄像头。在现代的浏览器中,已经不支持直接播放Rtsp视频流,而且,海康威视提供的本身的webSdk3.3.0视频插件有很多...