深度学习网页前端之CSS

写在前面

你如果问我CSS是什么CSS就是CSS啊

那我可以说，平时浏览网页的主要内容就算由CSS构成的，如果说HTML是骨架，那么CSS就是主要的血肉

看看菜鸟教程上是怎么解释的:image-20250329160026108

CSS基础语法

CSS由两个主要的部分构成:

  • 选择器 //需要改变样式的HTML元素
  • 一条或多条说明 //每给说明=1个属性+1个值

每个属性有一个值。属性和值被冒号分开

一般都放在head部分的style里

大概长这个样子

image-20250329160327242

css的注释使用经典的/* */

对于多模块的处理

用过F12的都知道，一个成熟的网页远远不止一种单调的元素，而是能让你眼花缭乱的，这就是通过选择器来进行不同的渲染的

id 选择器

在{}前加上#[选择器名字]

在下面要使用这些属性+值的部分的开始标签加上id="[选择器名字]"

这样就大功告成了

[!IMPORTANT]

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

class选择器

class选择器用于描述一组元素的样式，使用经典款前后闭合

head部分:.

.[选择器名字]{
属性与值
}

body部分: 

<div class="[选择器名称]">

</div>

CSS的插入

CSS的插入方式有三种

  • 外部样式表
  • 内部样式表
  • 内联样式

外部样式表

就和图片差不多，从服务器的目录下引入样式表

<!-- html内 -->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
/*CSS文件内*/
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

浏览器会从css文件中读取样式声明，并根据声明来格式文档

用作外部表的CSS文件不能包含任何的 html 标签

不要属性值和单位之间留空格:如 margin-left: 20 px应该写为margin-left: 20px

内部样式表

单个文档需要特殊样式时，就使用内部样式表：

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

样式的继承

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {  color:red;    text-align:left;    font-size:8pt; }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {    text-align:right;    font-size:20pt; }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red; text-align:right; font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

样式的优先级为:

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

元素

Backgrounds

background-color:

  • 页面: body{background-color: }
  • 正文: p{background-color:}
  • 标题: h1{background-color: }
  • 指定模块: div{background-color:}

backgound-image

描述了元素的背景图像

  • 实例
body{background-image: url('paper,gif')}