css基础知识笔记
一言：
“放任误解就是撒谎。”
前言
写在开始：
今天来看一眼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" />
总结
通过学习css可以让网页看起来更加美观，而且功能也更强大。Emmet语法可以让你更快地写代码，节省时间。
并且，我们要有一个结构和样式相分离思想
只要多加练习，小牛马其实很有趣！
Vscode不知不觉就用了十多个小时呢
hhh 一起加油奥
小牛吗学前端
原文地址：https://blog.csdn.net/2301_79175212/article/details/142436006
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！