首页Web前端Udemy
<link rel="stylesheet" href=".css" />

# CSS 基础

# 1. 基本构成

基于一个选择器 可以使用属性 后面跟着数值 这个可以称之为一个声明
！[[Pasted image 20230302173916.png|200]]

# 2. 三种形式

  • 内联
  • 内部
  • 外部

# 3. 遵循规则

# 1. 继承性

1. 继承的规则很容易被覆盖 2. 主要是与文本相关的才可以继承 3. 边框不会继承

使用 inherit 强制继承 例如 color inherit

# 2. 冲突性

![[Pasted image 20230303002933.png|200]]

  • 全部使用 但如果遇到冲突的声明
  • (!important) 最高
  • 最高优先级是 ID (多个 ID 最后的得到应用)
  • 伪类选择器 优先级比类高
  • 类
  • 元素选择器
  • 通用选择器 *

# 4. 组合器类型

1. 列表组合器：p,h1,h2,h3 {} 2. 后代选择器：footer p {}

使用类选择器 + 元素选择器 优先级是 0.1.1 高于单独使用类选择器 (0.1.0)

3.ID 选择器：#{} (为了给未来留下预备 不要使用它)
4.Class 选择器：.{} 5. 元素选择器 h1 {} 6. 属性选择器！[[Pasted image 20230309201852.png]]

# 5. 盒子模型

内容：可以是文本 图像 视频 种种
边框：仍在是在元素内部
填充：通常是不可见的空白 在内容和边框之间
(以上三个 都是元素的部分)
边距：在元素本身之外 通常用来在两个元素之间 创造空间
FILL AREA：我们定义背景颜色 将占据整个元素的可见部分 包括 content padding border
![[Pasted image 20230303155123.png|300]]

![[Pasted image 20230303155421.png|300]]
最终元素宽度：left border+left padding+width+right padding+right border
最终元素高度：top border+top padding+height+bottom padding+bottom border
空间收缩 (collapsing margins)：有两个占据同一空间的 margin 时 只有一个实际可见 通常的更大的那个

# 代码

简写：一个值：四边 两个值：第一个上下第二个左右 四个值：从上面开始 顺时针绕行

border-collapse: 边界折叠 当相邻两个 border 想要合在一起 使用 collapse 属性

当想设置一个正方形 但是设置 height 没有用时 使用 padding:60% 将他设置为父元素的 60%

border-bottom：1px solid currentcolor currentcolor 属性 就会自动带上文本的颜色

# 关于宽度与高度

  1. 默认块级元素占用与父元素一样的宽度 (详见快级元素) 高度根据元素所需自行决定
  2. 如果设置了很高的高度 只是设置了 content 并且内容默认不会居中
  3. 为图片设置宽度 如果在 HTML 中设置了高度 记得把高度设置为 auto
  4. 使用百分比 是随父容器大小变化 伸缩窗口持续改变
  5. 子元素永远不能比父元素宽
  6. width：100% 于父窗口大小 100%
  7. margin-left 与 margin-right 都设置自动 并且 div 设置数字 会呈现一个非常漂亮的页面居中

# Auto

1. 当设置 auto 时 只根据元素需要多少 就取多少的值
2.margin-left：auto 将自动占据左侧所有宽度 进行右对其 移动到最右边 (前提是需要在 flex 中)

例 在 bird 布局中 左边的数字和右边的图标设置 auto 中间设置 fr

# Boder-box

1. 这是元素布局的默认形式
在这种情况下 我们设置了 width 又设置了 margin 很可能导致一个元素被挤开 所以我们需要一个新的盒子模型
！[[Pasted image 20230304004106.png]]

2. 在这种情况下 宽度从 border 的一侧 到 border 的另一侧

当我们添加一些填充或者 Border 时 这将从 content 中减去
！[[Pasted image 20230304004328.png]]
box-sizing: border-box;

# 6. 行内元素与块级元素

1. 只占他们所需的空间 不会占用一行 叫做内联框 2. 标题 段落 都叫做块级元素 他们会建立换行符 (不能排在一起) 3. 盒子模型仅使用块级元素 占据父元素 content 的整个空间

4. 对内联元素使用盒子模型

  1. 高度 宽度 没有任何影响
  2. margin 也仅仅适用于水平层面
  3. padding 不会连带影响其他内容 (如果是块级元素 其他内容会跟随移动)![[Pasted image 20230303182611.png]]

5.INLINE-BLOCK BOXES 块

  • 只占用内容所需的位置 不会换行
  • 适用于块级盒子 height width margin padding 等

# 代码

改变为块： display:block
改变为内联块： display:inline-block
改变为内联元素 display:inline

# CSS 样式

# 文本的样式

1. 字体类型：font-family 2. 字体大小：font-size (默认为 16) 3. 字体样式：font-style (斜体) 4. 文本格式：text-transform (全部大写) 5. 对其方式：text-aligen (按照其父元素对齐) 6. 文本粗度：font-weight
7.text-decoration 设置为 none 取消下划线 8. 行高：line-height
9.letter-spacing：字母间距

# 列表的样式

1. 列表样式 list-style (取消难看的点)

# 颜色理论

# 1.RGB 图示

![[Pasted image 20230302195553.png|200]] 2. RGBA (红，绿，蓝，透明度)

# 2. 十六进制

![[Pasted image 20230302200042.png]]
当数字相同时 可以缩写 比如上面这个 缩写为：0ff
黑色：#000
白色：#FFF
浅灰色：#EEE
深灰色：#333

# 伪类

# 普通

# nth-child(?)

