前端入门-CSS学习笔记 | 豆包MarsCode AI刷题

用户436786637470
292 阅读7分钟

css全名是‘Cascading Style Sheets',中文名是层叠样式表，css是用于定义网页样式和布局的样式表语言，通过css，可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

css与html的关系，比如盖一个房子，html相当于房子的骨架，而css相当于装修。

CSS语法

css通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

选择器{

属性1：属性值1；

属性2：属性值2；

}

1.选择器的声明中可以写无数属性

2.声明的每一行属性，都需要以英文分号结尾

3.声明中的所有属性和值都是以键值对这种形式出现的

/*p标签选择器*/
p{
  color:blue;
  font-size:16px;
}

css三种导入方式

内联样式

内部样式

外部样式

三种导入方式的优先级：内联样式>内部样式>外部样式，优先级高的会覆盖优先级低的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS导入方式</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        p {
            color: red;
            font-size: 36px;
        }
        h2 {
            color: green;
            font-size: 24px;
        }
      </style> 
</head>
<body>
    <p>This is a paragraph.</p>
    <h1 style="color: blue;">第一段,使用内联样式</h1>
    <h2>第二段,使用内部样式</h2>
    <h3>第三段,使用外部样式</h3>
​
</body>
</html>
/*css文件定义h3*/
h3 {
  color: yellow;
  font-size: 20px;
  }
​

image-20241104165020132.png

选择器

CSS选择器用于选择想要样式化的HTML元素。CSS选择器可以基于元素类型、类、ID、属性等来选择元素。以下是一些常用的CSS选择器：

  1. 元素选择器：根据元素名称选择元素

    p {
  color: red;
}

  2. 类选择器：根据元素的类属性选择元素。

    .example {
  font-size: 20px;
}

  3. ID选择器：根据元素的ID属性选择元素。

    #unique {
  background-color: yellow;
}

  4. 属性选择器：根据元素的属性及属性值选择元素。

    input[type="text"] {
  border: 1px solid black;
}

  5. 后代选择器：选择所有在指定元素之内的元素。

    div p {
  color: blue;
}

  6. 子元素选择器：选择所有直接子元素。

    div > p {
  color: green;
}

  7. 相邻兄弟选择器：选择紧接在指定元素后的元素。

    h1 + p {
  color: purple;
}

  8. 通用兄弟选择器：选择所有指定元素后的同级元素。

    h1 ~ p {
  color: orange;
}

  9. 伪类选择器：根据元素的状态选择元素。

    a:hover {
  color: pink;
}

  10. 伪元素选择器：选择元素的特定部分。

    p::first-line {
  color: brown;
}

    实践一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        /* 元素选择器 */
        h2
        {
            color:red;
        }
        /* 类选择器 */
        .highlight
        {
            background-color:blue;
        }
        /* id选择器 */
        #abc
        {
            color:green;
        }
        /* 通用选择器 */
        *{
            font-family: 'KaiTi';
        }
        /* 子元素选择器 */
       .father >.son
        {
            color:purple;
        }
        /* 后代元素选择器 */
        .father p
        {
            color:orange;
        }
        /* 相邻兄弟选择器 */
       h3 + p
        {
            color:pink;
        }
        /* 伪类选择器 */
        #element:hover
        {
            text-decoration: underline;
        }
        /* 选中第一个子元素：first-child
        /* 选中最后一个子元素：last-child
        
        */
    </style>
</head>
<body>
    <h1>不同选择器的样式</h1>
    <h2>元素选择器</h2>     
    <p class="highlight">类选择器This is a highlighted paragraph</p>
    <h3>类选择器</h3>
    <h3 id="abc">id选择器</h3>
    <div class="father">
        <p class="son">子元素选择器</p>
        <div>
            <p class="grandson">后代元素选择器</p>
        </div>
    </div>
    <p>普通p</p>
    <h3>相邻兄弟</h3>
    <p>另一个p标签</p>
    <h3 id="element">伪类选择器</h3>
    
</body>
</html>

image-20241104164939456.png

属性

  • background-color：设置元素的背景颜色。
  • font-family：设置字体系列。
  • font-size：设置字体大小。
  • border：设置元素的边框。
  • border-width：设置边框宽度。
  • border-style：设置边框样式（如实线、虚线）。
  • border-color：设置边框颜色。
  • margin：设置元素的外边距。
  • padding：设置元素的内边距。
  • width：设置元素的宽度。
  • height：设置元素的高度。
  • display：设置元素的显示类型（如块级、内联）。
  • position：设置元素的定位类型（如静态、相对、绝对、固定）。
  • top、right、bottom、left：设置元素相对于其定位上下文的位置。

