前端学习笔记——CSS（一）

羚漆

已于 2022-08-15 18:46:30 修改

阅读量183

点赞数 1

文章标签：前端学习

于 2022-07-14 19:31:11 首次发布

本文链接：https://blog.csdn.net/zero_zero_seven/article/details/125786549

版权

茵蒂克丝

一、常用HTML标签
二、CSS基础
选择器练习

一、常用HTML标签

1.列表

列表可以分为三类：有序列表、无序列表和定义列表
有序列表
通过ol标签来创建，列表中的项由li标签来表示

<!-- 有序列表 -->
    <ol>
        <li>铅笔</li>
        <li>钢笔</li>
        <li>圆珠笔</li>
    </ol>

无序列表
通过ul标签来创建，列表中的项由li标签来表示

<!-- 无序列表 -->
    <ul>
        <li>番茄</li>
        <li>土豆</li>
        <li>黄瓜</li>
    </ul>

定义列表
通过dl标签来创建，dt创建一个列表项，dd对列表项进行定义

<!-- 定义列表 -->
    <dl>
        <dt>one</dt>
        <dd>bilibili</dd>
        <dd>abaaba</dd>
        <dt>two</dt>
        <dd>xxxxxxx</dd>
        <dd>iouuuiii</dd>
    </dl>

ul和ol都是块元素，通常作为布局容器使用，子元素应该是li元素，li元素也是款元素，可以在li中嵌套任何其他元素。

2.超链接

一个a标签即是一个超链接，a标签是行内元素，但比较特殊，可以嵌套出自己以外的任何元素。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以通过超链接来访问特定的资源，也可以作为锚点，在当前页面进行定位跳转。
a标签有两个常用属性
href：指定跳转的目标资源路径。
target：定义超链接的跳转方式，默认值为_self，表示在当前页面打开，可设置为_blank，表示在新窗口中打开。
资源路径
绝对路径：与当前文件没有联系，不是根据当前所处的位置去访问对应的资源。
相对路径：从当前文件出发去寻找资源。

3.图片

img标签，用于渲染图片资源，有两个必要属性
src：指定图片资源路径
alt：对图片额外信息的描述，方便SEO检索到该图片，当图片无法正常加载时，显示alt的值。
img标签是行内块元素，不会独占一行，可设置宽高，是一个空标签。一般只会设置宽或高，另一个会自适应。
href与src
两者都是指向资源地址。
href关联一份资源文件，如果需要在页面渲染时用到该资源中的内容时，浏览器会下载该资源，采用并行下载方式，不会阻塞页面的渲染。
src访问对应的资源，并替换该标签的内容，一定会下载对应路径的资源，不是并行下载，在页面渲染时遇到src时会先下载该资源，在解析完成后才能继续页面渲染。

4.div与span

div标签是典型的块元素，没有任何的语义，通常作为页面布局的容器使用。
span标签是典型的行内元素，没有任何的语义，通常作为行内容器使用，用来存放文本或其他的行内元素。

二、CSS基础

1.CSS简介

一个网页由三部分组成：

内容	作用
HTML	结构
CSS	样式
JavaScript	行为

CSS——层叠样式表，用于渲染HTML元素标签的样式。

2.CSS的使用

行内样式：每一个元素都具有style属性，通过该属性可以设置元素的样式。缺点：复用性不高，样式更新麻烦，不符合网页标准，不推荐使用。
内联样式：通过style标签，在HTML中设置当前网页所需的CSS样式内容，不是所有用户可见的内容，通常放在head标签中。缺点：复用性仍然不够高，依然存在相互耦合性，不符合网页标准。
外联样式：将样式保存为.css文件，可以被任何页面通过link标签引用，复用性高。推荐使用。
CSS主要由两部分组成：选择器和声明块