【CSS】前端学习笔记（二）

此文是在freecodecamp学习CSS时做的笔记

一、设置元素属性的方式

1. 行内CSS设置

<h2 style="color: red;">CatPhotoApp</h2>

2. 创建样式声明区域

• 每个元素的样式规则都应该有开始和结束大括号（{ 和 }）
• 元素的样式定义在开始和结束样式标签之间
• 所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

<style>
  h2 {
    color: red;
  }
</style>

3. 使用 class 选择器

​ 相比于上一种方法 class 具有可重用性

<style>
  .blue-text {
    color: blue;
  }
</style>
<h2 class="blue-text">CatPhotoApp</h2>

4. id 选择器

• 可以通过 id 选择器来改变单个元素的样式
• 如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。
• 在声明 id 的时候，也必须在名字前插入 # 符号。

#cat-photo-element {
  background-color: green;
}

​ PS：class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标 识单独的唯一的元素

5. [attr=value] 属性选择器

​ 下面的代码会改变所有 type 为 radio 的元素的外边距。

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

二、元素属性

1. 颜色：color

2. 字体大小：font-size

3. 字体族名：font-family

font-family: FAMILY_NAME, GENERIC_NAME;

​ GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体

​ ( 字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来 )、

• 导入谷歌字体库

  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  

4. 元素宽度：width

​ 以 px 为单位

5. 边框

边框具有 border-style、border-color、border-width 属性

border-radius属性可以添加圆角边框，其值可以是以px为单位的像素值，也可以是百分比

6. 背景颜色 : background-color

7. 内边距： padding 外边距： margin

​ HTML 元素都是以矩形为基础。

​ 每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、 外边距 margin 、边框 border。

​ padding 用来控制着元素内容与 border 之间的空隙大小。

​ 外边距 margin 用来控制元素的边框与其他元素之间的 border 距离，如果外边距 为负的，元素占用的空间会变大

• ​ 可以依次声明：padding-top、padding-right、padding-bottom、padding-left属性

• ​ 也可以直接把它们汇总在一行里面一并声明，像是这样：

  padding: 10px 20px 10px 20px;
  

  这四个值按顺时针排序：上、右、下、左

三、继承

​ !important >内联样式 >id选择器 >class选择器 (声明在越后面优先级越高) > 继承样式

• Class 选择器的优先级高于继承样式

  页面上的元素会继承 body 的属性，当重新赋值时，会覆盖掉

• HTML 元素里应用的 class 的先后顺序无关紧要。

  但是，在 <style> 标签里面声明的 class 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。

• color: red !important;
  

四、CSS 变量

--penguin-skin: gray;

​ 通过调用变量名来使用它对应的值。

background: var(--penguin-skin);

1. 给 CSS 变量设置备用值

它是用来让浏览器在找不到你的变量时可以显示一种颜色。

2. 通过浏览器降级提高兼容性

IE不支持CSS变量，可以在变量前添加一个声明，提升浏览器的兼容性

3. 继承CSS变量

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

4. 使用媒体查询更改变量

<style>
  :root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }

  @media (max-width: 350px) {
    :root {
--penguin-size :200px;
--penguin-skin:black;
    }
  }
</tyle>

单位

• 绝对单位 px
• 相对单位 em

fr：设置列或行占剩余空间的比例，

auto：设置列宽或行高自动等于它的内容的宽度或高度，

%：将列或行调整为它的容器宽度或高度的百分比，

颜色

• hex
• rgb
• rgba （透明度）

五、视觉设计

1. 对齐 text-align

2. 宽度 width

3. 高度 height

4. 加粗文本 <strong>

5. 下划线 <u>

6. 强调文本 <em>

7. 删除线 <s>

8. 水平线 <hr>

9. 添加阴影 box-shadow

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

box-shadow 属性的阴影依次由下面这些值描述：

• offset-x 阴影的水平偏移量；
• offset-y 阴影的垂直偏移量；
• blur-radius 模糊半径；
• spread-radius 阴影扩展半径；
• color

其中 blur-radius 和 spread-radius 是可选的。

10. 透明度

11. 大写效果

12. 伪类

伪类是可以添加到选择器上的关键字，用来选择特定状态的元素

13. 定位

position

• 相对定位 relative

