为网页添加样式

为网页添加样式

术语解释

h1{
 color: red;
 background-color: lightblue;
 text-align: center;
}

• css规则=选择器+声明块

选择器

• 用来选中元素，常见选择器

1. ID选择器：#ID
2. 元素选择器：元素
3. 类选择器：.class
4. 通配符选择器：*

声明块

• 出现在大括号

CSS代码书写位置

1. 内部样式表

书写在style元素中

2. 内联样式表

直接书写在元素的style属性中

3. 外部样式表[推荐]

• 将样式书写到独立的css文件中

1. 外部样式可以解决多页面样式重复的问题
2. 有利于游览器缓存，从而提高页面响应熟读
3. 有利于代码分离（HTML和CSS），更容易阅读和维护

常见的样式声明

1. color

• 元素内部的文字颜色

  1. 预设值：定义好的单词
  2. 三原色，色值：光学三原色，每个颜色可以使用0-255之间的数字来表达
  3. rgb表示法：rgb（0，255，0）
  4. hex（16进制）表示法：#红绿蓝

• 简写：#ff4400=#f40

• 淘宝红：#f40

• 黑色：#000

• 白色：#fff

• 红色：#f00

• 绿色：#0f0

• 青色：#0ff

• 黄色：#ff0

• 灰色：#ccc

2. background-color

• 背景颜色

3. font-size

• 元素内部文字的大小尺寸
  • px：像素，简单的理解为文字的高度占多少个像素
  • em：相对单位，相对于父元素的字体大小
  • 每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号

use agent,UA,用户代理（游览器）

4. font-weight

• 文字粗细程度，可以取值为预设值
  • bold：加粗
  • normal：不加粗
  • strong元素，默认加粗

5. font-family

• 文字类型
• 必须用户计算机中存在的字体才会有效

6. font-style

• 字体样式，通常用它设置斜体

i元素，em元素，默认样式，是倾斜字体;实际使用时，通常用它表示一个图标（icon）

7. text-decoration

• 文本修饰，给文本加线
  • a元素
  • del元素：错误的内容
  • s元素:过期的内容

8. 首行文本缩进

• text-indent
  • 单位：em px

9. line-height

• 每行文本的高度，该值越大，每行文本的距离越大
• 设置行高为容器的高度，可以让文本文本居中
• 行高可以设置纯数字，表示相对于当前元素的字体大小

10. width

• 宽度

11. height

• 高度

12. letter-spacing

• 文字间隙，字母间隙

13. word-spacing

• 单词间隙

13. text-align

• 元素内部文字的水平排列方式

更多的样式

透明度

1. opacity，它设置的是整个元素的透明，它的取值是0~1
2. 在颜色位置设置alpha通道（rgba）

鼠标

使用cursor设置

盒子隐藏

1. display：none; 不生成盒子
2. visibility:hidden; 生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

背景图

和img元素的区别

img元素属于HTML的概念

背景图属于css的概念

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图

设计的css属性

1. background-image：url（）
2. background-repeat 背景图重复

默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

预设值：contain、cover，类似objict-fit
数值或百分比

4. background-position

设置背景图的位置

预设值：left、bottom、right、top、center

数值或者百分比

• 雪碧图（精灵图）（spirit）

5. background-attachment

通常用它控制背景图是否固定

6. 背景图和背景颜色混用

7. 速写（简写）属性background

background:url(imgs/main_bg.jpg) no-repeat center/100% fixed #000;