1、颜色的表示

2.1、表示方式一：颜色名

  • 编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：

    1. 红色：red
    2. 绿色：green
    3. 蓝色：blue
    4. 紫色：purple
    5. 橙色：orange
    6. 灰色：gray
      ………

    1. 颜色名这种方式，表达的颜色比较单一，所以用的并不多。

    2. 具体的颜色名参考MDN官方文档。

    https://developer.mozilla.org/en-US/docs/web/CSS/named-color

2.2、表示方式二：rgb或rgba

  • 编写方式：使用红、黄、蓝 这三种光的原色进行组合。

    • r 表示 红色
    • g 表示 绿色
    • b 表示 蓝色
    • a 表示 透明度 —–>(取值范围0~1)

  • 举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* 使用 0~255 之间的数字表示一种颜色 */
    color: rgb(255 , 0 , 0);/* 红色 */
    color: rgb(0 , 255 , 0);/* 绿色 */
    color: rgb(0 , 0 , 255);/* 蓝色 */
    color: rgb(0 , 0 , 0);/* 黑色 */
    color: rgb(255 , 255 , 255);/* 白色 */

    /* 混合出任意一种颜色 */
    color: rgb(183, 43, 226); /* 紫罗兰色 */
    color: rgba(255, 0, 0, 0.5);/* 半透明的红色 */

  • 小规律

    1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
    2. rgb(0, 0, 0)是黑色，rgb(255, 255, 255)是白色
    3. 对于rgba来说，前三位的rgb形式要保持一致，都是0~255的数字

2、CSS字体属性

2.1、字体大小

  • 属性名：font-size

  • 语法：

    1
    2
    3
    div {
        font-size: 40px;
    }

  • 注意点：

    1. Chrome浏览器支持的最小文字为12px，默认是16px。
    2. 不同的浏览器默认字体大小可能不一致，所以最好给一个明确的值。
    3. 通常给body设置font-size属性，这样body中的其他元素就都可以继承了。

2.2、字体样式

  • 属性名：font-family

  • 语法：

    1
    2
    3
    div {
    font-family: 'Courier New', Courier, monospace;
    }

  • 注意：

    1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询。
    2. 如果字体名包含空格，必须使用引号包裹起来。
    3. windows系统中，默认字体就是微软雅黑。

2.3、字体风格

  • 属性名：font-style

  • 使用值：

    1. normal：正常（默认值）
    2. italic：斜体（使用字体自带的斜体效果）
    3. oblique：斜体（强制倾斜产生的斜体效果）

    实现斜体时，更推荐使用italic

  • 语法：

    1
    2
    3
    div {
        font-style: italic;
    }

2.4、字体粗细

  • 属性名：font-weight

  • 常用值：

    • 关键词

      1. lighter：细
      2. normal：正常
      3. bold：粗
      4. bolder：很细（多数字体不支持）

    • 数值

      1. 100-1000且无单位，数值越大，字体越粗（具体看字体设计的精确程度）。
      2. 100-300等同于lighter，400-500等同于normal，600以上等同于bold。

  • 语法：

    1
    2
    3
    4
    5
    6
    7
    div {
        font-weight：bold;
    }

    div {
        font-weight: 600;
    }

3、文本样式

3.1、文本颜色

  • 属性名：color

  • 可选值：

    1. 颜色名
    2. rgb或rgba
    3. HEX或HEXA（十六进制）

    开发中常用的是：rgb/rgba或HEX/HEXA。

  • 举例：

    1
    2
    3
    div {
        color: rgb(112,45,78);
    }

3.2、文本间距

  • 字母间距：letter-spacing
  • 单词间距：word-spacing（通过空格识别词）
  • 属性值为像素（px），正值让间距增大，负值让间距缩小。

3.3、文本修饰

  • 属性名：text-decoration

  • 可选值：

    1. none：无装饰线（常用）

    2. underline：下划线（常用）

    3. overline：上划线

    4. line-through：删除线

    可搭配如下值使用：

    1. dotted：虚线

    2. wavy：波浪线

    3. 也可以指定颜色

  • 举例：

    1
    2
    3
    a {
        text-decoration: none;
    }

3.4、文本缩进

  • 属性名：text-indent

  • 属性值：CSS中的长度单位，例如：px

  • 举例：

    1
    2
    3
    div {
        text-indent:40px;
    }

后面学习css中的一些新的长度单位，目前我们只知道像素（px）

3.5、文本对齐_水平

  • 属性名：text-align

  • 常用值：

    1. left：左对齐（默认值）
    2. right：右对齐
    3. center：居中对齐

  • 举例：

    1
    2
    3
    div {
        text-align: center;
    }

3.6、行高

  • 属性名：line-height

  • 可选值：

    1. normal：由浏览器根据文字大小决定的一个默认值。
    2. 像素（px）。
    3. 数字
    4. 百分比：参考自身font-size的百分比。

    备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

  • 举例：

    1
    2
    3
    4
    5
    div {
        line-height: 60px;
        line-height: 1.5;
        line-height: 150%;
    }

  • 行高注意事项：

    1. line-height过小会怎样？—文字产生重叠，且最小值是0，不能为负数。
    2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
    3. line-height和height是什么关系？
    • 设置了height，那么高度就是height的值。
    • 不设置height的时候，会根据line-height计算高度。

  • 应用场景：

    1. 对于多行文字：控制行与行之间的距离。

    2. 对于单行文字：让height等于line-height，可以实现文字垂直居中。

      备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

