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 文件名。


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

相关内容

热门资讯

安卓10系统省电不,安卓10系... 你有没有发现,自从升级到安卓10系统,手机续航能力好像大不如前了?别急,今天就来给你揭秘安卓10系统...
cm14安卓系统,深度定制与极... 你有没有发现,你的安卓手机最近是不是有点不一样了?是不是觉得系统运行得更加流畅,界面也更加美观了呢?...
平板安卓系统咋样升级,轻松实现... 你那平板安卓系统是不是有点儿卡,想给它来个升级大变身?别急,让我来给你详细说说平板安卓系统咋样升级,...
安卓原系统在哪下载,探索纯净体... 你有没有想过,为什么安卓手机那么受欢迎?那是因为它的系统——安卓原系统,它就像是一个充满活力的魔法师...
安卓系统procreate绘图... 你有没有发现,现在手机上画画变得越来越流行了?尤其是用安卓系统的手机,搭配上那个神奇的Procrea...
电视的安卓系统吗,探索安卓电视... 你有没有想过,家里的电视是不是也在悄悄地使用安卓系统呢?没错,就是那个我们手机上常用的安卓系统。今天...
苹果手机系统操作安卓,苹果iO... 你有没有发现,身边的朋友换手机的时候,总是对苹果和安卓两大阵营争论不休?今天,咱们就来聊聊这个话题,...
安卓系统换成苹果键盘,键盘切换... 你知道吗?最近我在想,要是把安卓系统的手机换成苹果的键盘,那会是怎样的体验呢?想象那是不是就像是在安...
小米操作系统跟安卓系统,深度解... 亲爱的读者们,你是否曾在手机上看到过“小米操作系统”和“安卓系统”这两个词,然后好奇它们之间有什么区...
miui算是安卓系统吗,深度定... 亲爱的读者,你是否曾在手机上看到过“MIUI”这个词,然后好奇地问自己:“这玩意儿是安卓系统吗?”今...
安卓系统开机启动应用,打造个性... 你有没有发现,每次打开安卓手机,那些应用就像小精灵一样,迫不及待地跳出来和你打招呼?没错,这就是安卓...
小米搭载安卓11系统,畅享智能... 你知道吗?最近小米的新机子可是火得一塌糊涂,而且听说它搭载了安卓11系统,这可真是让人眼前一亮呢!想...
安卓2.35系统软件,功能升级... 你知道吗?最近在安卓系统界,有个小家伙引起了不小的关注,它就是安卓2.35系统软件。这可不是什么新玩...
安卓系统设置来电拦截,轻松实现... 手机里总是突然响起那些不期而至的来电,有时候真是让人头疼不已。是不是你也想摆脱这种烦恼,让自己的手机...
专刷安卓手机系统,安卓手机系统... 你有没有想过,你的安卓手机系统是不是已经有点儿“老态龙钟”了呢?别急,别急,今天就来给你揭秘如何让你...
安卓系统照片储存位置,照片存储... 手机里的照片可是我们珍贵的回忆啊!但是,你知道吗?这些照片在安卓系统里藏得可深了呢!今天,就让我带你...
华为鸿蒙系统不如安卓,挑战安卓... 你有没有发现,最近手机圈里又掀起了一股热议?没错,就是华为鸿蒙系统和安卓系统的较量。很多人都在问,华...
安卓系统陌生电话群发,揭秘安卓... 你有没有遇到过这种情况?手机里突然冒出好多陌生的电话号码,而且还是一个接一个地打过来,简直让人摸不着...
ios 系统 安卓系统对比度,... 你有没有发现,手机的世界里,iOS系统和安卓系统就像是一对双胞胎,长得差不多,但细节上却各有各的特色...
安卓只恢复系统应用,重拾系统流... 你有没有遇到过这种情况?手机突然卡顿,或者某个应用突然罢工,你一气之下,直接开启了“恢复出厂设置”大...