当前位置：首页 > article >正文

css基础知识笔记

article 2024/9/25 17:28:10

一言：

“放任误解就是撒谎。”

文章目录

前言
- 文章有误敬请斧正不胜感恩！
- - CSS基础教程
  - - 0.文本样式基础
    - 1. CSS选择器
    - 2. CSS布局技巧
    - 3. 响应式设计
    - 4. Emmet语法
总结

前言

写在开始：

今天来看一眼CSS基础知识。
好几天没更新了

先更一篇

在这里插入图片描述

文章有误敬请斧正不胜感恩！

以下是本篇文章正文内容，

CSS基础教程

0.文本样式基础

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
            /* text-align: left;(默认) */
        }
        /* 装饰文本 */
        /* div { */
            /* text-decoration: underline;(常用) */
            /* text-decoration: line-through; */
            /* text-decoration: none(默认)
            当值为none时可以删除链接自带的下划线 */
            
        /* } */

        /* 颜色color部分
        有三个
        预设值
        十六进制(常用)
        rgb
         */
        a {
            text-decoration: none;
        }
        /* 文本缩进 */
        /* 段落的首行缩进常用 */
        p {
            text-indent: 20px;
            /* text-indent: -20px;(可以负数,往左缩进) */
            text-indent: 2em;
            /* em是一个相对单位,当前元素的1个文字的大小 */
            line-height: 26px;
        }
        /* 行间距 */
        /* 就是line和line之间的距离
        三个部分 :

        上间距
        文本高度
        下间距
加起来才是行间距
        */
        /* line-height */

        
    </style>
</head>
<body>
    <div>小牛马学前端</div>
    <a href="#">测试连接</a>
    <a href="#">测试连接</a>
    <p>`String` 类是 Java 中用于表示字符串的类，字符串是不可变的对象。与 `StringBuffer` 和 `StringBuilder` 不同，对 `String` 的任何修改操作都会生成一个新的字符串对象。以下是 Java `String` 类的一些常用方法：</p>

    <div>行间距</div>



</body>
</html>

在这里插入图片描述
OK呀兄弟们，小牛马学前端，启动！

1. CSS选择器

选择器是我们用来告诉浏览器要修改哪些元素的方式。下面是一些常见的选择器和它们的使用方法。

类型选择器：选择所有某种类型的元素。

h1 {
  color: blue; /* 所有<h1>元素的文字颜色变成蓝色 */
  font-size: 28px; /* 字体大小设置为28像素 */
}

类选择器：选择所有带有特定类名的元素。类名以.开头。

.button {
  background-color: green; /* 所有.button类的元素背景颜色变成绿色 */
  color: white; /* 文字颜色变成白色 */
  padding: 10px 20px; /* 上下内边距10像素，左右内边距20像素 */
  border: none; /* 去掉边框 */
  border-radius: 5px; /* 圆角5像素 */
  cursor: pointer; /* 鼠标悬停时显示为手指形状 */
}

ID选择器：选择特定ID的元素。ID以#开头。

#header {
  background-color: #333; /* ID为header的元素背景颜色设置为深灰色 */
  color: white; /* 文字颜色变成白色 */
  padding: 20px; /* 上下左右内边距20像素 */
  text-align: center; /* 文字居中对齐 */
}

组合选择器：选择特定条件下的元素。

div > p {
  color: red; /* 所有直接在<div>元素下的<p>元素文字颜色变成红色 */
  margin: 5px 0; /* 上下外边距5像素 */
}

伪类选择器：用于选择元素的特定状态，比如鼠标悬停。

a:hover {
  color: orange; /* 鼠标悬停在链接上时，文字颜色变成橙色 */
  text-decoration: underline; /* 添加下划线 */
}

2. CSS布局技巧

布局指的是我们如何安排网页中的元素。下面是两种常用的布局方式。

Flexbox布局：适合简单的横向或纵向排列。

.flex-container {
  display: flex; /* 将这个容器设置为flex布局 */
  justify-content: space-between; /* 元素之间均匀分配空间 */
  align-items: center; /* 元素垂直居中 */
  height: 100px; /* 容器高度100像素 */
  background-color: lightblue; /* 背景颜色设置为淡蓝色 */
}

.flex-item {
  width: 100px; /* 每个元素宽度100像素 */
  height: 100px; /* 每个元素高度100像素 */
  background-color: coral; /* 每个元素背景颜色为珊瑚色 */
  text-align: center; /* 文字水平居中 */
  line-height: 100px; /* 文字垂直居中 */
}

Grid布局：适合复杂的网格布局。

.grid-container {
  display: grid; /* 将这个容器设置为grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 三列，宽度均匀 */
  gap: 10px; /* 元素之间的间距10像素 */
  background-color: lightgray; /* 背景颜色设置为浅灰色 */
}

.grid-item {
  background-color: #ccc; /* 每个网格项的背景颜色 */
  padding: 20px; /* 每个网格项内边距20像素 */
  text-align: center; /* 文字居中对齐 */
}

3. 响应式设计

使用媒体查询，让网页在不同设备上也能好看。

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column; /* 小屏幕时元素改为垂直排列 */
  }

  .grid-container {
    grid-template-columns: 1fr; /* 小屏幕时改为单列布局 */
  }
}

4. Emmet语法

Emmet是一种快速编写HTML和CSS的工具。下面是一些基本用法：

输入div并按Tab键会生成：
```
<div></div>
```
输入ul>li*3并按Tab键会生成一个包含三个<li>的无序列表：
```
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
```
输入input[type="text"].form-control并按Tab键会生成：
```
<input type="text" class="form-control" />
```