【Web世界探险家】CSS美学(一)

2024-04-10 11:28

本文主要是介绍【Web世界探险家】CSS美学(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

📚博客主页:爱敲代码的小杨.

✨专栏:《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》

❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️

🙏小杨水平有限,欢迎各位大佬指点,相互学习进步!


文章目录

  • 1. 结构与表现分离
  • 2. CSS 样式规则
  • 3. 引入 CSS 样式表
    • 3.1 行内式
    • 3.2 内嵌式
    • 3.3 外链式
    • 3.4 导入式
  • 4. CSS 基础选择器
    • 4.1 标签选择器
    • 4.2 类选择器
    • 4.3 id 选择器
    • 4.4 通配符选择器

1. 结构与表现分离

前面我们学习了 HTML 的常用标签,在使用 HTML 标签属性的时候对网页进行修饰的方式存在很大的局限和不足,因为我们所有的样式都是写在标签中,这样既不利于代码的阅读,将来维护代码也非常困难。如果希望网页美观、大方、维护方便、就需要使用 CSS 实现结构与表现的分离。

结构与表现分离:HTML 标签拥有搭建网页的基本结构,不使用标签属性设置显示样式,所有的样式交由 CSS 来设置。

CSS 非常灵活,既可以嵌入在 HTML 文档中,也可以是一个单独的外部文件,如果是独立的文件,则必须以.css 为后缀名。

image-20240327214741794

内嵌 CSS:虽然 CSS 与 HTML 在同一个文档中,但是 CSS 集中写在 HTML 文档头部,也是符合结构与表现分离的。

如今大多数网页都是遵循 Web 标准开发的,即用 HTML 编写网页结构和内容,而相关版面、文本或图片的显示样式都是使用 CSS 控制。

举例:

​ HTML 与 CSS 的关系如同人的身体与衣服,通过更改 CSS 样式,如人换不同样式的衣服,可以轻松控制网页的表现样式。

2. CSS 样式规则

CSS 样式的具体实现语法:

选择器 {属性 1 : 属性值1;属性 2 : 属性值2;属性 3 : 属性值3;.....
}
  • 选择器:用于指定需要修改样式的 HTML 标签
  • {}:内部一条或多条声明。每条声明由一个属性和属性值组成,以“键值对”的形式出现。
  • 声明:属性是对指定的标签设置的样式属性,例如字体大小、文本颜色等。属性和属性之间用英文冒号 : 连接,多个声明之间用英文分号 ; 进行分隔。

CSS 语法的特点:

  1. CSS 样式中的选择器严格区分大小写,而声明不区分大小写,按照书写习惯一般将选择器、声明都采用小写的方式

  2. 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了便于添加新的样式最好保留

  3. 如果属性的属性值有多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。

    p{font-family: "Times New Roman";
    }
    
  4. 在编写 CSS 代码时,为了提高代码的可读性,可使用 /**/ 来进行注释,例如上面的样式代码可添加如下注释:

    p{font-family: "Times New Roman";/*这是 CSS 注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中*/
    }
    

3. 引入 CSS 样式表

想要使用 CSS 来修饰网页,就需要在 HTML 文档中引入 CSS 样式表。

CSS 提供了4种引入方式:行内式,内嵌式,外链式,导入式。

3.1 行内式

行内式又称为内联样式,是通过标签的 style 属性来设置标签的样式,基本语法:

<标签名 style = "属性1:属性1值; 属性2:属性2值 ...;"> 内容 </标签名>

上述语法中, style 是标签的属性, 实际上任何 HTML 标签都拥有 style 属性, 用来设置行内式. 属性和属性值的书写规范与 CSS 样式规则一样, 行内式只对所在的标签级嵌套在其中的子标签起作用.

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p style="font-size:50px;color: red;">css行内式修改了 p 标签内容样式</p><p>p 标签原样式</p>
</body>
</html>

运行:

image-20240402185553449


上述代码, 使用 style 属性修饰了 p 标签的字体大小和颜色.

【注意】:行内式是通过标签的属性来控制样式的,这样并没有做到结构与样式分离,所以不建议使用。

3.2 内嵌式

内嵌是将 CSS 代码集中写在 HTML 文档的 <head> 头部标签中,并且用 <style> 标签定义,基本语法格式:

<head><style>选择器{属性1:属性1值; 属性2:属性2值; ....;}</style>
</head>

上述语法中,<style> 标签一般位于 title 标签之后,也可以把它放在 HTML 文档的任何地方。

3.3 外链式

外链式也叫链入式,是将所有的样式放在一个多个以 .css 为扩展名的外部样式表文件中,通过 <link /> 标签将外部样式表文件链接到 HTML 文档中,其基本语法格式如下:

<head><link href="css文件的路径" type="text/css" rel="stylesheet"/>
</head>

上述语法中,<link /> 标签需要放到 <head>头部标签中,并且必须指定 <link /> 标签的3个属性,具体如下:

  • href :定义所链接外部样式表文件的 URL ,可以是相对路径,也可以是绝对路径
  • type :定义锁链接文档的类型,在这里需要指定为 text/css ,表示链接的外部文件的 CSS 样式表。type 属性可以省略。
  • rel :定义当前文件与被链接文档之间的关系,在这里需要指定为 stylesheet ,表示被链接的文档是一个样式表文件

案例:

HTML:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link  href="我是css.css" rel="stylesheet">
</head>
<body><h2>外链式CSS样式</h2>
</body>
</html>

CSS:

h2{text-align: center;font-size: 50px;color: blue;
}

运行结果:

image-20240409184705719


外链式最大的好处是同一个 CSS 样式表可以被不同的 HTML 页面链接使用,同时一个 HTML 页面也可以通过多个 <link /> 标签链接多个 CSS 样式表。

在网页设计中,外链式是使用频率最高,也是最实用的 CSS 样式表,因为它将 HTML 代码与 CSS 代码分离为两个或多个文件,实现将结构和样式完全分离,使得网页前期制作和后期维护都十分方便。

3.4 导入式

导入式与链入式相同,都是针对外部样式表文件。对 HTML 头部文档应用 style 标签,并在 <style> 标签内的开头处使用 @import 语句,即可导入外部样式表文件,其基本语法格式如下:

<style>@import url(css文件路径);@import "css文件路径";/*其他css样式*/
</style>

该语法中,<style> 标签内还可以存放其他的内嵌样式,@import 语句需要位于其他内嵌样式的上面。

上述 <linke> 代码可以替换如下代码

image-20240409190245628


虽然导入式和链入式功能基本相同,但大多数网站都是采用链入式引入外部样式表。

4. CSS 基础选择器

要想将 CSS 样式表应用于特定的 HTML 标签,首先需要找到该目标元素。在 CSS 中,执行这一任务的样式表规则被称为选择器

4.1 标签选择器

标签选择器是指用 HTML 标签名称为选择器,按标签名称分类,为页面中某一类标签指定统一的样式表,语法如下:

标签名{属性:属性值;属性:属性值;....属性:属性值;
}

案例:

代码:

image-20240409193515706

运行结果:

image-20240409193608225


标签选择器最大的优点是能快速为页面中的同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式

4.2 类选择器

类选择器使用 .类名 来进行标识,其语法如下:

.类名{属性:属性值;属性:属性值;....属性:属性值;
}

案例:

代码:

image-20240409194425658

运行结果:

image-20240409193608225


【注意】:类名的第一个字符不能是数字,并且严格区分大小写,一般采用小写的英文字符。

4.3 id 选择器

id 选择器使用 #id名 进行标识,其基本语法如下:

#id名{属性:属性值;属性:属性值;....属性:属性值;
}

案例:

代码:

image-20240409203914864

运行结果:

image-20240409193608225


4.4 通配符选择器

通配符选择器用 * 号表示,它是表示所有选择器中作用范围最广的,能匹配页面所有的元素,基本语法格式如下:

*{属性:属性值;属性:属性值;....属性:属性值;
}

案例:

image-20240409204729384

运行结果:

image-20240409204741635

但是在实际的开发中不建议使用通配符选择器,因为通配符选择器设置的样式对所有的 HTML 标签都生效,不管标签是否需要该标签,这样反而减低了代码的执行速度。

这篇关于【Web世界探险家】CSS美学(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/890933

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

揭秘世界上那些同时横跨两大洲的国家

我们在《世界人口过亿的一级行政区分布》盘点全球是那些人口过亿的一级行政区。 现在我们介绍五个横跨两州的国家,并整理七大洲和这些国家的KML矢量数据分析分享给大家,如果你需要这些数据,请在文末查看领取方式。 世界上横跨两大洲的国家 地球被分为七个大洲分别是亚洲、欧洲、北美洲、南美洲、非洲、大洋洲和南极洲。 七大洲示意图 其中,南极洲是无人居住的大陆,而其他六个大洲则孕育了众多国家和

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo