HTML/CSS3

1.CSS

  • CSS的作用在于在HTML的基础上(决定网页的内容和结构)对网页进行排版布局 对网页中的元素提供样式 使得网页显得更加精美
  • CSS全称是cascading style sheets 即层叠样式表
  • CSS样式的书写格式：样式名: 样式值
    • 例如：color: red
    • 建议:之后进行空格
  • CSS样式应用到html元素的三种方法
    • 内联样式(inline style)
      • 所谓内联 其实就是将样式内置到标签中的意思
    • 文档样式表(document style sheet)
      • 所谓文档 其实就是将样式内置到文档中的意思
    • 外部样式表(external style sheet)
      • 所谓外部 其实就是将样式内置到外部的一个单独的css文件中

2.内联样式

  • 实现：将CSS样式作为元素的style属性值
    • 例如：<div style="color: blue; background-color: red;">文字内容</div>
    • 多个CSS样式在属性值中以;进行隔开 而且建议每个CSS样式之后都加上;

3.文档样式表

  • 实现：将CSS样式内置head元素的style元素中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div {color: blue;background-color: yellow;}</style>
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>
  • style元素中type属性的默认值为text/css 可省略
  • 利用文档样式表 可以统一设置、修改多个元素的相同样式

4.外部样式表

  • 实现：将样式单独写在css文件中 然后在当前网页的head元素中用link元素对css文件进行引用

  • 利用外部样式表 可以解决同时设置多个网页中公共部分样式时 频繁使用文档样式表的弊端

  • rel属性不可或缺 他表示链接者和被链接者之间的关系

  • 而且一般rel一旦确定的话 那么相应的type属性也会随之确定 两者是一一对应的关系 所以可以省略type

  • 注意：css文件中的属性值可能出现中文 为了避免中文乱码 所以我们需要在css文件中设置一下编码方式和浏览器的一致 设置的格式为：@charset “xxx”;

style.css

@charset "UTF-8";
div {color: red;background-color: blue;
}

page_01.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

page_02.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
<div>文字内容</div>
</body>
</html>

5.三个样式的应用场景

内联样式：CSS样式作用于单个元素上
文档样式表：CSS样式作用于同一个文档中的若干个元素上(解决频繁使用内联样式表的弊端)
外部样式表：CSS样式作用于多个文档中的公共部分(解决频繁使用文档样式表的弊端)

6.@import指令

  • 利用该指令 我们可以实现link元素导入外部样式表一样的功能

  • 该指令属于CSS语法 所以需要内置到三种样式之中

  • 以下演示了导入多张外部样式表的不同方式

    • 我们可以通过多个link元素来导入多张外部样式表
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/style2.css">
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>
    • 我们可以通过多个@import来导入多张外部样式表
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@import "css/style.css";@import "css/style2.css";</style>
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>
    • 我们可以通过将多张样式表的内容集成到一张样式表中 然后通过link/@import的方式导入一张样式表即可
    	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>@import "css/style3.css";</style>
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

    	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style3.css">
</head>
<body>
<!-- div为红体蓝底的样式 -->
<div>我是div</div>
<!--p为紫体橙底的样式-->
<p>我是p</p>
</body>
</html>

  • 一般在开发过程当中 @import不使用 大部分情况都是用的是link元素来导入外部样式表

7.细节

  • 外部样式表、文档样式表比内联样式多了一个’表’字？原因在于内联样式只作用于一个元素 而外部样式表/文档样式表可以作用于多个元素上
  • 如下图所示 为多个元素设置多个样式 这就形成了一张样式表
    在这里插入图片描述

8.CSS的注释

  • CSS的注释方式和HTML不一样 其格式为：/* 注释内容 */
    • 示例
    	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>strong {/* 这是一个注释 */color: green;background: pink;}</style>
</head>
<body>
<strong>我是strong</strong>
</body>
</html>
  • 注意：不要在CSS环境中使用其他的注释 比如：HTML注释(<!-- -->) 这样会导致CSS的作用效果失效
    • 示例
    	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style><!-- 这是一个注释 -->strong {/* 这是一个注释 */color: green;background: pink;}</style>
</head>
<body>
<strong>我是strong</strong>
</body>
</html>

9.HTML和CSS的编写建议

  • 建议内容/结构和样式分离
    • 不要通过html标签的属性去设置样式
    • 不推荐以下写法
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body bgcolor="orange"></body>
</html>
    • 推荐以下写法
    	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {background-color: orange;}</style>
