HTML_CSS学习:CSS的编写位置

一、位置_行内样式

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置_行内样式</title>
</head>
<body>
<!--    行内样式:写在标签Style属性中,又称内联样式-->
    <h1 style="color:#0c997f;font-size:60px;">欢迎来到尚硅谷学习</h1>
    <h2 style="color:#0c997f;font-size:60px;">欢迎学习前端</h2>
</body>
</html>

二、位置_内部样式

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    内部样式:写在html页面的内部,将所有的CSS代码提取出来,单独放在<style>标签中-->
    <title>位置_内部样式</title>
    <style>
        h1{
            color:#0c997f;
            font-size:60px;
        }
        h2{
            color: #0c1399;
            font-size:100px;
        }
        p{
            color: #15a034;
            font-size: 100px;
        }
        img{
            width: 1240px;
        }
    </style>

</head>
<body>
    <h1>欢迎来到尚硅谷学习</h1>
    <h2>欢迎学习前端</h2>
    <p>信阳农林学院欢迎你</p>
    <p>信阳师范大学欢迎你</p>
    <p>信阳学院欢迎你</p>
    <p>信阳职业技术学院欢迎你</p>
<!--    <img src="../pictures/喜羊羊.jpg" alt="喜羊羊" width="960">-->
    <img src="../pictures/喜羊羊.jpg" alt="喜羊羊">

</body>
</html>

三、位置_外部样式

相关代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    外部样式:写在单独的.css文件中,随后在HTML文件中引入使用-->
    <title>位置_内部样式</title>
<!--    <link>标签要写在<head>标签中-->
<!--    外部样式优势:样式可以复用、结构清晰、可以触发浏览器的缓存机制,提高访问速度,实现结构与样式的完全分离-->
    <link rel="stylesheet" href="position3.css">

</head>
<body>
    <h1>欢迎来到尚硅谷学习</h1>
    <h2>欢迎学习前端</h2>
    <p>信阳农林学院欢迎你</p>
    <p>信阳师范大学欢迎你</p>
    <p>信阳学院欢迎你</p>
    <p>信阳职业技术学院欢迎你</p>
<!--    <img src="../pictures/喜羊羊.jpg" alt="喜羊羊" width="960">-->
    <img src="../pictures/喜羊羊.jpg" alt="喜羊羊">

</body>
</html>
相关推荐
Broken Arrows4 小时前
Linux学习——管理网络安全(二十一)
linux·学习·web安全
今天也要学习吖4 小时前
谷歌nano banana官方Prompt模板发布,解锁六大图像生成风格
人工智能·学习·ai·prompt·nano banana·谷歌ai
雁于飞5 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫7 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css