前端学习日记(2) - CSS 初入门

最近这两天拖拖拉拉的学习着CSS相关的内容，内容可真多真复杂呀，感觉自己在学习的只是皮毛。慢慢来慢慢来，我不求多么的精通，我只希望能够了解基础了，可以自己写一些简单的框架，自己独立完成一个从 需求-设计-网站搭建 的相关步骤，我就已经很开心满足了，接下来就是进一步的补充产品知识，干中学！

1.前言

学习了CSS后，我尝试着自己写了一些网页结构，目前而言，我认为在编写网页时，应该遵循以下顺序：
Step 1: 分析所编写的网页的框架：比如应该区分多少个 div 模块，哪些 div 模块需要编写 class，哪些 div 模块是 flex 内容。即优先编写 html，确认区域划分，以及每个区域的 tag。
Step 2: 编写不同的 tag 下的 CSS 样式。

 

2.如何定义 CSS

方法一：外部样式表
HTML 中的 CSS 样式来自于外部 .CSS 文件表，HTML 中使用方式如下:

<link rel="stylesheet" herf="style.css">

方法二：内部样式表
将 CSS 放在 HTML head 模块中

<style>
    body{
    width:420px ;
    background-color: #fff;
    border: 1px black solid;
    padding: 12px 12px 12px 12px;
    }

    .tt-head{
    display: flex;
    align-items: center;
    }
</style>

方法三：内联样式

直接在 tag 中编写该 tag 的 style

<span style="color: #e03e2d;">即优先编写 html，确认区域划分，以及每个区域的 tag</span>

总结：内联样式最不推荐，因为仅对当前 tag 生效，不具有 tag 的样式普适性。如果需要对某一类 tag 进行样式的批量化设置，同事便于批量化修改，推荐方法一与方法二，尤其是方法一，因为可以被适用于其他 HTML 文件。

 

3.选择设置样式的 selector 方法

内联样式无需额外选中，在 tag 里面继续编写即可，但是外部样式表和内部样式表在编写样式前需要先行选中目标，即对什么在编写样式。

以 <p class="paragraph" id="para1">Lorem</p>为例，如果想要对 Lorem 设置样式，有以下三种选中方法

① 选中 tag 标签，此举意味着对该类型的 tag 标签统一样式

p{
    color: red;
}

② 选中 class，此举意味着对该类型的 class 统一样式

.paragraph{
    color:red;
}

③ 选中 id，id 具有唯一性，此举意味着仅仅对该 id 进行操作

#para1{
    color: red;
}

 

4. 伪类样式

可以块级元素与内联元素设定某种状态下的单独样式，比如

1. 用户交互状态伪类：

   • :hover：鼠标悬停在元素上时的状态。
   • :active：元素被激活时的状态，通常与鼠标点击相关。
   • :focus：元素获得焦点时的状态，常用于表单输入元素。

2. 链接状态伪类：

   • :link：未访问的链接。
   • :visited：已访问的链接。
   • 这些伪类特别用于控制链接的样式，帮助用户区分链接的状态。

3. 结构伪类：

   • :first-child、:last-child、:nth-child(n)等：用于选择元素的特定子元素，如第一个子元素、最后一个子元素或第n个子元素。
   • 这些伪类有助于对布局和内容进行精确控制。

<!--用户交互状态伪类：-->

:hover：鼠标悬停在元素上时的状态。
:active：元素被激活时的状态，通常与鼠标点击相关。
:focus：元素获得焦点时的状态，常用于表单输入元素。
链接状态伪类：

:link：未访问的链接。
:visited：已访问的链接。
这些伪类特别用于控制链接的样式，帮助用户区分链接的状态。
结构伪类：

:first-child、:last-child、:nth-child(n)等：用于选择元素的特定子元素，如第一个子元素、最后一个子元素或第n个子元素。
这些伪类有助于对布局和内容进行精确控制。

伪类样式并不是直接应用于元素本身，而是当元素处于特定状态时才应用。因此，伪类样式的效果是动态的，会随着用户与元素的交互或元素状态的变化而变化。

 

最后，在 CSS 的样式中，有两个非常重要的内容，float 与 flex，这两者我还没有进行深入研究，决定后面单开专题。