first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,25 @@
@font-face {
font-family: ziti;
src: url("./shangshouzhaocaimaoti.ttf");
}
/* .font{
font-family: ziti;
font-size: 50px;
} */
/* .font .demo {
font-family: ziti;
font-size: 50px;
} */
/* .demo .font{
font-family: ziti;
font-size: 50px;
} */
/* .demo,.font{
font-family: ziti;
font-size: 50px;
} */
.font > .font2{
font-family: ziti;
font-size: 50px;
}

View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css练习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- <p class="font">你好</p>
<div class="demo">
你好啊
</div> -->
<div class="demo">
你好啊
<p class="font">
你好
<span class="font2">年后呀</span>
</p>
<p class="font_1">你好</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,101 @@
css 写法
三种:
内部写法(写在开始标签内部的)
<p style="color: blue;">这是测试文字</p>
优先级最高
!important 提示css属性的优先级
内联写法(写在head里面的)
外链写法(单独一个css文件)
基本写法:
选择器 {
属性名: 属性值 (可选 !important)
}
组合写法:
选择1 选择器2: 选择 标签1 中 的 标签2 简写:嵌套关系
选择1 > 选择器2: 选择 父标签为1 中 的 2标签 简写:嵌套关系
选择1,选择器2: 同时选中 标签1和2
选择1+选择器2: 选中 紧跟在 标签1 后面 的标签2
选择器: 找人的一种方式
标签选择器
给标签取个名字
类选择器 class (简写 . )
id选择器 简写 #
这个名字是这个网页唯一的
* 通配符选择器
一般用来清除 标签 的 默认样式
伪类选择器
:hover
:focus
:before
:after
路径写法:
绝对路径
相对距离
./ 当前路径开始寻找
../ 从当前位置返回上一级开始寻找
/ 从当前路径的开始位置开始寻找
css属性学习:
display: 可以隐藏显示元素,将块 和 行 进行 相互转换
inline-block 同时具有 行标签 放在一行的特性,还具有块标签可以设置宽高的特殊
inline 行标签
block 块标签
none 隐藏元素
text-decoration: none; 清除下划线
text-shadow:13px 6px 2px #f00 文字加阴影
font-size: 30px; 设置字体大小
font-weight: bold; 加错
color: red; 设置颜色
background: red; 设置背景色
background-size: cover; 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
background-size: contain;保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
background-attachment: fixed;定义滚动时背景图像相对于谁固定
background-image: ;设置背景图
text-align: center; 文字在父元素的宽度内部居中
opacity: 0 ~ 1; 设置透明度
overflow-y: scroll; 按照y轴滚动
line-height 垂直居中 数值和父元素的高度一样
注意:只针对单行文字
父元素内部子元素的居中方式
vertical-align 垂直居中
letter-spacing: 3px; 字符之间的间距(x轴)