网页由三部分组成：

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样式代码

  • 语法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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，0~255，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：全部小写