初见CSS且与之相处｜青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天

本章内容是请按照下面的顺序去食用：

1.CSS？

2.了解CSS

3.深入CSS

CSS?

在前端与初见HTML这个笔记中我介绍过CSS是人的衣服，那么现在来详细说明一下为什么把CSS叫做人的衣服。

CSS全称：Cascading Style Sheets (层叠样式表)
功能：用来定义页面元素的样式
- 设置字体和淹死
- 设置位置和大小
- 添加动画效果

代码演示：

<!--html-->
<h1>
  谢谢大家阅读我的笔记
</h1>

/*css*/
h1{
  color:blue;
  font-size:14px;
}

效果图：

截屏2022-07-28 01.06.15.png

我们先不管代码的内容，咱直接看效果图，可以清楚的看到有黑色粗大的字体变成蓝色粗小的字体

这就是CSS要做的事情，改变我们写的html标签的样式，给页面添加一些美观效果

了解CSS

回到刚才的CSS，我们来详细看看每一行都是什么意思

/*css*/
h1{
  color:blue;
  font-size:14px;
}

h1{}等：选择器 Selector
color:;，font-size:;等：选择器属性Property
white，14px等：属性值Value
color:white; =》声明

语法由一个选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题(en-US)）添加样式。

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性 (properties) (en-US) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。

CSS使用方式

css有三种使用方式分别是

外链
嵌入
内联

<!-- 外链 -->
<link rel="stylesheet" herf="/assets/style.css"></link>

<!-- 嵌入 -->
<style>
  li{
    margin:0; 
  	list-style:none;
  }
  p{
    margin:1em 0;
  }
</style>

<!-- 内联 -->
<p style="margin:1em 0;">Example Content</p>

CSS是如何工作的

现在我们初步知道CSS是干什么的以及使用方式，下面我们用一张直观的图去尝试理解CSS是如何工作的。

截屏2022-07-28 19.44.17.png

CSS选择器

它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

1.通配选择器

*{
	width:20px;
  margin:0;
}
/*它可以匹配任意类型的 HTML 元素。通常也会用来页面样式初始化*/

2.标签选择器

span{
  margin:0;
  font-size:14px;
}
/*
CSS 标签选择器 (也称为类型选择器) 通过 node 节点名称匹配元素。因此，在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素。
*/

3.id选择器

#Text{
  border:1px solid black;
}
/*
在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。
*/

HTML:
<div id = "Text"></div>

4.类选择器

.demo{
  color:red;
  height:20px;
}
/*
在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。
*/

HTML:
<div class="demo"></div>

5.属性选择器

[disabled]{
  background:#eee;
  color:#999;
}
/*CSS 属性选择器通过已经存在的属性名或属性值匹配元素。*/

HTML:
<input value="zhao" disabled />

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

CSS伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如 :hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

不基于标签和属性定位
几种伪类
- 状态伪类
- 结构性伪类

可以把下面的代码复制运行看看有什么效果

/* 状态伪类 */
<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

/* 结构性伪类 */
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

选择器之间的组合

截屏2022-07-28 19.45.32.png

选择器组

截屏2022-07-28 19.45.52.png

目前为止我们已经知道如何用选择器控制标签改变样式以及选择器之间的组合

下面我们来说一说属性和属性值

CSS属性和属性值很多，这个就需要自己动手去查阅MDN文档去查找属性

常见的几个属性值：

width:; -> 控制宽度

height:; -> 控制高度

font-size:; -> 控制字体大小粗细

font-family:; -> 控制字体样式

line-height:; ->控制行高

text-align:; ->控制文字为止

color:; -> 控制字体颜色

display:; -> 控制显示

margin:; -> 控制外边距

padding:; -> 控制内边距

float:; ->浮动

background-color:; -> 控制背景颜色

border:; -> 控制边框

box-shadow:; -> 控制盒阴影

剩余的查阅文档.......

深入CSS

到目前为止，相信已经把前面的关于CSS的基础内容已经看笔记和MDN文档学会了，那现在来深入一下CSS，与之相处吧！

CSS三大特性—— 继承、优先级和层叠。

**继承：**即子类元素继承父类的样式;

**优先级：**是指不同类别样式的权重比较;

**层叠：**是说当数量相同时，通过层叠(后者覆盖前者)的样式。

1.选择器优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2.继承

简单的理解为—“子承父业“，是指子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

<style>
    div{color:pink;font-size:20px;}
</style>
<div>
    <span>
        我是什么颜色的？
    </span>
</div>

span标签继承了父标签的样式

3.层叠

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

div{
    color:red;
}
div{
    color:blue;
}

上面的代码就是样式冲突，出现了一个div指定了相同样式不同值的情况，最后结果是div成蓝色。

样式不冲突，不会层叠。
样式冲突，遵循就近原则。长江后浪推前浪，后面样式盖前面。

* CSS取值过程

布局(Layout)是什么？

布局是：

确定内容的大小和位置的算法
依据元素、容器、兄弟结点和内容等信息来计算

我们为什么需要布局？

把前面所学的标签放到正确的位置
用布局去美化我们的网页，让网页看起来更加好看

布局相关的技术：

PS: 每一个列表都是链接，可直接跳转去学习

截屏2022-07-28 19.46.24.png

初见CSS且与之相处 ｜ 青训营笔记

初见CSS且与之相处 ｜ 青训营笔记

CSS?

了解CSS

深入CSS

CSS三大特性—— 继承、 优先级和层叠。

* CSS取值过程

布局(Layout)是什么？

初见CSS且与之相处｜青训营笔记

初见CSS且与之相处｜青训营笔记

CSS三大特性—— 继承、优先级和层叠。