静态网页开发技术之CSS_静态网页 css-CSDN博客

本文链接：https://blog.csdn.net/weixin_44262126/article/details/113663054

本文介绍了CSS的基础知识，包括CSS的定义、语法规则、与HTML的结合方式（内联、内部、外部）以及选择器的使用，如标签选择器、id选择器和class选择器。通过实例解析了如何应用CSS改变网页元素的样式。

摘要由CSDN通过智能技术生成

1）文笔有限，如果发现博客有书写有误的地方恳请读者直言不讳，我一定会第一时间改正。
2）代码的具体实现可以参考代码中的注释，如果由于注释不清楚而不明白相应原理，可以与作者私聊。码字不易，有兴趣的小伙伴点个赞呗，大家相互学习。

1 定义

CSS 的全称是 Cascading Style Sheets，即层叠样式表。它是用于增强网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

2 CSS的语法规则

在这里插入图片描述
其中，语法各部分的含义如下：

选择器： 浏览器根据选择器决定受 CSS 样式影响的 HTML 标签
属性： 需要改变的样式名，并且每个属性都有一个值。
声明： 属性和值被冒号分开，并由花括号包围，这样就组成了一个完的样式声明。

3 CSS 与 HTML的三种结合方式

利用一个实例来介绍三种结合方式的区别。

需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。

1）直接在 HTML 的标签的 style 属性上设置来修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。-->
    <div style="border: 1px solid red;">div标签1</div>
    <div style="border: 1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

2）在 head 标签中，使用 style 标签来定义各种自己需要的 CSS 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码."text/css" 是固定的-->
    <style type="text/css">
        /* 需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。*/
        div{
    
            border