深入理解CSS 学习笔记 | 豆包MarsCode AI刷题

用户784027986316
42 阅读3分钟

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

把整个网页比作一个房子，css相当于是房子的装饰。

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

示例：

p
{
    color:red;
    text-align:center;
}

插入样式表的方法有三种:

  • 外部样式表(External style sheet)

当样式需要应用于很多页面时，外部样式表将是理想的选择。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 内部样式表(Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。

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

当样式仅需要在一个元素上应用一次时。

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

选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

#id1
{
    text-align:center;
    color:red;
}
class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

.class1 {text-align:center;}

块级元素:

不和其他盒子并列摆放，生成块级盒子，常见的块级元素有<body>、<article>、<div>、<main>、<section>、<h1-6>、<p>、<ul>、<li>等。 display:block

行级元素:

和其他行级盒子一起放在一行或拆开成多行，生成行级盒子，内容分散在多个行盒中， 常见的行级元素有<span>、<em>、<strong>、<cite>、<code>等。 display:inline

display属性

display: block;将元素设置为块级元素

display: inline;将元素设置为行内元素

display: inline-block;将元素设置为行内块元素。

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 box.png

  • Margin(外边距)  - 清除边框外的区域，外边距是透明的。
  • Border(边框)  - 围绕在内边距和内容外的边框。
  • Padding(内边距)  - 清除内容周围的区域，内边距是透明的。
  • Content(内容)  - 盒子的内容，显示文本和图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: black;
    width: 300px;
    border: 25px solid pink;
    padding: 25px;
    margin: 25px;
	color:pink
}
</style>
</head>
<body>



<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 粉色边框。</div>

</body>
</html>

微信图片_20241107171029.png

浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Flexbox和Grid（自适应布局）

定位

position 属性的五个值：

  • static

静态定位的元素不会受到 top, bottom, left, right影响。

  • fixed

元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
</body>
</html>

微信图片_20241107194059.png

  • relative

相对定位元素的定位是相对其正常位置。

微信图片_20241107194307.png

  • absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

avatar
文章
阅读
粉丝