CSS基础学习

screamn

已于 2023-10-04 22:25:52 修改

阅读量49

点赞数 1

分类专栏： CSS 前端文章标签： css 学习前端

于 2023-09-07 09:25:16 首次发布

本文链接：https://blog.csdn.net/screamn/article/details/132729587

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

介绍

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页或文档外观和样式的标记语言。它与 HTML 结合使用，为网页添加样式、布局和视觉效果。

CSS 的主要作用是将网页的结构与样式分离，使得开发者可以通过 CSS 文件或样式块来定义网页的外观，而不需要直接修改 HTML 文件。这种分离的设计使得网页的样式表现更加灵活、易于维护和扩展。

基本写法

<!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 type="text/css">
        /* 此处放置Css代码 */
    </style>
</head>
<body>
    
</body>
</html>

CSS的三种链接方式

通过直接在标签的style属性上设置"key:value value;"修改标签样式
```
<div style="border:1px solid red">标签</div>
```

在head标签中加入style标签

<!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 type="text/css">
        /* 此处放置Css代码 */
        div{
            border:1px solid red;
        }
        
    </style>
</head>
<body>
   <div>标签</div>
</body>
</html>

使用link标签链接CSS文件，在CSS文件中书写相应的代码来规定相应的格式
```
<link rel="stylesheet" href="styles.css" type="text/css">
```
只需要在CSS文件styles中填写相应的CSS代码就可以完成样式改变，注意href属性中填写的是对应的路径

CSS的三种样式

1.选择器样式：名称:{行为}

<!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 type="text/css">
        /* 此处放置Css代码 */
        div{
            border:1px solid red;
        }
        
    </style>
</head>
<body>
    <!-- 直接放置div标签就可以达到显示的效果 -->
   <div>标签</div>
</body>
</html>

2.类样式：.名称:{行为}

<!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 type="text/css">
        /* 此处放置Css代码 */
        div{
            border:1px solid red;
        }
        .p{
            font-size:100px;
        }
        
    </style>
</head>
<body>
    <!-- 直接放置div标签就可以达到显示的效果 -->
   <div>标签</div>
   <p class="p">段落</p>
</body>
</html>

3.ID样式：#名称:{行为}

<!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 type="text/css">
        /* 此处放置Css代码 */
        div{
            border:1px solid red;
        }
        .p{
            font-size:100px;
        }
        #p4{
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 直接放置div标签就可以达到显示的效果 -->
   <div>标签</div>
   <p class="p">段落</p>
   <div id="p4">
    AAA
   </div>
</body>
</html>

常用的属性：

边框:border

border:1px solid red;

颜色：color

color:red

宽度高度:width height 也可以写成百分比形式:20%

width="10px";
height="10px";

背景颜色：bockground-color

background-color:red

字体大小:font-size

font-size:10px

文本居中：text-align

text-align:center;

设置边距：

margin-left: 用于设置元素的左侧外边距，即元素与其相邻元素之间的空白区域。

margin-right: 用于设置元素的右侧外边距，即元素与其相邻元素之间的空白区域。

.example {
  margin-left: 10px;     /* 左外边距为 10 像素 */
  margin-right: 20px;    /* 右外边距为 20 像素 */
}

.another-example {
  margin-left: 2em;      /* 左外边距为字体大小的两倍 */
  margin-right: 5%;      /* 右外边距为父元素宽度的 5% */
}

资料

这里给读者贴个网站，读者可以通过该网站自行查询

CSS 参考手册 (w3school.com.cn)

实例操作：去除超链接的默认格式

a{
color:black;
text-decoration: none;
}

CSS 样式将按钮转换为无边框并且鼠标悬停时显示背景色

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      text-align: center;
      text-decoration: none;
      border: none;
      cursor: pointer;
    }

    .button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <a href="#" class="button">Click me</a>
</body>
</html>

上面的代码中，我们定义了一个 .button 类作为按钮的样式。

display: inline-block;：使按钮以块级元素的方式显示，并且可以设置宽度和高度。
padding: 10px 20px;：设置按钮的内边距。
background-color: #007bff;：设置按钮的背景颜色。
color: white;：设置按钮文本的颜色为白色。
text-align: center;：居中按钮文本。
text-decoration: none;：去除按钮的下划线。
border: none;：去除按钮的边框。
cursor: pointer;：将鼠标悬停在按钮上时的光标样式改为手型。

使用 CSS 样式创建一个响应式的网格布局

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px;
    }

    .grid-item {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
  </div>
</body>
</html>

上面的代码中，我们定义了一个 .grid-container 类作为网格容器，以及 .grid-item 类作为网格项。

.grid-container：
- display: grid;：将元素设置为网格布局容器。
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));：定义网格列的数量和宽度。这里使用 repeat() 函数创建自适应的列数，每列的最小宽度为 200px，使用 1fr 表示剩余空间平均分配给各列。
- grid-gap: 10px;：设置网格项之间的间距。
.grid-item：
- background-color: #f2f2f2;：设置网格项的背景颜色。
- padding: 20px;：设置网格项的内边距。
- text-align: center;：居中网格项的内容。