CSS的概念和基本用法

CSS的作用:

        页面美化和布局控制。

1.概念:

         Cascading Style Sheets 层叠样式表。

         层叠:多个样式可以作用在同一个html的元素上,同时生效。

2.好处:

        (1).功能强大

        (2).将内容展示和样式控制分离

                * 降低耦合度,解耦。

                * 让分工协作更容易。

                * 提高开发效率。

3.CSS的使用:CSS与html结合方式。

        (1).内联样式

                * 在标签内使用style属性指定css代码。

                * 如:<div style="color:red;">hello css</div>

        (2).内部样式

                * 在head标签内,定义style标签,style标签的标签体内容就是css代码。

                * 如:
                        <style>
                                    div{
                                        color:blue;
                                        }

                        </style>

        (3).外部样式

                1).定义css资源文件。

                2).在head标签内,定义link标签,引入外部的资源文件

                * 如:

                        a.css文件:

                                div{
                                        color:green;
                                    }

                        在head标签内,用link引入外部资源文件

                                <link rel="stylesheet" href="css/a.css">

        总结:

                * (1),(2),(3)种方式 css作用范围越来越大。

                        第(1)种方式作用于单个标签。

                        第(2)种方式作用于单个页面。

                        第(3)种方式作用于多个页面,哪个页面引入样式,就会有相应的效果。

                * 第(1)种方式不常用,后期常用方式(2)和(3).

                * 第(3)种格式还可以写为:

                         <style>
                                    @import "css/a.css";
                        </style>


示例:

第(1)种内联样式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联样式</title>
</head>
<body>
<!--
内联样式* 在标签内使用style属性指定css代码
--><div style="color:red;">hello css</div></body>
</html>

第(2)种内部样式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式</title><style>div{color:blue;}</style>
</head>
<body>
<!--
内部样式* 在head标签内,定义style标签,style标签的标签体内容就是css代码
--><div>hello css</div><div>hello css</div>
</body>
</html>

第(3)种外部样式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式</title><!--第1种引入外部文件的方式--><!-- <link rel="stylesheet" href="css/a.css">--><!--第2种引入外部文件的方式--><style>@import "css/a.css";</style>
</head>
<body><!--外部样式1. 定义css资源文件。2. 在head标签内,定义link标签,引入外部的资源文件
--><div>hello css</div><div>hello css</div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java选择与循环

1.选择 前言&#xff1a;什么是选择呢&#xff1f;在我们的人生中处处面临着选择&#xff0c;比如说在学校你可以选择玩&#xff0c;摆烂&#xff0c;当然也可以选择努力写代码&#xff0c;刷题。什么样的选择就会面临什么样的结果。 其实程序和人生一样&#xff1a;顺序中夹杂…

简单代理模式

代理模式 代理模式(Proxy)&#xff0c;为其他对象提供一种代理以控制对这个对象的访问。 结构图如下&#xff1a; ISubject接口&#xff0c;定义了RealSubject和Proxy的共用接口方法&#xff0c;这样就可以在任何使用RealSubject的地方使用Proxy代理。 ISubject接口 public…

sed续与awk(粗糙版)

s:sed d 替换功能&#xff0c;改 s:替换字符串 格式是&#xff1a;sed -n s/需要替换的原内容/替换后的内容/(ps&#xff1a;数字是替换每行中的第几个&#xff0c;g代表是全内容替换)p 替换的文件地址 例如&#xff1a; c:整行替换 y:字符替换&#xff0c;替换前后的字符串…

【洛谷 P5143】攀爬者 题解(结构体排序)

攀爬者 题目背景 HKE 考完 GDOI 之后跟他的神犇小伙伴们一起去爬山。 题目描述 他在地形图上标记了 N N N 个点&#xff0c;每个点 P i P_i Pi​ 都有一个坐标 ( x i , y i , z i ) (x_i,y_i,z_i) (xi​,yi​,zi​)。所有点对中&#xff0c;高度值 z z z 不会相等。HKE…

idea使用lombok编译问题

idea编译报错问题如下&#xff1a; java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy26Lombok supports: OpenJDK javac, ECJ解决方案&#xff1a;在idea配置中File->Setti…

挑战100天 AI In LeetCode Day02(1)

挑战100天 AI In LeetCode Day02&#xff08;1&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-32.1 题目2.2 题解 三、面试经典 150 题-33.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&#xff0c;面向程序…

IOS自带的OCR识别功能

