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


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

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...