HTML、CSS、 JavaScript介绍(二)

news2025/1/11 3:58:48

CSS 指层叠样式表 (Cascading Style Sheets)CSS定义如何显示 HTML 元素。HTML 标签原本被设计为用于定义文档内容,样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

 

1、CSS的基础语法和样式属性

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是你需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

2、如何在HTML中使用CSS

CSS引入有3种方式,行内样式、内部样式表、外部样式表

(1)行内样式

使用style属性引入CSS样式。

示例:

<h1 style="color:red;">style属性的应用</h1>

<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用,在测试的时候可以使用。

(2)内部样式表

style标签中书写CSS代码。style标签写在head标签中。
示例:
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

(3)外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。
语法:
1、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2
、导入式
<style type="text/css">
  @import url("css
文件路径");
</style>

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

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

相关文章

「GPT实战」GPT接入直播间实现虚拟人互动

摘要 ChatGPT和元宇宙都是当前数字化领域中非常热门的技术和应用。结合两者的优势和特点&#xff0c;可以探索出更多的应用场景和商业模式。例如&#xff0c;在元宇宙中使用ChatGPT进行自然语言交互&#xff0c;可以为用户提供更加智能化、个性化的服务和支持&#xff1b;在Ch…

清除浮动的方法

目录 清除浮动 2.1 清除浮动的方法 — ① 直接设置父元素高度 2.2 清除浮动的方法 — ② 额外标签法 2.3 清除浮动的方法 — ③ 单伪元素清除法 2.4 清除浮动的方法 — ④ 双伪元素清除法 2.5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden 清除浮动 ➢ 含义&#…

springboot+java大学生新生入学报到报道系统+jsp004

新生报到系统分为学院管理员&#xff0c;宿舍管理员&#xff0c;财务管理员&#xff0c;辅导员&#xff0c;学生五种登录身份 学院管理员界面登入后台后有个人信息的展示&#xff0c;可对余下的四种身份信息进行增删改查&#xff0c;可进行对高考信息的导入导出&#xff0c;对报…

藏经阁(八)LCD控制器 ILI9341 解析

文章目录 TFT屏幕介绍LCD控制器ILI9341控制器内部框图ILI9341时序详解RGB565数据格式 TFT屏幕介绍 LCD(Liquid CrystalDisplay)的全称是液晶显示器&#xff0c;是现在用的比较多的手机屏幕材料&#xff0c;特点是价格便宜&#xff0c;使用普及广泛&#xff0c;在显示的时候需要…

Spring Boot 中如何使用 Spring Cloud Alibaba 实现微服务治理

Spring Boot 中如何使用 Spring Cloud Alibaba 实现微服务治理 在现代化的微服务架构中&#xff0c;服务的数量和复杂度越来越高&#xff0c;如何有效地管理这些服务变得越来越重要。Spring Cloud Alibaba 提供了一套完整的微服务治理解决方案&#xff0c;包括服务注册与发现、…

自动化托盘四向穿梭车密集库|HEGERLS托盘四向穿梭车系统具有哪些核心技术?

随着国内外物流行业需求的快速上升&#xff0c;托盘四向穿梭式立体库因其在流通仓储体系中所具有的高效密集存储功能优势、运作成本优势与系统化智能化管理优势&#xff0c;已发展为仓储物流的主流形式之一。河北沃克HEGERLS根据客户需求精准发力&#xff0c;推出了工业级的高品…

煤矿电子封条系统 yolov7

煤矿电子封条系统通过yolov7网络模型算法&#xff0c;煤矿电子封条系统可以实现对煤矿井下人员的出入管理&#xff0c;提高对煤矿井下人员的监管效果。YOLOv7 的策略是使用组卷积来扩展计算块的通道和基数。研究者将对计算层的所有计算块应用相同的组参数和通道乘数。然后&…

chatgpt赋能python:PythonSearch:剖析目前最常用的搜索引擎

Python Search: 剖析目前最常用的搜索引擎 搜索引擎在我们日常生活中扮演着非常重要的角色&#xff0c;尤其是Google、Bing、Yahoo这样的大型搜索引擎。Python作为一种高效的编程语言&#xff0c;在搜索引擎的开发中也发挥着至关重要的作用。本文将解析目前最常用的搜索引擎&a…

chatgpt赋能python:Python说:为什么这门编程语言如此重要?

Python说&#xff1a;为什么这门编程语言如此重要&#xff1f; 在过去的十年里&#xff0c;Python已经成为了最受欢迎的编程语言之一。它具有明显的优势&#xff1a;易于学习&#xff0c;简单易用&#xff0c;支持多种应用场景和操作系统。Python说&#xff1a;不论是初学者还…

IDEA常用插件分享

分享几个常用的IDEA开发插件&#xff0c;极大的提高工作效率 1、Alibaba Java Coding Guidelines 阿里巴巴代码规约&#xff1a; Alibaba Java Coding Guidelines 专注于Java代码规范&#xff0c;目的是让开发者更加方便、快速规范代码格式。该插件在扫描代码后&#xff0c;将…

javaWebssh中小学课件资源系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh中小学课件资源系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。开发环境为TOMCAT…

16:00面试,还没10分钟就出来了 ,问的实在是太...

自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到8月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有个兄弟内推我去了一家互联网公司&#xff0c;兴冲冲见面试官…

微软Build:决心全面拥抱AI

原创 | 文 BFT机器人 在今年的Build大会上&#xff0c;可以看出微软致力于将人工智能技术应用于各个领域&#xff0c;使人们的工作更加高效和便捷。随着AI技术的不断发展&#xff0c;微软也在不断探索和尝试新的应用场景。目前&#xff0c;微软已经在其产品和服务中深度融合了…

1200CPU故障诊断

S7-1200/1500CPU由于扩展模块、PN总线等原因可能会导致系统错误报警。CPU上的ERROR指示灯会亮起&#xff0c;此时需要联锁故障安全控制&#xff0c;我们需要读取CPU的故障信息&#xff0c;这里我们先介绍直接读取ERROR指示灯状态判断。 1、CPU状态指示灯 博途右侧指令树&#…

Linux - 第18节 - 网络基础(传输层)

1.传输层 在学习HTTP等应用层协议时&#xff0c;为了便于理解&#xff0c;可以简单的认为HTTP协议是将请求和响应直接发送到了网络当中。但实际应用层需要先将数据交给传输层&#xff0c;由传输层对数据做进一步处理后再将数据继续向下进行交付&#xff0c;该过程贯穿整个网络协…

不愧是字节出来的,太厉害了...

前段时间公司缺人&#xff0c;也面了许多测试&#xff0c;一开始瞄准的就是中级水准&#xff0c;当然也没指望能来大牛&#xff0c;提供的薪资在15-20k这个范围&#xff0c;来面试的人有很多&#xff0c;但是平均水平真的让人很失望。看了简历很多上面都是写有4年工作经验&…

51单片机-串口通信

目录 1.什么是通信 1.1.通信的概念 1.2.传送方式 1.3.同步方式 1.4.传送方向 1.5.校验方式 2.单片机串口介绍 2.1.硬件电路 2.2.电平标准 2.3.常见接口 2.4.内部结构 2.5.相关寄存器 2.6.工作模式&#xff08;模式1&#xff09; 2.7.如何配置串口中断 3.实际应用…

【手撕MyBatis源码】JDBC处理器StatementHandler

文章目录 回顾MyBatis的执行流程StatementHandler定义与结构PreparedStatementHandler执行流程参数处理参数转换参数映射参数赋值 结果集处理 回顾MyBatis的执行流程 MyBatis是一个基于JDBC的Dao框架&#xff0c;但前面我们提到的会话、执行器完全没有提到JDBC&#xff0c;原因…

python实现科学计算与自定义手绘风

目标&#xff1a; 1.运用科学计算库进行矩阵分析和数值运算&#xff1b; 2.掌握numpy库的使用。 要点&#xff1a;这是一个使用numpy和PIL库提取图像特征形成手绘效果的实例。 使用PIL库获取了图像的轮廓&#xff0c;虽然提取了轮廓,但这个轮廓缺少立体感&#xff0c;视觉效果不…

STL简介与类模板,函数模板的联系,迭代器的引入与初步简单认识

什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 STL的版本 原始版本&#xff1a;Alexander Stepanov、Meng Lee 在惠普实验室完成的原…