一、识别身份证 interface IDCardScanViewController () <AVCaptureMetadataOutputObjectsDelegate> property (nonatomic, strong) AVCaptureSession *captureSession; end implementation IDCardScanViewController - (void)viewDidLoad { [super viewDidLoad…

【GitHub】Watch、Star、Fork、Follow 有什么区别?

目录 一、前言二、区别1. Watch2. Star3. Fork4. Follow 一、前言 GitHub 是最受欢迎的代码托管平台之一&#xff0c;拥有大量的开源代码可供学习。 Github 中也有类似 “点赞”、“收藏”、“加关注” 的功能。 下面介绍下&#xff0c;GitHub 中 Watch、Star、Fork、Follow 有…

c语言进阶部分详解(《高质量C-C++编程》经典例题讲解及柔性数组)

上篇文章我介绍了介绍动态内存管理 的相关内容&#xff1a;c语言进阶部分详解&#xff08;详细解析动态内存管理&#xff09;-CSDN博客 各种源码大家可以去我的github主页进行查找&#xff1a;唔姆/比特学习过程2 (gitee.com) 今天便接“上回书所言”&#xff0c;来介绍《高质…

聊一聊GPT——让我们的写作和翻译更高效

1 介绍 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一种基于Transformer的语言生成模型&#xff0c;由OpenAI开发。它采用了无监督的预训练方式&#xff0c;通过处理大量的文本数据进行自我学习&#xff0c;从而提高其语言生成的能力。 GPT在自然语言…

Python采集数据代码示例

基本的爬虫程序的示例&#xff1a; typescript import * as request from request; // 信息 const proxyHost ; const proxyPort ; // 网站的 URL const url ; // 使用 request 库发起请求 request({ url, method: GET, proxy: { host: proxyHost…

Linux Vim撤销和恢复撤销快捷键

使用 Vim 编辑文件内容时&#xff0c;经常会有如下 2 种需求&#xff1a; 对文件内容做了修改之后&#xff0c;却发现整个修改过程是错误或者没有必要的&#xff0c;想将文件恢复到修改之前的样子。 将文件内容恢复之后&#xff0c;经过仔细考虑&#xff0c;又感觉还是刚才修改…

Symfony DomCrawler库

Symfony DomCrawler库是Symfony框架中的一个组件&#xff0c;用于解析HTML或XML文档&#xff0c;并提供了一种方便的方式来查询和操作文档中的元素。 使用DomCrawler&#xff0c;你可以&#xff1a; 加载HTML或XML文档&#xff0c;并创建一个Crawler对象。 使用CSS选择器或XP…

Spring 与 Spring Boot

什么是 Spring 可以理解 Spring 是一个框架。这个框架最早来源于在差不多的 20 年前的 2002 年。 在那个时候 Java 世界的开发还是以 EJB 为主&#xff0c;因为在这之前的大部分应用都会使用服务器客户端的应用模式。 其实这个模式在现在还是在使用的&#xff0c;例如 IBM 系统…

二十三种设计模式全面解析-深入解析桥接模式:解锁软件设计的灵活性

在软件开发中&#xff0c;我们经常面临需要处理多个不同维度变化的情况。这些变化可能涉及多个维度的组合&#xff0c;导致类的爆炸性增长和难以维护的代码。在这种情况下&#xff0c;桥接模式&#xff08;Bridge Pattern&#xff09;是一种强大的设计模式&#xff0c;能够帮助…

iOS渲染卡死应该如何解决

1&#xff09;iOS渲染卡死应该如何解决 2&#xff09;C#传给C的Byte数组如何释放 3&#xff09;EAssetBundle.Unload(true)触发长时间卡顿的原因 这是第358篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&#xff0c;涵盖了UWA问答、社区帖子等技术知识点&#x…

企业级SpringBoot单体项目模板 —— 使用 AOP + JWT实现登陆鉴权

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;SpringBoot、企业级、项目模板☀️每日 一言&#xff1a;没学会走就学跑从来都不是问题&#xff0c;要问问自己是不是天才&#xff0c;如果不是&#xff0c;那就要一步步来 文章目录 使用JWT实现…

【MySQL事务篇】多版本并发控制(MVCC)

多版本并发控制(MVCC) 文章目录 多版本并发控制(MVCC)1. 概述2. 快照读与当前读2.1 快照读2.2 当前读 3. MVCC实现原理之ReadView3.1 ReadView概述3.2 设计思路3.3 ReadView的规则3.4 MVCC整体操作流程 4. 举例说明4.1 READ COMMITTED隔离级别下4.2 REPEATABLE READ隔离级别下 …

四.pyqt5 登录界面和功能

一.使用qt creator 设置登录界面 主界面为之前设计的界面 from123.py 文章地址&#xff1a;三.listview或tableviw显示 二.导出ui文件为py文件 # from123.py 为导出 py文件 form.ui 为 qt creator创造的 ui 文件 pyuic5 -o x:\xxx\Fromlogin20230809.py form.ui三.python 显…