4、CSS列表属性

列表相关的属性，可以作用在ul，ol，li元素上。

CSS属性名 功能 属性值
list-style-type 设置列表符号 常用值如下：
none：不显示前面的标识（常用！）
square：实心方块
disc：圆形
decimal：数字
lower-roman：小写罗马字
upper-roman：大写罗马字
lower-alpha：小写字母
upper-alpha：大写字母
list-style-position 设置列表符号的位置 inside：在li的里面
outside：在li的外边
list-style-image 自定义列表符号 url（图片地址）
list-style 符合属性 没有数量、顺序要求

5、CSS表格属性

  1. 边框相关属性（其他元素也能用）：

    CSS属性名 功能 属性值
    border-width 边框宽度 CSS中可用的长度值
    border-color 边框颜色 CSS中可用的长度值
    border-style 边框风格 none：默认值
    solid：实线
    dashed：虚线
    dotted：点线
    double：双实线
    border 边框符合属性 没有数量、顺序要求（通常长度,风格,颜色）

  2. 表格独有的属性（只有table标签才能使用）：

    CSS属性名 功能 属性值
    table-layout 设置列宽度 auto：自动
    fixed：固定列宽，平均分。
    border-spacing 单元格间距 CSS中可用的长度值。
    生效的前提，单元格边框不能合并。
    border-collapse 合并单元格边框 collapse：合并
    separate：不合并
    empty-cells 隐藏没有内容的单元格 show：显示，默认
    hide：隐藏
    生效前提：单元格不能合并
    caption-side 设置表格标题位置 top：上面（默认值）
    bottom：在表格下面

6、CSS背景属性

CSS属性名 功能 属性值
background-color 设置背景颜色 符合CSS中颜色规范的值
默认背景颜色是transparent。
background-image 设置图片 url（图片地址）
background-repeat 设置背景重复方式 repeat：重复，铺满整个屏幕，默认值。
repeat-x：只在水平方向重复。
repeat-y：只在垂直方向重复。
no-repeat：不重复。
background-position 设置背景图位置 通过关键字设置位置
写两个值，用空格隔开
水平：top、center、right
垂直：top、center、bottom
如果只写一个值，另一个方向值取center

通过长度指定坐标位置：
以元素左上角，为坐标原点，设置图片左上角的位置。
两个值，分别是x坐标和y坐标。
只写一个值，会被当做x坐标，y坐标取center
background 复合属性 没有数量和顺序要求

7、CSS鼠标属性

CSS属性名 功能 属性值
cursor 设置鼠标光标样式 pointer：小手
move：移动图标
text：文字选择器
crosshair：十字架
wait：等待
help：帮助

扩展：自定义鼠标图标

1
2
/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

8、CSS长度单位

  1. px：像素
  2. em：相对元素font-size的倍数。
  3. rem：相对根字体大小，html标签就是根。
  4. %：相对父元素计算。

注意：CSS中设置长度，必须加单位，否则样式无效！

9、元素的显示模式

  • 块级元素（block）

    又称：块级元素

    特点：

    1. 在页面中独占一行，不会与任何元素公用一行，是从上到下排列的。
    2. 默认宽度：撑满父元素。
    3. 默认高度：由内容撑开。
    4. 可以通过CSS设置宽高。

  • 行内元素（inline）

    又称：内联元素

    特点：

    1. 在页面中不独占一行，一行中不能容下的行内元素，会在下一行继续从左到右排列。
    2. 默认宽度：由内容撑开。
    3. 默认高度：由内容撑开。
    4. 无法通过CSS设置宽高。

  • 行内块元素（inline-block）

    又称：内联块元素

    特点：

    1. 在页面中不独占一行，一行中不能容下的行内元素，会在下一行继续从左到右排列。
    2. 默认宽度：撑满父元素。
    3. 默认高度：由内容撑开。
    4. 可以通过CSS设置宽高。

注意：：元素早期只分为：行内元素，块级元素，区分区分条件也只有一条：“是否独占一行”，如果按照这种分类方式，行内元素应该算作行内元素。

10、总结各元素的显示模式

  • 块元素（block）

    1. 主体结构标签：<html>、<body>
    2. 排版标签：<h1>~<h6>、<hr>、<p>、<pre>、<div>
    3. 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
    4. 表格相关标签：<table>、<tbody>、<thead>、<tfood>、<tr>、<caption>
    5. <form>与<option>

  • 行内元素（inline）

    1. 文本标签：<br>、<em>、<strong>、、<sup>、<sub>、<del>、<ins>
    2. <a>与<lable>

  • 行内块元素（inline-block）

    1. 图片：<img>
    2. 单元格：<td>、<th>
    3. 表单控件：<input>、<textarea>、<select>、<button>
    4. 框架标签：<iframe>

