HTML&CSS学习笔记 -- CSS（二）

学习资料：

尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）

一、 列表

1 无序列表

使用li在ul中创建一个一个的列表项，一个li就是一个项

通过type属性修改无序列表的项目符号：

• 可选值：
  • disc：默认值，是实心圆点
  • square：实心方点
  • circle：空心的圆

注意：默认的项目符号我们一般都不使用，因为不同的浏览器显示结果不同。

• 去掉项目符号

  在css里面设置：ul{list-style:none}

• 如果需要设置项目符号，则可以采用为li设置背景图片的方式来实现。

2 有序列表

有序列表和无序列表类似，只不过它使用ol代替ul，使用有序的序号作为项目符号

• type属性，可以指定序号的类型

  可选值：

  • 1：默认值，使用阿拉伯数字
  • a/A：采用小写或大写的字母
  • i/I：采用小写或大写的罗马数字

3 定义列表

用来对一些词汇或内容进行定义，使用dl创建

dl标签中有两个子标签：

• dt：被定义的内容
• dd：对定义的内容的描述，可有多个描述

列表之间可以嵌套，无序套有序，有序套无序。

二、单位

1 长度单位

像素px

• 像素是我们在网页中使用最多的一个单位
• 一个像素就相当于我们屏幕中的一个小点
• 我们的屏幕就是由这些像素点构成的
• 但是这些像素点是不能直接看见
• 不同显示器一个像素的的大小也不同
• 显示效果越好越清晰，像素就越小，反之像素越大

百分比

• 也可以将单位设置一个百分比的形式
• 浏览器根据父级元素的样式来计算该值
• 好处：当改变父级元素的值时，子级元素会自动按照比例变化
• 在我们创建一个自适应的页面时，经常使用百分比作为单位

em

• 和百分比类似，它是相当于当先元素的字体大小来计算的
• 1em = 1 font-size
• 使用em时，当字体发生改变时，em也会随之改变
• 当设置字体相关的样式时，经常会使用em

2 颜色单位

颜色单词

在css找那个可以直接使用颜色单词来表示颜色，比较麻烦

RGB值

• 所谓的RGB值指的是通过红绿蓝三原色

• 通过这三种颜色的不同浓度来表示出不同的颜色

• 语法：rgb(红色的浓度，绿色的浓度，蓝色的浓度)

• 颜色的浓度需要一个0-255之间的值表示，0最浅，255最深

• 浓度也可以通过百分比来设置，0-100%

十六进制

• 原理与第二种方法RGB值原理一样
• 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
• 语法：#第一组二位数字第二组二位数字第三组二位数字
• 00表示没有，相当于rgb的0
• ff表示最大。相当于rgb的100

三、字体样式

1 字体大小

• font-siz:像素值，浏览器文字默认大小：16px
• font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的，我们设置的font-size实际是设置格的高度，并不是字体的大小
• 一般情况下文字都要比这个格要小一些，也有时比格大，根据字体的不同，显示效果也不同

2 文字字体

• font-family:字体名字

• 当采用某种字体时，如果浏览器支持则使用该字体，不过字体不支持，则使用默认字体

• 该样式可以同时指定多个字体：font-family:arial,微软雅黑

• 多个字体之间使用,隔开

• 当采用多个字体时，浏览器会优先使用前面的字体，如果前面没有适合的再尝试下一个

• 浏览器使用的字体默认是计算机中的字体，如果计算机中有，则使用，没有就不使用。

• 计算机中的字体存储位置：C:/Windows/Fonts

• 字体分类

  • serif：衬线字体
  • sans-serif：非衬线字体
  • monospace：等宽字体
  • cursive：草书字体
  • fantasy：虚幻字体

  这些是字体的大分类，当设置为这些分类后，浏览器会自动选择指定的字体并应用样式。

  • 一般将字体的大分类指定为font-family中的最后一个字体

3 斜体

• font-style

  设置文字的斜体

  值：

  • normal：默认值，文字正常显示
  • italic：斜体
  • oblique：倾斜，与italic效果一样

4 文字粗细

• font-weight

  设置文本的粗细

  值：

  • normal：正常
  • bold：加粗
  • bolder：更粗
  • lighter：更细
  • 100-900之间的九个值：
    • 但是由于一般用户计算机中没有这么多级别的字体，所以不是每个数值都有对应的粗细

4 小型大写字母

• font-variant

  可以用来设置小型大写字母

  值：

  • normal：默认，正常显示
  • small-caps：文本以小型大写字母显示

5 font属性

• font

  在css中还为我们提供了一个样式叫font

  • 使用该样式可以同时设置字体相关的所有样式
  • 语法：font: 样式一 样式二 样式三 ...
  • 不同样式之间用空格隔开
  • 例：font: italic small-caps bold 60px
  • 顺序要求：斜体、加粗、大小字母没有顺序要求，甚至可写可不写；如果不写则使用默认值，但是要求文字的大小各字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式

6 文字大小写转变

• text-transform

  • 设置文字大小写

    值：

    • none：默认值，不作任何处理
    • capitalize：单词首字母大写，通过空格来识别空格
    • uppercase：所有字母大写
    • lowercase：所有字母小写

7 文本修饰

• text-decoration

  • 文本修饰，给文件添加效果

    值：

    • none：默认值，不添加修饰
    • underline：添加下划线
    • overline：添加上划线
    • line-through：添加删除线

  • 去除超链接默认的下划线

    a元素的默认text-decoration值为underline，因此会自带下划线

    要想去除要设置其text-decoration：a{text-decoration:none)

四、段落样式

1 行间距

css中并没有直接设置行间距的参数，我们只能通过设置行高line-height开简介设置行间距，行高越大行间距就越大。

单倍行距：

p {
    font-size:20px;
    font-height:40px;
}

值：

• 像素大小
• 百分数，相对于字体去设置行高，单倍行距：font-height:200%
• 整数：字体的倍数，单倍行距：font-height:2

在font参数中也可以设置行高

• 语法：

  `font: 字体大小/行高

2 字间距和词间距

• letter-spacing
  • 字间距
• word-spacing
  • 词间距

3 文本对齐

• text-align

• 设置对齐方式

  值：

  • left：文本靠左对齐
  • right：文本靠右对齐
  • center：文本居中对齐
  • justify：两端对齐

4 首行缩进

• text-indent

  缩进两字：

  • text-indent:32px
  • text-indent:2em，跟随字体大小

• 也可以为负值：可以将一些不想显示的文字显示起来