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

css基础知识笔记

news 来源：原创 2024/9/23 16:33:21

一言：

“放任误解就是撒谎。”

文章目录

前言
- 文章有误敬请斧正不胜感恩！
- - 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" />
```