0

0

进一步完善造型

PHPz

PHPz

发布时间:2024-07-09 19:13:01

|

857人浏览过

|

来源于dev.to

转载

进一步完善造型

嘿,欢迎回到边学边编码:HTML 和 CSS!今天,我们将深入探讨造型的世界。到目前为止,我们一直在直接设计元素的样式。但是,如果您有两个

元素并且希望每个元素看起来不同怎么办?输入 CSS 选择器!

元素选择器

您已经熟悉这些,但让我们回顾一下:

h1 {
  字体大小:32px;
  字体系列:Arial;
  字体粗细:500;
}

此规则集针对所有

元素,设置其字体大小、系列和粗细。元素选择器非常适合大纲,例如为整个页面设置样式指南。但让我们面对现实吧,并非所有

标签都应该看起来相同。对于更具体的造型,我们需要加强我们的游戏!

类选择器

课程来拯救!想要两个

标签看起来不同吗?添加课程:

这个文字又大又红。

此文本很小,呈蓝色。

每个

标签都有两个类。在 CSS 中,使用 .:
定位这些类

.大{
  字体大小:100px;
}

。小的 {
  字体大小:9px;
}

。红色的 {
  红色;
}

。蓝色的 {
  颜色: 蓝色;
}

繁荣!应用样式。您可能会问,“为什么不将样式合并到更少的类中呢?”好问题!我喜欢保持课程的灵活性。你永远不知道什么时候你会想重复使用没有蓝色的小东西。

ID选择器

对于唯一元素,请使用 ID。看看这个:

我的名字是诺兰!

谨慎使用 ID,每页仅使用一次。在 CSS 中使用 #:
定位它们

#name {
  文本装饰:下划线;
}

简单吧?

MTTSHOP包包免费商城系统
MTTSHOP包包免费商城系统

一款非常包包、衣服、鞋子类网站,页面干净清洁、一目了然,mttshop打造精致、简单、易用、免费的商城。 系统要求:IIS5.1以后,必须安装.net 3.5 安装步骤: 1、下载完成后,直接解压文件mttshop.rar 2、附加数据库:解压后的可以找一个叫db的文件夹,解压后直接附加就可以,支持SQL 2000、2005、2008 3、配置web.config文件,找到key=&qu

下载

风格冲突

现在,如果一个元素同时具有类和 ID 会怎样?像这样:

我会是红色还是蓝色?

会变红的!为什么?因为 ID 比类更具体。这是一个简单的例子:

我的风格由三个规则集决定!

p {
  字体大小:12px;
  颜色:黑色;
  文本装饰:无;
}

.下划线{
  文本装饰:下划线;
}

#红色的 {
  红色;
}

文字变成红色并带有下划线,字体大小为12px。 ID 胜过类,而类又会覆盖元素选择器。这种级联样式使您的页面看起来很优雅,无需重复代码。

挑战

是时候升级您的“关于我”页面了!这是你的使命:

  • 使用元素选择器设置

    的默认样式。

  • 使用

    标签在您的名字下添加标语,并使用 ID 对其进行样式设置。

  • 使用类选择器让其他文本变得有趣。

尝试不同的风格,看看哪种规则获胜。你能找出原因吗?

感谢您的阅读!如果您希望我在本系列中探讨任何其他主题,请在评论中告诉我,或者只是让我知道您如何喜欢这个系列!

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

265

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

759

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

539

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

761

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

605

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

561

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

397

2023.08.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

38

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 22.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号