• 绝对定位

  absolute：会随着窗口的滑动而变化

  fixed：不会随着窗口的滑动而变化

float

浮动元素不在文档流中，它向 left 或 right 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 width 属性来指定浮动元素占据的水平空间。

14. 定义重叠顺序 z-index

​ 取值是整数，数值大的会在数值小的上面

15. 使块级元素水平居中 margin

16. 配色

• 互补色

• 分裂补色搭配法

• 色相 色调

  hsl s：饱和度 l：亮度 可以调深浅色调

• 线性渐变

17. Transform scale

18. 伪元素 ::before 和 ::after

19. 关键帧设置动画 @keyframe

六、应用无障碍

20. figure lable提高表单的可访问性？

21.使用 filedset 和 legend 增加单选按钮的可访问性

22. 日期选择器 input date

23. 标准化时间 time datetime?

Web 内容无障碍指南（WCAG）

24,accesskey属性，快捷键快速导航到链接

tabindex 键盘浏览时（如tab），链接、表单控件等元素可以自动获得焦点，其他标签则可以通过tabindex实现类似效果。

七、响应式网页

1. 媒体查询自适应调整布局 @media

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视口大小调整内容的布局

2. 图片自适应大小

img {
  max-width: 100%;
  height: auto;
}

3. 针对高分辨率屏幕应使用视网膜图片

设置宽和高为原始图片的一半

4. 使排版自适应设备尺寸

视窗单位和百分比都是相对单位，但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。

八、CSS弹性盒子 Flexbox

1. display:flex;

只要在一个元素的 CSS 中添加 display: flex;让它变成 flex 容器，就可以使用其它 flex 属性来构建响应式页面了， 可以让元素的项目排列成行或列

2. flex-direction 属性创建一个行

默认值为row

可选：row column row-reverse column-reverse

3. justify-content 属性对齐元素 默认flex-start

flex 容器子元素排列的方向被称为 main axis（主轴）。 对于行，主轴水平贯穿每一个项目； 对于列，主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目，有几种选择。 很常用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他选择包括：

• flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
• flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
• space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
• space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
• space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

4. align-items对齐元素 默认stretch

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。

align-items 的可选值包括：

• flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
• flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
• center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
• stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
• baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线

5. 使用 flex-wrap 属性包裹一行或一列

• nowrap：默认值，不换行。
• wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
• wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

6. 使用 flex-shrink 属性定义 flex 子元素的收缩规则

7. flex-grow 属性定义 flex 子元素的增长系数

8. flex-basis 属性设置子元素的初始大小

flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。

属性的默认设置是 flex: 0 1 auto;。

9. order 属性告诉 CSS flex 容器里子元素的顺序

10.align-self调整单个子元素自己的对齐方式，而不会影响到全部子元素

九、CSS网格

1. display:grid

网格容器的属性

2. 使用 grid-template-columns 添加多列,grid-template-rows 添加多行

grid-template-columns: 50px 10% 1fr 2fr;

3. 使用 grid-column-gap 创建多列之间的间距,grid-row-gap 创建多行之间的间距,使用 grid-gap 为网格添加间距

网格项的属性

4. 使用 grid-column 来控制空间大小

网格中，假想的水平线和垂直线被称为线（lines）。 这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

grid-column: 1 / 3;

5. 使用 justify-self 水平对齐项目

在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。 你可以使用网格项的 justify-self 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch，这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值：

start：使内容在单元格左侧对齐，

center：使内容在单元格居中对齐，

end：使内容在单元格右侧对齐，

6.使用 justify-items 水平对齐所有项目（网格容器属性）

7.将网格划分为区域模板

你可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称。 可以通过给容器加上 grid-template-areas 来实现：

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";

8.使用 grid-area 属性将项目放置在网格区域中

没有定义区域时：

item1 { grid-area: 1/1/2/4; }	水平起点线/垂直起点线/水平终点线/垂直终点线

9.使用 repeat 函数减少重复

10.使用 minmax 函数限制项目大小

11.创建弹性布局

auto-fill

auto-fit

当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

12. 使用媒体查询创建响应式布局

@media(条件){

相应

}

13.在网格中创建网格

将元素转换为网格只会影响其子元素（即直接后代元素），子元素里面的元素不会受到影响

如果我们把某个子元素设置为网格，就会得到一个嵌套的网格。