选择其父类第几个元素

  1. odd：奇数
  2. even：偶数

易错点

  1. article p:nth-firstchild {} 这里是选择 article 的第一个元素是 P 的情况 而不是选择 article 中第一个 P 2. 选择其父元素的第一个子元素

# 链接 (LVHA)

1. 伪类：link：针对有 href 的 a 设置样式 2. 伪类：visited：展示点击过的样式 3. 伪类：hover：设置被锚定的样式 4. 伪类：active：展示点击时的样式

事实上 不只是链接 每一个样式 都有 hover 并且按钮也有
伪类:hover 也是可以进行下一级选择的 比如下一级是 svg 我们可以使用 botton:hover svg {}

# 伪元素

1. 首字母：：first-word 2. 首行：：first-line

# 兄弟选择器

1.h3 + p::firstline {color:red} 所有在 h3 之后的段落第一行变红色

# after 与 before

任何伪元素实际都是行内元素
（一个关于在 h2 标签后面创建一个小方块 现实 TOP 字样的标注）
![[Pasted image 20230303202725.png]]

# 按钮样式

cursor：设置鼠标样式 (pointer 是手)

box-shadow:inset 0 0 0 3px # fff 当想设置按钮的 hover 属性 但是这么做会布局跳跃 可以使用这个方法 向内的边境

# 背景样式

background-image:url () 在 css 中设置图片
background-size：cover 覆盖屏幕

# 图片样式

transform：进行变换 scale () 函数 变换大小 使用这种方法可以旋转木马

lineat-gradient (to right (或者说 45 90deg 都可以),red,blue)：线性渐变 添加两个颜色 如果两个颜色相同 就是单调渐变

z-index：设置图层位置

filter:grayscale (1) 设置灰度 (防止某些画面 尤其是图标 争抢注意力)
filter:brightness (0) 灰度之后完全变黑
opacity: 50% 透明度 让黑色变灰

overflow：当给 box 设置了圆角 但是图片没有设置的时候 使用这个属性 可以让图片随着 box 一起圆角

默认图片属于 inline 样式 两个图片之间会带有烦人的空白 设置为 block 就会消失

# 背景图片

1.css 使用 background-img:url () 引入背景图片
2.backgroune-size:cover 永远覆盖 3. 使用 role="img" 设置图片 使用 aria-label 来设置这个图片的属性 相当于 alt

# 窗口样式

overflow：scroll 超过窗口部分 使用滚动条 (使用这种方法可以配合 select 标签)

# 表单样式

input 元素与 selection 元素
width 设置宽度
padding 设置大小
font-size 设置字体
background：表达颜色
巧妙阴影：box-shadow: 0px 1px 2px rgba (0,0,0,0.1);
伪元素 placeholder 修改默认颜色
color：设置输入之后文字的颜色

焦点状态:focus
outline:none (这是和 border 很像的 但是在盒子模型之外)

# 链接样式

当设置链接下方有一个下划线 hover 时候消失 也不能简单的设置 border 为 none 也会导致布局跳跃 这时候将颜色设置为 transparent 可以解决这个问题

# 封装思想

不要直接设置 margin 当需要的时候 添加一个助手类 margin-right-sm margin-bottom-middle

其次 链接 标题 Grid 都可以封装

对于 grid 也是一样 建立一个.grid 然后再建立 grid-3-cols

Grid 封装 Margin 注意

一般来说 .grid 下面 要设置 margin-bottom 但是有时候 可能 grid 只有一个元素 这个时候 只要在封装下面写上 grid:last {margin-bottom:0} 这样的话 如果这个 grid 只有一个元素 那么底部边距归零

也可以使用.grid:not (:last-child){margin-bottom:9.6rem} 意思是不是最后一个子元素 那么设置 margin-bottom

# 动画效果

1. 设置 transition：设置 all 与 1s 将会以动画的效果 展示过度
2.scroll-behavior: smooth; 在使用 a 设置了 id 链接后 可以平滑滚动过去 (放在 html 标签)

# 特殊动画效果

# 悬停抬升

当设置鼠标悬停在一个购物车上 然后让他向上移动一格 使用 transform:translate (水平，-10px)
配合 transition:all 0.4s; 会做出来一个非常美观漂亮的动画
记得把阴影调大
！[[8 1.gif|200]]

# 丝带

![[Pasted image 20230308202729.png|200]] 1. 使用绝对定位 2. 旋转 transform: rotate (45deg);
3.overflow: hidden;

# 手机导航

![[8 1.gif]]

1. 有几处细节 参考 P135 过程以及代码 2. 关键：
打开时
opacity: 1; (透明度)
visibility: visible; 可见

关闭时：
pointerEvents: 'auto'（鼠标事件关闭）
 visibility: hidden;（不可见）

# Hero 渐变

hero 渐变图举例：background-image:linear-gradient (rgba (0, 0, 0, 0.356), rgba (0, 0, 0, 0.486) ), url (hero.jpg)

# 粘性导航

1. 使用 position 的 fixed 2. 设置背景颜色不透明度为 0.97 3. 设置一个 box-shadow 4. 到跳出 hero 页后 再进行滚动 使用 js

# 代码规范

1.CSS 最上面写字体表 间距表 以及 MAIN GREY COLOR 2. 将 HTML 分成不同的部分 在 CSS 中使用注释表达这些部分

# HTML 重定义

1. 重定义字体大小为 62.5%； 2. 重定义 margin padding 3. 重定义 border-box

# 额外

# CSS 变量

![[Pasted image 20230321204520.png]]