css篇一 什么是css、css的作用以及css的基本格式
zhezhongyun 2025-05-22 14:54 17 浏览
一、什么是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添加字体变红的的样式。
上面代码在浏览器中的效果如下：
好了，今天的内容就这么多。记得要勤动手练习。
相关推荐
- Flutter TextField 边框样式以及提示文本
-
题记——执剑天涯，从你的点滴积累开始，所及之处，必精益求精。1引言1.1情景一一个文本框默认情况下可编辑（允许输入文本的情况）获取焦点（正在输入文本）下，会有默认的一个下划线，这个下划线的颜...
- 让最懂产品的人成为销售员 亿家净水试水“微分销”
-
国内领先的净水设备服务供应商亿家净水开始试水“微分销”，借助第三方微分销平台——有赞建立的亿家净水微商城近日已经开通。根据规划，下一步将把公司300多名员工以及遍布全国的6000多名安装服务工程师纳入...
- 案例分享丨各品牌软水机和中央净水机的旁通阀介绍、区分辨认和使
-
案例：前几天接到一个浙江的客户反馈，他说凯优的软水机安装后加的盐，使用4、5年了一直没加过盐到现在盐还是那么多，客户以前以为加完盐后能管好长时间就没把软水机当回事，最近听朋友说软水机需要定期加盐客户...
- 一文教你Java字符串处理(String，StringBuffer，StringBuild)
-
前言本文篇幅较长，但都是满满的干货，请大家耐心观看，相信会有不小的收获。本人在总结的过程中也收获了很多的知识，也希望大家可以一起借鉴学习下，希望大家最后都能有所收获！再言字符串的分类在java.lan...
- 浏览器渲染引擎之从入门到优化实践
-
在当今互联网时代，浏览器扮演着人们访问网页和应用程序的主要工具。当我们在浏览网页的时候，页面的展示和交互都是依靠浏览器进行实现的。所以浏览器的表现和性能直接影响着用户的体验。为了提供快速且高效的浏览体...
- NAVI S1mple准星+视角+持枪控制台设置大全 新增显示器设置
-
简单男孩S1mple科斯特利耶夫（AleksandrKostyliev）生日1997年10月2日准星设置cl_crosshairalpha255;cl_crosshaircolor5;cl...
- 2014福布斯全球名人榜:女王碧昂斯登顶 李娜85
-
最近，有一篇名为《浙商炮轰马云：若不改作风，5年内必倒》的文章，在网络和自媒体上流传甚广，引起广泛关注。这篇文章是怎样出炉的？针对这个问题，《浙商》杂志记者进行了调查。2014福布斯全球名人榜前20人...
- 美国处女河中有一条步道，全程只有25公里
-
美国<:articlestyle="BOX-SIZING:border-box;BORDER-BOTTOM:0px;TEXT-ALIGN:left;BORDER-LEFT:0px...
- Unreal丨模块化路牌蓝图制作（路牌模型）
-
本期文章介绍使用虚幻蓝图制作一个模块化的路牌，先来看一下完成后的效果。如图，这些路牌全部是使用同一个蓝图制作的资产。1素材准备基础的路牌模型我使用的是虚幻商城中的资产“FreewayProps”。然...
- 神奇白Tee加减法，1+1>2（equal tee是什么管件）
-
来源：时尚芭莎说到炎炎夏日，除了空调、冰棍、西瓜、网络是缺一不可的以外，衣柜里怎么能少一件白Tee呢？2"style="text-decoration:none;outline:none;c...
- 跟着快联电路学习PCB设计的六个过程
-
PADS是一种常用的PCB设计软件，作为PCB设计工程师，必须掌握熟练应用的设计工具。与AD相比，PADS在开始和设计上相对复杂，需要更多的耐心和时间。在使用PADS设计PCB的过程中，需要关注印刷板...
- Allegro软件中怎么通过ROOM框来放置元器件呢?
-
上述我们讲解了怎么快速的将元器件放置在PCB板上，通过图6-40所示的图可以看出，器件放置的都是很零散的，不是按模块或者是按页放置的，这里给大家介绍一些，通过在原理图添加ROOM属性，然后通过ROOM...
- 电路设计入门-从DXP2004双闪灯电路设计开始
-
DXP2004！？为什么要用这么老的版本呢？因为DXP2004是最经典的版本！protel是最原始的版本，版本包括protelforDOS，protel98，protel99se；后面prte...
- 小幅改进 微软或启用Outlook Mail品牌
-
去年十月微软就对Outlook.com及相关网站进行了改版，改进了下拉菜单，使得用户能够在微软相关的服务，比如OneDrive以及OfficeOnline之间切换。不过现在看来，微软似乎准备再一次对...
- 将多个属性传递给 Vue 组件的几种方式
-
所有使用基于组件的体系结构(如Vue和React)的开发人员都知道，创建可重用组件是很困难的，而且大多数情况下，最终会通过传入大量的属性，以便从外部更容易地控制和自定义组件。这并不坏，但是传递大量属性...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)