CSS引入方式

行内样式:写在标签的style属性中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈:中国底气</title>
</head>
<body><img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪
<!--     方式1.行内样式 -->    y<h1 style="color: crimson;">焦点访谈:中国底气</h1><hr>
</body>
</html>

内嵌样式:写在style标签中(通常写在head中)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈:中国底气</title><!-- 方式2:内嵌样式 --><style>h1{color: crimson;}</style>
</head>
<body><img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪<h1>焦点访谈:中国底气</h1><hr>
</body>
</html>

外联样式:写在一个单独的.css文件中(通过link标签在网页中引入)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈:中国底气</title><link rel="stylesheet" href="./css/news.css">
</head>
<body><img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪<h1>焦点访谈:中国底气</h1><hr>
</body>
</html>
h1{color: crimson;
}

颜色表示形式:

表示方式

关键字--------预定义的颜色名---------red,green,blue

rgb表示法-----红绿蓝三原色,每项取值范围:0-255-----rgb(0,0,0),rgb(255,255,255)

十六进制表示法-----#开头,将数字转换成十六进制表示--------#00000000,#ff000000

CSS选择器:用来选取需要设置样式的元素(标签)

元素选择器

   /* 元素选择器 */

        span{

            color: #ff0000;

        }

类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈:中国底气</title><style>h1{color: blue;}.cla{color: #0f0;;}</style>
</head>
<body><img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪<h1>焦点访谈:中国底气</h1><hr><span class="cla">2023.8.25</span><hr>
</body>
</html>

ID选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈:中国底气</title><style>h1{color: blue;}#time{color: rgb(240, 11, 53);}</style>
</head>
<body><img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"  >新浪<h1>焦点访谈:中国底气</h1><hr><span id="time">2023.8.25</span><hr>
</body>
</html>

小结:

1.<span>标签

大量会用到的没有语义的局部标签

2.CSS选择器

优先级:id选择器>类选择器>元素选择器

3.font-size:

字体大小(注意:记得加px)

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

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

相关文章

建网站、编游戏、作生活援手|ChatGPT4惊艳的使用示例教程

OpenAI最新推出的人工智能模型ChatGPT4令科技界震惊&#xff0c;本文将通过探讨ChatGPT的一些惊艳应用示例&#xff0c;帮助大家了解ChatGPT的优势、应用场景。同时&#xff0c;市场营销、教师和人力资源专业人员也能了解到如何充分使用ChatGPT的强大功能。 将草图转为网站 …

git 基础入门

Git基础入门 Git是一个分布式 版本管理系统&#xff0c;用于跟踪文件的变化和协同开发。 版本管理&#xff1a;理解成档案馆&#xff0c;记录开发阶段各个版本 分布式&集中式 分布式每个人都有一个档案馆&#xff0c;集中式只有一个档案馆。分布式每人可以管理自己的档案…

kubernetes/k8s驱逐机制总结篇

概述 k8s的驱逐机制是指在某些场景下&#xff0c;如node节点notReady、node节点压力较大等&#xff0c;将pod从某个node节点驱逐掉&#xff0c;让pod的上层控制器重新创建出新的pod来重新调度到其他node节点。这里也将kube-scheduler的抢占调度纳入到了驱逐的讨论范围内&#…

Linux 基金会宣布正式进驻中国

在 LinuxCon 2017 &#xff08;北京&#xff09;即将召开前夕&#xff0c;我们Linux 中国会同 51CTO、开源中国对 Linux 基金会执行董事 Jim Zemlin 进行了一场远跨大洋的视频专访。 在这次专访中&#xff0c;Jim 先生回答了几个开源界和互联网领域关注的问题&#xff0c;并披…

[CVPR 2023]PyramidFlow-训练并推理-附bug调试

CVPR2023-PyramidFlow-zero shot异常检测网络 代码调试记录 一.论文以及开源代码二.前期代码准备三.环境配置四.bug调试num_samples should be a positive integer value, but got num_samples0AttributeError: Cant pickle local object fix_randseed.<locals>.seed_wor…

springboot使用properties

一、方式1&#xff1a; 1.1.配置类&#xff1a; package cn.zyq.stater.config;import cn.zyq.stater.bean.User4; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework…

解决:Appium Inspector刷新页面一直加载转圈

目录 问题&#xff1a;Appium Inspector刷新页面一直加载转圈 解决办法&#xff1a; 1.进入设置页面-电池-后台耗电管理 2.找到下面3个应用&#xff0c;修改为允许后台高耗电 问题&#xff1a;Appium Inspector刷新页面一直加载转圈 1、手机进行操作后&#xff0c;Appium I…

Go 语言的实战案例 SOCKS5 代理 | 青训营

Powered by:NEFU AB-IN 文章目录 Go 语言的实战案例 SOCKS5 代理 | 青训营 引入TCP echo serverauth 认证请求阶段relay阶段 Go 语言的实战案例 SOCKS5 代理 | 青训营 GO语言工程实践课后作业&#xff1a;实现思路、代码以及路径记录 引入 代理是指在计算机网络中&#xff…

java mysql传入string数组返回string数组的简单写法

一、前言 最近有个需求&#xff0c;需要一个传入string数组返回string数组的sql逻辑。 懒得封装成javabean了&#xff0c;于是就写了一个简单的样例&#xff0c;总结下。 二、代码 1.mapper.java&#xff0c;可以这样写&#xff1a; public interface MyMapper {String[] …

Cpp学习——编译链接

目录 ​编辑 一&#xff0c;两种环境 二&#xff0c;编译环境下四个部分的 1.预处理 2.编译 3.汇编 4.链接 三&#xff0c;执行环境 一&#xff0c;两种环境 在程序运行时会有两种环境。第一种便是编译环境&#xff0c;第二种则是执行环境。如下图&#xff1a; 在程序运…

软引用的使用场景-链路日志

我司自研的链路系统中的agent层记录日志时&#xff0c;使用的是异步打印日志的机制。异步打印会使用队列&#xff0c;现将待打印的日志对象&#xff0c;记录在队列中。 但这块的日志&#xff0c;为了不影响业务&#xff0c;例如不能因为链路记录的日志过多&#xff0c;导致业务…

5G NR:协议 - PDCCH信道

1、基本概念 不同于LTE中的控制信道包括PCFICH、PHICH和PDCCH&#xff0c;在5G NR中&#xff0c;控制信道仅包括PDCCH&#xff08;Physical Downlink Control Channel&#xff09;&#xff0c;负责物理层各种关键控制信息的传递&#xff0c;PDCCH中传递的下行控制信息&#xff…

【LeetCode】面试题总结 消失的数字 最小k个数

1.消失的数字 两种思路 1.先升序排序&#xff0c;再遍历并且让后一项与前一项比较 2.转化为数学问题求等差数列前n项和 &#xff08;n的大小为数组的长度&#xff09;&#xff0c;将根据公式求得的应有的和数与数组中实际的和作差 import java.util.*; class Solution {public …

代码随想录算法训练营第四十六天 | 139.单词拆分

代码随想录算法训练营第四十六天 | 139.单词拆分 139.单词拆分 139.单词拆分 题目链接 视频讲解 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出 s 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典…

【LeetCode】227. 基本计算器 II

227. 基本计算器 II&#xff08;中等&#xff09; 方法&#xff1a;双栈解法 思路 我们可以使用两个栈 nums 和 ops 。 nums &#xff1a; 存放所有的数字ops &#xff1a;存放所有的数字以外的操作 然后从前往后做&#xff0c;对遍历到的字符做分情况讨论&#xff1a; 空格 …

安全测试-django防御安全策略

django安全性 django针对安全方面有一些处理&#xff0c;学习如何进行处理设置&#xff0c;也有利于学习安全测试知识。 CSRF 跨站点请求伪造&#xff08;Cross-Site Request Forgery&#xff0c;CSRF&#xff09;是一种网络攻击方式&#xff0c;攻击者欺骗用户在自己访问的网…

软考高级系统架构设计师系列论文真题二:论面向服务架构设计极其应用:真题分析、理论素材、精品范文赏析

软考高级系统架构设计师系列论文真题二:论面向服务架构设计极其应用:真题分析、理论素材、精品范文赏析 一、论面向服务架构设计极其应用二、论文解题思路1.找准核心论点2.理论素材准备三、精品范文赏析1.摘要2.正文3.总结一、论面向服务架构设计极其应用 企业应用集成(EAI)是…

Python 包管理(pip、conda)基本使用指南

Python 包管理 概述 介绍 Python 有丰富的开源的第三方库和包&#xff0c;可以帮助完成各种任务&#xff0c;扩展 Python 的功能&#xff0c;例如 NumPy 用于科学计算&#xff0c;Pandas 用于数据处理&#xff0c;Matplotlib 用于绘图等。在开始编写 Pytlhon 程序之前&#…

【力扣】2813 子序列最大优雅度

class Solution//诡异的数据结构维护反悔贪心 { public:long long findMaximumElegance(vector<vector<int>>& items, int k){sort(items.begin(), items.end(), [](const auto &a, const auto &b){return a[0] > b[0];});//奇妙的排序方法long lon…

K8S最新版本集群部署(v1.28) + 容器引擎Docker部署(上)

温故知新 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目的&#x1f4d7;总体方向 &#x1f4da;第二章 基本环境信息&#x1f4d7;机器信息&#x1f4d7;软件信息&#x1f4d7;部署用户kubernetes &#x1f4da;第三章 Kubernetes各组件部署&#x1f4d7;安装kube…