网页由三部分组成：

1.html ：网页架构骨架，网页结构的设计

2.CSS：网页的样式，用于美化网页，有了CSS才能达到像素级的还原

3.JavaScript：动态脚本，控制页面动画，点击事件

CSS基本概念：

css （Cascading Style Sheets）层叠样式表，主要控制网页样式显示。一般css样式是作用在标签上，控制的是标签显示的样式。

层叠： css样式可以在多个地方书写，可以在标签上添加style属性添加css样式代码，style标签中书写的，外部css文件中书写css代码，最终层叠在一起，形成一套css样式作用在标签上。相同的css属性只作用一个，不同的直接作用。

样式表：css的样式代码；页面上通过内联样式，内部样式，外部样式的方式属性css代码

网页中样式的来源

注意：所有html默认没有样式

浏览器默认的样式不同
所有的html标签默认没有样式，但是a，h标签等默认是浏览器添加的样式
浏览器用户自定义的样式
用户可以在浏览器上更改默认标签的样式

内联样式

在标签上添加style属性，在属性值中书写css样式代码

语法：

1
2
3

<p style="css属性1:css属性1的值;css属性2:css属性2的值">
    
</p>

好处：哪里需要样式写在哪
缺点：多个标签有相同的样式时需重复添加

内部样式

在head标签添加style标签，再通过选择器书写css样式代码

语法：

<head>
    <style>
        选择器{
            css属性1:css属性值1;
            css属性2:css属性值2;
        }
    
    </style>
</head>

好处：
- 结构和样式分清了，利与后期代码维护
- 可以批量选择标签中的标签样式
缺点：
- 样式和结构完全分离，目前还在一个文件中

外部样式

先创建一个后缀名为.css文件，再在里面通过选择器书写css样式代码，再在head标签中通过link标签引入css样式文件

语法：

1
2
3

<head>
    <link rel="stylesheet" href="css/01-外部样式.css">
</head>

里面的href:链接css文件

好处：
- 样式和结构代码完全分离
- 以后维护代码可以一处改处处改
- 以后可以将css进行压缩，减少文件体积
注意：优先级：相同的选择器，内联>内部/外部，内部和外部的优先级是依据代码的先后（就近原则）

选择器

相同选择器后面选择器会盖住前面选择器

1.标签选择器：
- 通过标签名找到指定的标签，没有指定范围的时候找到的是页面中所以满足条件的标签
2.类选择器（class选择器）：
- 语法：
  1
  2
  3
  4
  标签名{
  css属性1：css属性值1；
  css属性2：css属性值2；
  }
- 又称为class标签，通过标签上class名找到满足条件的标签，多个标签可以共享一个class标签，可以提供公共标签样式
- 语法：
  1
  2
  3
  4
  class名{
  css属性1：css属性值1；
  css属性2：css属性值2；
  }
注意：
- 标签上可以作用多个class名，中间用空格隔开
- 如果选择器多个组合在一起，中间没有空格，代表并且的意思
  1
  2
  3
  4
  找到页面中class名中即有op又有oa的标签
  .op.oa{
  css样式代码
  }
3.标签选择器
- id是标签上定义的属性，id唯一，找到页面中唯一的标签，精准定位
- 通过标签上id名找到满足条件的标签
- id命名规则：
  - 以数字，字母，-和_构成
  - 不能以数字开头
  - 不能包含特殊符号
    1
    2
    3
    #id名{
    css样式代码
    }
    注意：id是唯一的，以后通过js会操作标签上id名，id选择器慎用
    
    优先级问题：
    - 相同选择器，内联样式权重最大，内部样式和外部样式采用就近原则
    - 相同选择器同时作用在一个标签上，后面的样式会盖住前面的样式
    - 选择器权重（优先级）：id选择器>类选择器>标签选择器

背景样式

background-color：设置背景颜色
- 单词（#开头的十六进制数字）
- rgb（0_255，0255，0~255）
background-image:设置背景图片
1
2
CSS
background-image:url(链接背景图片的文件路径)
- 背景图片默认从盒子左上角开始铺设，如果铺不满默认平铺
- 注意：如果背景颜色和图片同时存在，图片盖住背景颜色
background-repeat:设置背景图片是否平铺
- repeat：默认值，x轴，y轴都平铺
- repeat-x:x轴方向进行平铺
- repeat-y:y轴方向进行平铺
- no-repeat:不平铺
- 可以实现一个像素渐变背景平铺，减少图片的体积，从而优化网页
background-position:设置背景图片的显示位置
- x轴 y轴：
  - 单词：left right center top bottom 两两搭配使用
  - 固定的像素值：默认左上角0px，0px
  - 百分比：50%，50%相当于center center

background-size:设置背景图片的大小，css3提出

contain：一边铺满，另一边铺满
cover:两边都铺满，超出部分隐藏

  x轴，y轴
  1
2
3
4
5
6
7
8
9
10
11
12

    :宽度，高度

    - 同时设置两个值，背景图片样式可能变形，只设置一个值，代表图片的宽度

- `background-attachment`:设置背景图片是否固定 css3提供

  - score:默认值，图片会随着滚动条滚动
  - fixed：背景图片固定在页面上

- `background`:复合属性


CSS
background:pink url(img/img-3.jpg) no-repeat 50% 50% /100px 100px fixed;

/前面代表图片显示位置，/后面代表背景图片大小

文本样式

color:设置文本的颜色
text-align:设置文本的对齐方式
- left：左对齐
- right：右对齐
- center：中间居中

注意：可以控制标签中文本在水平方向的对齐方式，对行级标签同样有效

line-height:设置文本行高

1.像素

2.百分比和数字是参考字体的大小，相当于字体的倍数

注意：一行里面的文本在垂直方向上居中

                针对单行文本水平垂直居中，可以设置text-align，line-height等于盒子宽度

text-decoration:
- none:无
- underline：下划线
- line-thorugh：中划线
- overline：上划线
letter-spacing:设置字符间距，一个中文就是一个字符，一个字母是一个字符
word-spacing:设置字间距，以空格为参考
text-indent:设置首行缩进
text-transform:设置英文字母大小写 capitalize：首字母大写 uppercase：全部大写 lowercase：全部小写

网页由三部分组成：

CSS基本概念：

网页中样式的来源

浏览器默认的样式不同

浏览器用户自定义的样式

内联样式

内部样式

外部样式

注意：优先级：相同的选择器，内联>内部/外部 ，内部和外部的优先级是依据代码的先后（就近原则）

选择器

相同选择器后面选择器会盖住前面选择器

背景样式

文本样式

注意：优先级：相同的选择器，内联>内部/外部，内部和外部的优先级是依据代码的先后（就近原则）