学习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>
相关推荐
前端小巷子8 分钟前
CSS单位完全指南
前端·css
FAREWELL0007526 分钟前
C#进阶学习(十六)C#中的迭代器
开发语言·学习·c#·迭代器模式·迭代器
无敌小茶29 分钟前
Linux学习笔记之动静态库
linux·笔记
SunTecTec1 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
DXM05211 小时前
牟乃夏《ArcGIS Engine地理信息系统开发教程》学习笔记3-地图基本操作与实战案例
开发语言·笔记·学习·arcgis·c#·ae·arcgis engine
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作