</head>
<body></body>
</html>
  • 在没有CSS的年代 都是利用font标签为html元素设置样式的 而CSS的出现 就是为了解放html设置元素 所以更加不建议通过html去设置样式
  • 你可以发现 在h5标准下 font标签是不建议使用的(deprecated 即废弃)

10.设置网页图标

  • 我们可以通过link元素设置网页图标 并且网页图标仅支持.ico、.png格式的图片 rel也要设置正确(rel一旦设置 type也就随之确定 所以可省略)
    • 示例(自定义网页图标为京东图标)
    	<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="icon" href="https://www.jd.com/favicon.ico">
</head>
<body></body>
</html>

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

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

相关文章

redis的双写一致性

redis的双写一致性

双写一致性问题 1.先删除缓存或者先修改数据库都可能出现脏数据。 2.删除两次缓存&#xff0c;可以在一定程度上降低脏数据的出现。 3.延时是因为数据库一般采用主从分离&#xff0c;读写分离。延迟一会是让主节点把数据同步到从节点。 1.读写锁保证数据的强一致性 因为一般放…
阅读更多...
在 Python 的哪个版本之后，字典的添加顺序与键的顺序是一致的？

在 Python 的哪个版本之后，字典的添加顺序与键的顺序是一致的？

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 在 Python 的不同版本中&#xff0c;字典&#xff08;dict&#xff09;类型的行为发生了显著变化。在 Python 3.6 及之前的版本中&#xff0c;字典是无序的&#xff0c;这意味着字典在遍历时不能保证按…
阅读更多...
笨方法自学python（一）

笨方法自学python（一）

我觉得python和c语言有很多相似之处&#xff0c;如果有c语言基础的话学习python也不是很难。这一系列主要是学习例题来学习python&#xff1b;我用的python版本是3.12 代码编辑器我用的是notepad&#xff0c;运行py程序用cmd 现在开始写第一个程序&#xff1a; print ("…
阅读更多...
GPT-SoVits：语音克隆，语音融合

GPT-SoVits：语音克隆，语音融合

首发网站 https://tianfeng.space 前言 零样本文本到语音&#xff08;TTS&#xff09;&#xff1a; 输入 5 秒的声音样本&#xff0c;即刻体验文本到语音转换。少样本 TTS&#xff1a; 仅需 1 分钟的训练数据即可微调模型&#xff0c;提升声音相似度和真实感。跨语言支持&…
阅读更多...
ESP32 + ST7789 LCD

ESP32 + ST7789 LCD

1、准备 ESP32 单片机开发板 ST7789 LCD 模块&#xff08;240 * 320 像素&#xff09; 杜邦线 2、接线 LCD功能ESP32VCC 供电电压正极 3.3V 、 5V GND 供电电压负极 GNDIDN / MOSI SPI 接口数据 引脚 23CLK 串行接口时钟信号 18CS 芯片选择引脚&#xff1b;低电平有效 5DC 显…
阅读更多...
【实战】采用jenkins pipeline实现自动构建并部署至k8s

【实战】采用jenkins pipeline实现自动构建并部署至k8s

文章目录 前言部署jenkins编写docker-compose-jenkins.yaml配置maven源启动jenkins解锁jenkins Jenkins默认插件及git、镜像仓库、k8s凭证配置host key verification configuration修改为不验证Gitee ssh阿里云镜像仓库ssh编写pipeline安装以下常用插件将kubectl命令文件拷贝到…
阅读更多...
Threejs 动态修改InstanceMesh实例化几何体中单个实例的颜色

Threejs 动态修改InstanceMesh实例化几何体中单个实例的颜色

目录 InstanceMesh多实例 场景 思路 注意点 实现 效果 InstanceMesh多实例 instanceMesh 是使用InstancedMesh类来创建实例化的几何体。它适用于当需要大量重复的几何体时&#xff0c;但是每个实例之间有不同的变换属性&#xff08;如位置、旋转、缩放等&#xff09; 场…
阅读更多...
windows使用Docker-Desktop部署lobe-chat

windows使用Docker-Desktop部署lobe-chat

文章目录 window安装docker-desktop下载和启动lobe-chatAI大语言模型的选择lobe-chat设置大模型连接 window安装docker-desktop docker-desktop下载地址 正常安装应用&#xff0c;然后启动应用&#xff0c;注意启动docker引擎 打开右上角的设置&#xff0c;进入Docker Engine设…
阅读更多...
【系统分析师】软件架构设计

【系统分析师】软件架构设计