元素可以按照其显示类型分为三种：块级元素（block-level elements）、行内元素（inline elements）和行内块元素（inline-block elements）。

  1. 块级元素：块级元素会独占一行，占据其父容器的全部宽度。常见的块级元素有<div>、<p>、<h1>到<h6>、<ul>、<ol>等。块级元素可以设置宽度和高度，并且默认情况下，块级元素的上下边距（margin）和上下内边距（padding）会被保留。
  2. 行内元素：行内元素不会独占一行，只占据其内容所需的空间。常见的行内元素有<a>、<span>、<img>、<strong>、<em>等。行内元素不能设置宽度和高度，其宽度和高度由其内容决定。行内元素的上下边距（margin）和上下内边距（padding）在垂直方向上不会影响其他元素的位置。
  3. 行内块元素：行内块元素结合了行内元素和块级元素的特性。行内块元素不会独占一行，但可以设置宽度和高度。常见的行内块元素有<img>、<input>等。行内块元素的上下边距（margin）和上下内边距（padding）会被保留。

可以使用display属性来改变元素的显示类型。例如，可以使用display: block;将元素设置为块级元素，使用display: inline;将元素设置为行内元素，使用display: inline-block;将元素设置为行内块元素。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .block {
            display: block;
            width: 200px;
            height: 100px;
            background-color: red;
        }
       .inline {
            display: block;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1 style="font: 100px Arial, sans-serif;">CSS属性</h1>
    <p style="line-height: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </p>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
</body>
</html>

image-20241104170204215.png

盒子模型

image-20241104170241582.png CSS盒子模型（Box Model）是网页布局的基础，它定义了元素的内容、内边距、边框和外边距。以下是盒子模型的各个属性：

  1. 内容（Content） ：

    • width：设置元素的宽度。
    • height：设置元素的高度。

  2. 内边距（Padding） ：

    • padding：设置元素所有边的内边距。
    • padding-top、padding-right、padding-bottom、padding-left：分别设置元素上、右、下、左的内边距。

  3. 边框（Border） ：

    • border：设置元素的所有边框。
    • border-width：设置边框的宽度。
    • border-style：设置边框的样式（如实线、虚线）。
    • border-color：设置边框的颜色。
    • border-top、border-right、border-bottom、border-left：分别设置元素上、右、下、左的边框。

  4. 外边距（Margin） ：

    • margin：设置元素的所有外边距。
    • margin-top、margin-right、margin-bottom、margin-left：分别设置元素上、右、下、左的外边距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>
    <style>
        .demo{
            background-color: #f2f2f2;
            display: inline-block;
            border: 5px solid yellowgreen;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="demo">b站学html</div>
</body>
</html>

image-20241104170526328.png

浮动

网页布局方式有以下五种： 标准流（普通流、文档流）：网页按照元素的书写顺序依次排列

浮动

定位

Flexbox和Grid（自适应布局）

标准流就是块级占一行，行内元素一行放好多个元素。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。相对于父元素浮动，只会在父元素的内部移动。

三大特性：

脱标、一行显示，顶部对齐、具备行内块元素特性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            background-color: aquamarine;
            /* height: 200px; */
            border: 3px solid black;
            /* overflow: hidden; */
        }
        /* .father::after {
            content: "";
            display: table;
            clear: both;
        } */
       .left-son {
            float: left;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }    
       .right-son {
            float: right;
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    <p>这是一段文字，下面是另一个浮动元素。</p>
</body>
</html>

image-20241104171805465.png 三个注释是解决中间背景缺少的三个方法

image-20241104172004226.png

定位

相对定位：相对于元素在文档流中的正常位置进行定位

绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流

固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1
        {
            height: 400px;            
            background-color: aqua;      
        }
        .box-narmal
        {
            height: 100px;  
            background-color: yellow;
            width: 100px;
        }
        .box-relative
        {
            height: 100px;  
            background-color: red;
            width: 100px;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .box2
        {
            height: 400px;            
            background-color: yellowgreen; 
            margin-bottom: 400px;
        }
        .box-absolute{
            height: 100px;  
            background-color: blue;
            width: 100px;
            position: absolute;
            left: 50px;
        }
        .box3
        {
            height: 400px;
            width: 400px;            
            background-color: pink;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-narmal"></div>
        <div class="box-relative"></div>
        <div class="box-narmal"></div>
    </div>
    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-narmal"></div>
        <div class="box-absolute"></div>
        <div class="box-narmal"></div>
    </div>
    <h1>固定定位</h1>
    <div class="box3"></div>
   
</body>
</html>

image-20241104173542990.png

image-20241104173558260.png

avatar
文章
阅读
粉丝