javaEE 初阶 — CSS 的 基本语法 与 引入方式
创始人
2024-06-01 13:54:42
0

文章目录

  • 1. 基本语法规范
  • 2. 三种引入方式

1. 基本语法规范


CSS 的基本语法规范是由 选择器若干个声明 组成的。
选择器选中一个元素之后,这些属性都是针对于这个元素展开的。


先来看一个没有 CSS 的效果。

这是一个段落




可以看到此时只是显示出了内容,并没有什么特殊的效果,接下来我们引入 CSS代码。


这里的 style 标签可以放到任意位置,推荐的位置是 head 标签中。

这是一个段落


上述 style 标签里的 p 标签就是一个选择器,它所描述的就是当前代码中所有的 p 标签。
大括号里面的内容就是要针对这所有的 p 标签设置成什么样的属性。

上述的属性就是将字体颜色设置成 红色。



大括号里的 CSS 属性可以是一个或者多个,每个属性都是一个键值对
键和值之间使用 : 分割。键值对之间 ; 分割。每个键值对可以独占一行,也可以不独占一行。


下面来演示多个属性

这是一个段落


上述的 font-size 属性就是将字体大小设置为 40像素 。

2. 三种引入方式


1、内部样式

使用 style 标签,直接把 CSS 写到 html 文件当中,此时的 style 标签可以放到任意位置,一般建议的是放到 head 标签中。
这个方式在上述的 基础语法规范演示过了,下面不再演示。


2、内联样式

使用 style 属性针对指定的元素设置样式。(此时不需要写选择器,直接写属性键值对)
这个时候的样式只针对当前的元素有效。

这是一个段落

这是另一个段落


上述代码里的属性只针对第一个 p 标签有效,对于第二个 p 标签无效。



内部样式内联样式 冲突时,内联样式优先。



我真帅

这是一个段落

这是另一个段落




可以看到内部样式只对第二个 p 标签生效。


3、外部样式

把 CSS 文件单独作为一个**.css文件**,再通过 link 属性让 html 引入该 css 文件。



我真帅

这是一个段落

这是另一个段落


以下是 .css 文件,需要注意的是如果没有通过 link 属性引入,是不会起到作用的。



上述就是一个 .CSS文件




可以看到在以上并没有使用 link 属性引入这个文件的时候,此时不会有任何的效果。

link 属性也是建议写到 head 标签里面。

 


href 里填写的就是你的 .CSS 文件名。


可以看到此时就起了效果。

相关内容

热门资讯

11年奥德赛改安卓系统 哇,你有没有想过,一辆已经行驶了11年的奥德赛,竟然可以通过改装,焕发出新的活力?没错,就是将它的系...
原生安卓系统缺陷有哪些 亲爱的读者,你是否曾为安卓手机的流畅度而烦恼?你是否好奇过,为什么有些手机用起来那么顺滑,而你的手机...
江湖悠悠安卓跟苹果系统,安卓与... 江湖悠悠,安卓与苹果系统之争在这个信息爆炸的时代,手机已经成为了我们生活中不可或缺的一部分。而手机操...
安卓车机系统桌面崩溃,原因分析... 最近你的安卓车机系统是不是也遇到了桌面崩溃的烦恼?这可真是让人头疼啊!想象你正开着车,音乐播放得正h...
是不是安卓系统版本越高,体验更... 你有没有想过,是不是安卓系统版本越高,手机就越流畅呢?这个问题可是让不少手机用户纠结不已。今天,就让...
vivo安卓新系统怎么更新,体... 亲爱的手机控们,是不是最近你的vivo手机有点儿“老态龙钟”,运行速度慢了下来,界面也显得有点儿陈旧...
安卓系统输入法比较,功能、体验... 你有没有发现,手机里的输入法就像是我们日常生活中的小秘书,默默无闻地陪伴着我们打字、聊天、工作。而如...
安卓子系统看啥应用,探索“看啥... 你有没有想过,你的安卓手机里那些神秘的子系统里都藏着什么秘密?今天,就让我带你一探究竟,看看安卓子系...
安卓系统可用的王者符号 你有没有发现,最近手机上流行起了一种超酷的符号?没错,就是安卓系统上那些让人眼前一亮的王者符号!这些...
安卓系统切换ios系统还原,还... 你有没有想过,手机系统就像是我们生活中的衣服,有时候穿久了,就想换一件新的来换个心情。今天,就让我来...
原生安卓系统新消息显示,全新消... 亲爱的读者们,你是否也像我一样,对手机系统的新动态充满好奇?最近,关于原生安卓系统的新消息显示功能,...
安卓手机好用的手机系统,盘点那... 你有没有发现,现在市面上手机种类繁多,各种操作系统争奇斗艳,但要说最得人心的,还得是安卓手机系统。为...
kupa平板电脑刷安卓系统,畅... 你有没有想过,家里的老Kupa平板电脑,是不是也能焕发第二春呢?没错,就是那个陪伴你度过了无数悠闲时...
如何看网络密码安卓系统,网络密... 说到网络密码,这可是个让人又爱又恨的话题呢!你有没有想过,为什么你的安卓手机里那么多密码,有时候记都...
安卓系统许可证,解读其核心内容... 你知道吗?在智能手机的世界里,有一个神秘的“许可证”在默默守护着我们的安卓系统。它就像一位默默无闻的...
安卓系统hm的应用 你知道吗?在安卓系统的应用世界里,有一个叫做hm的应用,它可是隐藏着不少秘密呢!今天,就让我带你一起...
安卓系统ipad英文转换中文,... 你有没有想过,为什么安卓系统的iPad也能用英文呢?这背后可是有学问的哦!今天,就让我带你一探究竟,...
安卓系统哪个品牌手好,揭秘哪款... 你有没有想过,安卓系统里哪个品牌的手机用起来最得心应手呢?这个问题可真是让人纠结啊!市面上那么多品牌...
出厂安卓11系统手机,揭秘新一... 你有没有发现,最近市面上新出的手机,好像都换了个“新衣裳”?没错,就是那个传说中的出厂安卓11系统手...
升级安卓平板电脑系统 亲爱的平板电脑用户们,你是否也和我一样,对那台陪伴你多年的安卓平板电脑心生爱意,却又忍不住想要给它来...