文章目录 1、构件与软件复用1.1 主流构件标准1.2 构件获取与管理1.3 构件复用的方法 2、软件架构概述3、软件架构建模4、软件架构风格4.1 经典架构风格4.2 层次架构风格4.3 富互联网应用-RIA 5、面向服务的架构5.1 SOA概述5.2 SOA的关键技术5.3 SOA的实现方法 6、软件架构评估6…
阅读更多...
Golang | Leetcode Golang题解之第83题删除排序链表中的重复元素

Golang | Leetcode Golang题解之第83题删除排序链表中的重复元素

题目&#xff1a; 题解&#xff1a; func deleteDuplicates(head *ListNode) *ListNode {if head nil {return nil}cur : headfor cur.Next ! nil {if cur.Val cur.Next.Val {cur.Next cur.Next.Next} else {cur cur.Next}}return head }
阅读更多...
前端开发工程师——ajax

前端开发工程师——ajax

express框架 终端输入 npm init --yes npm i express 请求报文/响应报文 // 1.引入express const express require(express);// 2.创建应用对象 const app express();// 3.创建路由规则 // request:是对请求报文的封装 // response&#xff1a;是对响应报文的封装 app.get(…
阅读更多...
【数据结构】浅谈

【数据结构】浅谈

✨✨✨专栏&#xff1a;数据结构 &#x1f9d1;‍&#x1f393;个人主页&#xff1a;SWsunlight 目录 一、概念&#xff1a; 二、物理结构&#xff1a; 1、顺序存储结构&#xff1a; 2、链式存储结构&#xff1a; 3、数据索引存储结构: 4、数据散列存储结构&#xf…
阅读更多...
SVN 合并到 Git 时有文件大于 100 M 被限制 Push

SVN 合并到 Git 时有文件大于 100 M 被限制 Push

如果有文件大小大于 100M&#xff0c;GitHub 是会被限制推送到仓库中的&#xff0c;大概率情况会显示下面的错误&#xff1a; remote: Resolving deltas: 100% (3601/3601), done. remote: error: Trace: aea1f450da6f2ef7bfce457c715d0fbb9b0f6d428fdca80233aff34b601ff59b re…
阅读更多...
声明变量的六种方法

声明变量的六种方法

ES6 声明变量的六种方法 varfunctionletconstclassimport 顶层对象的属性 1. ES6 声明变量的六种方法 ES5 只有两种声明变量的方法&#xff1a; var 命令和 function 命令。 ES6 除了添加 let 和 const 命令&#xff0c;还有另外两种声明变量的方法&#xff1a; import 命令和…
阅读更多...
笨方法自学python（二）-注释

笨方法自学python（二）-注释

注释和#号 程序里的注释是很重要的。它们可以用自然语言告诉你某段代码的功能是什么。在你想要临时移除一段代码时&#xff0c;你还可以用注解的方式将这段代码临时禁用。 # A comment, this is so you can read your program later. # Anything after the # is ignored by py…
阅读更多...
Python专题：八、列表（1）

Python专题：八、列表（1）

Python的内置数据类型 数据类型&#xff1a;列表 list类型 可以是字符串&#xff0c;浮点数&#xff0c;整数&#xff0c;列表 列表特性 ①集合性的数据类型 ②列表是有序的 ③列表是可更新的 访问列表元素的方式也是[索引]&#xff0c;也是从0开始的&#xff0c;不能超过…
阅读更多...
【前端】桌面版docker并部署前端项目

【前端】桌面版docker并部署前端项目

环境 win10专业版 2004 , 需科学 官网下载安装包并安装4.29.0版本 终端输入 wsl --installdocker桌面版和模拟器只能选一个&#xff0c;不然一直转圈圈 镜像配置加速&#xff0c;在settings—>docker engine下 {"builder": {"gc": {"defaultKee…
阅读更多...
二叉树介绍

二叉树介绍

引入 定义 区别 定义不同 形态不同 基本形态
阅读更多...
自动驾驶中的神经辐射场：综述

自动驾驶中的神经辐射场：综述

24年4月清华大学论文“Neural Radiance Field in Autonomous Driving: A Survey”。 神经辐射场&#xff08;NeRF&#xff09;由于其固有的优势&#xff0c;特别是其隐式表示和新视图合成能力&#xff0c;引起了学术界和工业界的广泛关注。 随着深度学习的快速发展&#xff0c…
阅读更多...
攻防世界-web-unseping

攻防世界-web-unseping

题目 知识点 PHP代码审计PHP序列化和反序列化PHP中魔术方法命令执行绕过方式 解读源码 <?php highlight_file(__FILE__);class ease{private $method;private $args;function __construct($method, $args) {$this->method $method;$this->args $args;}function …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发