前端学习笔记——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主要由两部分组成：选择器和声明块

选择器 {
声明块
}

3.选择器分类

• 基础选择器：

元素选择器：通过标签名去选择对应元素。如div，p，span
id选择器：每个元素都有id属性，id只是唯一的。#id
类选择器：每个元素都有class属性，class值可以重复。.class
通配符选择器：选中页面中的所有元素。*

• 复合选择器

交集选择器：满足所有选择器条件才会被选中。选择器1选择器2如：div.box
并集选择器：满足一个选择器条件就会被选中。选择器1,选择器2如：div,p

• 关系选择器
  元素与元素之间的关系：父子关系、祖先后代关系、兄弟关系
  父元素：含有被嵌套元素的元素。
  子元素：被父元素直接嵌套的元素，子元素也是特殊的后代元素。
  兄弟元素：拥有同一个父元素的元素。
  祖先元素：包含着后代的元素。
  后代元素：被某元素嵌套的元素。

子选择器 选择某元素一级子元素。选择器1>选择器2
后代选择器 选择某元素的后代元素，包括子元素。选择器1 选择器2
相邻兄弟选择器 选择某元素后的第一个兄弟元素。选择器1+选择器2
后续兄弟选择器 选择某元素之后的所有兄弟元素。选择器1~选择器2

• 属性选择器：通过元素的属性值来选择对应的元素

选择拥有该属性的所有元素。[属性]
选择满足属性值的所有元素。[属性=值]
选择属性值以特定字符开头的元素。[属性^=值]
选择属性值以特定字符结尾的元素。[属性$=值]
选择属性值包含特定字符的元素。[属性*=值]

• 伪类选择器
  伪类选择器一般不会单独使用，会和其他选择器配合使用。:伪类名

a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */

:first-child 父元素下的第一个子元素
:last-child 父元素下的最后一个子元素
:nth-child 父元素下的任意顺序子元素
注意：以上伪类是在不同的子元素之间排序的

:first-of-type
:last-of-type
:nth-of-type
以上伪类是在同类型元素之间进行排序

选择器练习

餐厅小游戏