CSS学习笔记1——编写位置

最新推荐文章于 2024-11-11 00:01:33 发布

芒芒小媛☞Fighting༂

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量278

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_62120946/article/details/140542624

版权

1.行内样式

行内样式，又称内联样式：写在标签的 style属性中。
注意点：

1.style属性的值不能随便写、写要符合CSS语法规范，是名：值；的形式。

2.行内样式表，只能控制当前标签的样式，对其他标签无效。

缺点：书写繁琐、样式不能复用，没有体现出：结构与样式分离 的思想。
只有对当前元素添加简单样式的时候，才会偶尔使用。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
    <h1 style="color:greenyellow;font-size: 60px;">好好学习，天天向上，哈哈哈</h1>   
</body>
</html>

2.内部样式

写在html页面内部，将所有CSS代码提取出来，单独放在 style标签 中。
注意点：

1.style标签理论上可以放在html页面的任何位置，但一般都放在head标签中。

2.这种写法样式可以复用、代码结构清晰

缺点：

1.没有实现结构与样式完全分离。

2.多个html页面无法复用样式

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        h1{
            color:blue;
            font-size: 60px;
        }
        h2{
            color: yellow;
            font-size: 30px;
        }
        p{
            color: black;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <h1>好好学习啊啊啊</h1>
    <h2>好好好</h2>
    <p>我要学前端！！！</p>
</body>
</html>

3.外部样式

写在单独的.css文件中，随后HTML文件中引入使用。（<link rel="stylesheet" href="./xxx.css">）。
注意点：

1.<link>标签写在<head>标签中。

2.<link>标签中，href属性：引入的文档来自于哪里。 rel属性：说明引入的文档与当前文档之间的关系。

优势：样式可以复用、结构清晰、可触发浏览器的缓存机制、提高访问速度，实现了结构与样式的完全分离。
实际开发中，几乎都使用外部样式！

代码示例：

.html文件中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="./position3.css"
</head>
<body>
    <h1>好好学习啊啊啊</h1>
    <h2>好好好</h2>
    <p>我要学前端！！！</p>
    <img src="../image2/3.jpg" alt="贝壳">
</body>
</html>

.css文件中：

h1{
    color:blue;
    font-size: 60px;
}
h2{
    color: yellow;
    font-size: 30px;
}
p{
    color: black;
    font-size: 10px;
}
img{
    width: 300px;
}