11、修改元素显示模式

通过CSS中的display属性可以修改元素的默认显示模式，常用值如下：

值 描述
none 元素会被隐藏
block 元素将作为块级元素显示
inline 元素将作为内联元素显示
inline-block 元素将作为行内块元素显示

12、盒子模型的组成

CSS会把所有的HTMl元素都看成一个盒子，所有的样式也都是基于这个盒子

  1. margin（外边距）：盒子与外界的距离。
  2. border（边框）：盒子的边框。
  3. padding（内边距）：紧贴内容的补白区域。
  4. content（内容）：元素的文本或后代元素都是它的内容。

图示所下：

​ 图片出错啦！

盒子大小=content + 左右padding +border。

注意：外边距margin不会影响盒子的大小，但会影响盒子的位置。

13、盒子内容区（content）

CSS属性名 功能 属性值
width 设置内容区域宽度 长度
max-width 设置内容区域的最大宽度 长度
min-width 设置内容区域的最小宽度 长度
height 设置内容区域高度 长度
max-height 设置内容区域的最大搞度 长度
min-height 设置内容区域的最下高度 长度

注意：

max-width、min-width一般不与width一起使用。

max-height、min-height一般不与height一起使用。

14、盒子内边距（padding）

CSS属性名 功能 属性值
padding-top 上内边距 长度
padding-right 右内边距 长度
padding-bottom 下内边距 长度
padding-left 左内边距 长度
padding 符合属性 长度，可以设置1~4个值

padding复合属性的使用规则：

  1. padding：10px；四个方向内边距都是10px。
  2. padding：10px 20px；上10px，左右20px。（上下、左右）
  3. padding：10px 20px 30px；上10px，左右20px，下30px；（上、左右、下）
  4. padding：10px 20px 30px 40px；上10px，右20px，下30px ，左40px；（上、右、下、左）

注意点：

  1. padding的值不能是负数。
  2. 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
  3. 块级元素、行内块元素，四个方向内边距都苦完美设置。

15、盒子边框（border）

CSS属性名 功能 属性值
border-style 边框线风格
复合了四个方向的边框风格		 none：默认值
solid：实线
dashed：虚线
dotted：点线
double：双实线
……
border-width 边框线宽度
复合了四个方向的边框宽度		 长度，默认3px
border-color 边框线颜色
复合了四个方向的边框颜色		 颜色，默认黑色
border 复合属性 值没有顺序和数量要求（一般宽度、风格、颜色）
border-left
border-left-style
border-left-width
border-left-color

border-right
border-right-style
border-right-width
border-right-color

border-top
border-top-style
border-top-width
border-top-color

border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
 分别设置各个方向的边框 同上
border-radius 圆角边框 长度、百分比

边框相关属性共20个。

border-style、border-width、border-color其实也是符合属性。

16、盒子外边距（margin）

CSS属性名 功能 属性值
margin-left 左外边距 CSS中的长度值
margin-right 右外边距 CSS中的长度值
margin-top 上外边距 CSS中的长度值
margin-bottom 下外边距 CSS中的长度值
margin 复合属性，可以写1~4个值，规律同padding（顺时针） CSS中的长度值

16.1、margin注意事项

  1. 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
  2. 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
  3. 块级元素、行内块元素，均可以完美地设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
  4. margin的值也可以是auto（自动），如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中。
  5. margin的值可以是负值。

16.2、margin塌陷问题

什么是margin塌陷？

第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。

如何解决margin塌陷？

  • 方案一：给父元素设置不为0的padding。
  • 方案二：给父元素设置宽度不为0的border。
  • 方案三：给父元素设置CSS样式overflow:hidden

17、处理内容溢出

CSS属性名 功能 属性值
overflow 溢出内容的处理方式 visible：显示，默认值
hidden：隐藏
scroll：显示滚动条，不论内容是否溢出
auto：自动显示滚动条，内容不溢出不显示
overflow-x 水平方向溢出内容的处理方式 同overflow
overflow-y 垂直方向溢出内容的处理方式 同overflow

注意：

  1. overflow-x、overflow-y不能一个是hidden，一个是visible，是实验性属性，不建议使用。
  2. overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

18、隐藏元素的方式

方式一、visibility属性

visibility属性值默认是show，如果设置为hidden，元素会隐藏。

元素看不见了，还占有原来的位置（元素的大小依然保持）。

方式二、display属性

设置display：none，就可以让元素隐藏。

彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

19、样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

会继承的属性

字体属性、文本属性（除了vertical-align）、文字颜色 等。

不会继承的属性

边框、背景、内边距、外边距、宽高、溢出方式 等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

20、默认样式

元素一般都会有默认的样式，例如：

  1. <a>元素：下划线、字体颜色、鼠标小手。

  2. <h1>~<h6>元素：文字加粗、文字大小、上下外边距。

  3. <p>元素：上下外边距。

  4. <ul>、ol元素：左内边距

  5. body元素：8px外边距（4个方向）

……….

优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择到该元素。