css使用

一、什么是CSS

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}</style>
</head>
<body><div>Hello CSS</div></body>
</html>

二、CSS导入方式

CSS导入有三种方式
在这里插入图片描述
在这里插入图片描述
CSS导入方式代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span{color: red;}</style><link href="../css/demo.css" rel="stylesheet"></head>
<body><!--内联样式--><div style="color: red">Hello CSS</div><!--内部样式--><span>Hello CSS</span><!--内部样式--><p>Hello CSS</p></body>
</html>

CSS导入文件

p{color: red;
}

三、CSS选择器

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--元素选择器--><style>div{color:red;}/* id选择器 */#name{color: blue;}/* 类选择器 */.cls{color: pink;}</style></head>
<body><div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div><span class="cls">span</span></body>
</html>

四、CSS属性

https://www.w3school.com.cn
本文不作为重点。

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

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

相关文章

每日好题3.5

前缀和 这个题目巨妙&#xff0c;打的时候没写出来&#xff0c;后面补题发现太牛了 思路&#xff1a;当前区间左端点 L L L &#xff0c;当我们向右移动一次&#xff0c;就相当于&#xff0c;原式 - f ( L ) f ( L 1 e 18 ) f(L) f(L 1e18) f(L)f(L1e18)&#xff0c;值就…

【SQL】指定日期的产品价格(IFNULL函数)

题目描述 leetcode题目&#xff1a;指定日期的产品价格 思路 找出所有的产品的指定的日期的价格&#xff1b;若找不到某个产品的更改日期&#xff0c;则将该产品价格设置为10。 关键点&#xff1a; if没有16号的&#xff0c;怎么找到前一个日期的&#xff1f;> 日期小…

html标签元素类型,web开发工具

面试题 HTML 1&#xff0c;html5有哪些新特性&#xff1f; 2&#xff0c;html5移除了那些元素&#xff1f; 3&#xff0c;如何处理HTML5新标签的浏览器兼容问题&#xff1f; 4&#xff0c;如何区分 HTML 和 HTML5&#xff1f; CSS 1&#xff0c;CSS 选择符有哪些&#xf…

uniapp 手写 简易 时间轴 组件

一、案例如图 该案例设计条件&#xff1a; 左侧时间 和竖线、点、内容都是居中对其的&#xff0c;上下时间点中间要有一段距离 二、编写逻辑 1. 布局结构&#xff1a;一共三个元素&#xff0c;左侧是时间和黑点&#xff0c;中间是线条&#xff0c;右侧是内容 2. 样式难点&#…

【SpringBoot】秒杀业务:redis+拦截器+自定义注解+验证码简单实现限流

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 …

STM32CubeMX学习笔记12 ---低功耗模式

在实际使用中很多产品都需要考虑低功耗的问题&#xff0c;STM32F10X提供了三种低功耗模式&#xff1a;睡眠模式&#xff08;Sleep mode&#xff09;、停机模式&#xff08;Stop mode&#xff09;和待机模式&#xff08;Standby mode&#xff09;。这些低功耗模式可以有效减少系…

【笔记】ArkTS 语言(OpenHarmony系统)

一、官方简介和文档 介绍&#xff1a;aArkTS 语言 | 华为开发者联盟 (huawei.com) 学习指南&#xff08;文档&#xff09;&#xff1a;初识ArkTS语言-学习ArkTS语言-入门 | 华为开发者联盟 (huawei.com) 二、ArkTS语言知识 &#xff08;一&#xff09;编程语言介绍 Mozilla创…

jmeter 弹性压测数据库

当前版本&#xff1a; jmeter 5.6.3mysql 5.7.39 简介 JMeter 通过 Open Model Thread Group 来实现弹性模拟负载测试&#xff0c;它是5.4.1 版本中引入的一个实验性线程组。例如设置多个线程模式&#xff0c;再根据这些线程模式调整不同的并发数、暂停时间。由于Open Model T…

【Linux】Linux C编程

gcc编译器 gcc [options] [filenames] 其中&#xff0c;options是编译器所需要的选项参数&#xff0c;filenames是文件名。 gcc编译过程 C语言编译过程一般可以分为预处理、编译、汇编、链接四个步骤。 1.预处理阶段 预处理阶段主要处理宏定义和include&#xff0c;并进行语…

Luajit 2023移动版本编译 v2.1.ROLLING

文章顶部有编好的 2.1.ROLLING 2023/08/21版本源码 Android 64 和 iOS 64 luajit 目前最新的源码tag版本为 v2.1.ROLLING on Aug 21, 2023应该是修正了很多bug, 我是出现下面问题才编的. cocos2dx-lua 游戏 黑屏 并报错: [LUA ERROR] bad light userdata pointer 编…

flutter旋转动画,算法题+JVM+自定义View

在很多的博客或者书上&#xff0c;说有三种&#xff0c;除了上述的两种以外&#xff0c;还有一种是实现Callable接口。但是这种并不是&#xff0c;因为&#xff0c;我们检查JDK中Thread的源码&#xff0c;看它的注释&#xff1a; There are two ways to create a new thread o…

#QT(TCP网络编程-服务端)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;编写一个tcp服务端 QTcpsever QTcpsocket 3.记录&#xff1a; (1)先搭建界面 &#xff08;2&#xff09;服务端代码 a. pro QT core gui networkgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c1…