学习CSS第二天

学习文章目录

一.内部样式

写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在 <style> 标签中

语法:

复制代码
<style>
h1 {
color: red;
font-size: 40px;
}
</style>

注意点:

  1. <style> 标签理论上可以放在 HTML 文档的任何地方,但一般都放在 标签
  2. 此种写法:样式可以复用、代码结构清晰
    存在的问题:
  3. 并没有实现:结构与样式完全分离
  4. 多个 HTML 页面无法复用样式
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        h1{
            color:red; 
            font-size: 50px;
        }
        h2{
            color: blue;
            font-size: 60px;
        }
        h3{
            color: aqua;
            font-size: 70px;
        }
        p{
            color: blueviolet;
            font-size: 30px;
        }
        img{
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>我是一个爱猫人士</h1>
    <h2>橘猫</h2>
    <h3>波斯猫</h3>
    <p>狸花猫</p>
    <p>布偶猫</p>
    <p>三花猫</p>
    <p>德文猫</p>
    <img src="./path_test/大胖橘.jpeg" alt="橘猫">
</body>
</html>
相关推荐
大莲芒35 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
viperrrrrrrrrr72 小时前
大数据学习(96)-Hive面试题
大数据·hive·学习
charlie1145141912 小时前
STM32F103C8T6单片机的起始点:使用GPIO输出点亮我们的第一个小灯(HAL库版本)
stm32·单片机·嵌入式硬件·学习·教程·hal库·gpio
木木黄木木3 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
郭涤生3 小时前
第三章:事务处理_《凤凰架构:构建可靠的大型分布式系统》
笔记·架构·系统架构
Li_Ning213 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
每次的天空3 小时前
Android学习总结之算法篇五(字符串)
android·学习·算法
胡八一4 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla4 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
寻丶幽风4 小时前
论文阅读笔记——RDT-1B: A DIFFUSION FOUNDATION MODEL FOR BIMANUAL MANIPULATION
论文阅读·笔记·扩散模型·具身智能·双壁机器人