CSS的初识

  1. CSS的介绍
  • CSS（Cascading style sheets）: 层叠样式表
  • 作用: 给页面中的HTML标签设置样式
  1. CSS语法规则
  • css写在style标签中，style标签一般写在head标签里面，title标签下面
  1. <head>
  2.       <style>
  3.         div{
  4.             color: 颜色;
  5.             font-size: 字体大小;
  6.             background-color : 背景颜色;
  7.             width: 宽度;
  8.             height:高度;
  10.         }
  11.       </style>
  12. </head>
  • color/font-size/ background-color/width/height:属性名
  • 颜色/字体大小/背景颜色/宽度/高度: 属性值

CSS 标点符号都是英文状态下的,
每一个样式键值对写完之后，最后需要写分号

  1. CSS引入方式
  • 内嵌式：CSS 写在style标签中
    提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中,结构(标签)和表现(css)没有完全分离,控制范围是当前页面.
  • 外联式：CSS 写在一个单独的.css文件中

提示：需要通过link标签在网页中引入,link作用: 链入外部资源, rel 连接的类型
stylesheet 样式表 , 结构和表现完全分离,控制范围是当前整个项目

  • 行内式：CSS 写在标签的style属性中

提示：基础班不推荐使用，之后会配合js使用 ,
控制范围比较小,只能控制当前标

  1. 基础选择器

  • 标签选择器
    结构：标签名 { css属性名：属性值； }

    作用：通过标签名，找到页面中所有这类标签，设置样式

  • 标签选择器会选择页面上所有的同类标签

注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

  • 类选择器

结构：.类名 { css属性名：属性值； }

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

  1. <style>
  2.     .box{
  3.         color:颜色;
  4.         font-size:字体大小;
  5.     }
  6.      .nav{
  7.          width:**px;
  8.          height:**px;
  9.          background:颜色;
  11.      }   
  12.      .box  .nav(两个类选择器名)
  13. </style>

注意点：

  1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

  2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头,不能出现特殊字符

  3. 一个标签可以同时有多个类名，类名之间以空格隔开

  4. 类名可以重复，一个类选择器可以同时选中多个标签
    5.不推荐使用中文来定义类名

  • id选择器

结构：#id属性值 { css属性名：属性值； }
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

  1. <style>
  2.       #id属性值{
  4.               }
  5. </style>

  • 类与id的区别

    1.    class类名与id属性值的区别
    3. • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名

    • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

  • 类选择器与id选择器的区别

    • 类选择器以 . 开头
    • id选择器以 # 开头

  • 实际开发的情况

    • 类选择器用的最多

    • id一般配合js使用，除非特殊情况，否则不要使用id设置样式

    • 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

注意点:

  1. 所有标签上都有id属性

  2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

  3. 一个标签上只能有一个id属性值

  4. 一个id选择器只能选中一个标签

  • 通配符选择器

结构：* { css属性名：属性值； }

作用：找到页面中所有的标签，设置样式

  1. <style>
  2.      *{
  4.      }
  5. </style>
  • *表示所有,通配符选择器会选择页面所有标签设置样式

实际开发很少用,原因是选择范围太广了

  1. 字体和文本样式

    • 字体样式

      1. 字体大小
        属性名：font-size
        取值：数字 + px

      2. 注意点：
        • 谷歌浏览器默认文字大小是16px
        • 单位需要设置，否则无效

      3. 字体粗细
        属性名：font-weight
        取值:关键字
        正常 :nomal 加粗 :bold
        纯数字:100~900的整百数
        正常 :400 加粗 :700

注意点:

• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化

• 实际开发中以：正常、加粗两种取值使用最多。

  1.   4.  字体倾斜

属性名：font-style
取值：

• 正常（默认值）：normal

• 倾斜：italic

  1.   5.  常见字体系列(了解)
  2.      - 无衬线字体 （sans-serif）
  6.      1. 特点：文字笔画粗细均匀，并且首尾无装饰
  7.      2. 场景：网页中大多采用无衬线字体
  8.      3. 常见该系列字体：黑体、Arial
  12.      - 衬线字体（serif）
  16.      1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰
  17.      2. 场景：报刊书籍中应用广泛
  18.      3. 常见该系列字体：宋体、Times New Roman
  22.      - 等宽字体（monospace）
  26.      1. 特点：每个字母或文字的宽度相等
  27.      2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
  28.      3. 常见该系列字体：Consolas、fira code 
  32.   5.  字体系列 font-family

属性名：font-family

常见取值： 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列

• 具体字体：”Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
• 字体系列：sans-serif、serif、monospace等……

  1.      - 多个字体用英文逗号隔开,英文字体写在前边,中文字体写在后边

渲染规则：

  1. 1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体<br>
  2. 2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体<br>


注意点：

  1. 如果字体名称中存在多个单词，推荐使用引号包裹

  2. 最后一项字体系列不需要引号包裹

  3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

    1. 样式的层叠问题
      • 如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖,)写在最下面的会生效- CSS( Cascading style sheets )层叠样式表.
  1.   7.  字体font相关属性的连写
  2.      - 属性名：font<br />取值：<br />• font : style weight size family;

顺序要求:

• swsf （稍微舒服）

省略要求：

• 只能省略前两个，如果省略了相当于设置了默认值

注意点:
如果需要同时设置单独和连写形式,
要么把单独的样式写在连写的下面,
, 要么把单独的样式写在连写的里面.

  • 文本样式
    1. 文本缩进：text-indent
    2. 文本水平对齐方式：text-align
    3. 文本修饰：text-decoration
  • 文本缩进

属性名：text-indent

取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）

  • 文本水平对齐方式

属性名：text-align
取值：left 左对齐 center 中心对齐 right 右对齐
注意点：
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

  • 文本修饰

    1.      属性名：text-decoration<br />              取值:<br />                   属性值          效果<br />               underline       下划线<br />              line-through   删除线<br />                overline        上划线<br />                  none          无装饰线
    3. 注意:  开发中会使用 text-decoration : none ; 清除a标签默认的下划线 !<br />
  • line-height行高

作用：控制一行的上下行间距

属性名：line-height
取值：
数字+px
倍数（当前标签font-size的倍数）

应用：

  1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
  2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题

• font : style weight size/line-height family

  • 颜色表达方式:
  • 拓展 颜色常见取值（了解）
    属性名：
    • 如：文字颜色：color
    • 如：背景颜色：background-color
    • 属性值： 关键词 : 预定的颜色名 red , green,blue,yellow….

rgb表示方法 : 红绿蓝三原色.每项取值范围:0~255 , rgb(0,0,0).rgb(255,255,255),rgb(255,0,0)…..

rgba表示方法 : 红绿蓝三原色+a表示透明度,取值范围是0~1,取值范围:rgba(255,255,255,0.5) .rgba(255,0,0,0.3)…

十六进制表示法 : #开头,将数字转换成十六进制表示, #000000, #ff0000,#e92322,简写: #000, #f00

  • 取值类型①：关键词

常见颜色取值：

• red：红色

• green：绿色

• blue：蓝色

• yellow：黄色

• orange：橘色

• skyblue：天蓝色

• pink：粉色

• …….

  • 取值类型②：rgb表示法
    每项取值范围：0~255

常见颜色取值：

• rgb ( 255 , 0 , 0 ) ：红色

• rgb ( 0 , 255 , 0 ) ：绿色

• rgb ( 0 , 0 , 255 ) ：蓝色

• rgb ( 0 , 0 , 0 ) ：黑色

• rgb ( 255 , 255 , 255 ) ：白色

  • 取值类型③：rgba表示法

• 其实，比rgb表示法多个一个a，a表示透明度

a的取值范围：0~1

• 1：完全不透明

• 0：完全透明

省略写法：
• rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )

  • 取值类型④：十六进制表示法
    • 取值范围：
      • 两个数字为一组，每个数字的取值范围：0~9 , a , b , c , d , e , f

省略写法：

• 如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字

正确写法：#ffaabb 改写成 #fab

常见取值：

• #fff ：白色
• #000 ：黑色

注意点

  1. 类似于：#ffaabc 不能改写成 #fabc

  2. 实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可。

  • Chrome调试工具
    • Chrome调试工具操作
      • 打开方式

① 右击 → 检查

② 看哪里

选择元素

• 两种常见方法

控制样式

① 修改属性值
② 添加属性
③ 控制样式生效

特殊情况

• ① 出现删除线
② 出现小三角形

  • 符合选择器:

是将两个或者两个以上的基础选择器通过不同的方式连在一起

  • 后代选择器
    父元素选择器,子元素选择器,空格连在一起.有可能选择到儿子/孙子/重孙子等…
  • 子元素选择器
    父元素选择器>子元素选择器, 选择的父元素的直接下一代(亲儿子)
  • 并集选择器
    <选择器,选择器,选择器> 多个选择器,通过逗号连在一起,进行样式的集体声明(设置)
  • 交集选择器
    标签+类名(id) 满足两个条件,既是这个标签,同时又调用了后边的类(id)选择器,注意中间没有空格

  • 链接伪类:

    • a:link 超链接默认状态 :link可以省略
    • input:focus 焦点伪类 当input元素获取光标焦点的状态
    • a:visited 超链接访问之后的状态
    • a:hover 超链接鼠标悬停(放上去)的状态
    • a:active 超链接激活的状态(鼠标按下去不松手的状态)
    • 实际开发只会用哪个:hover,:hover 可以用到任意标签上
    • 焦点伪类 input:focus input获取光标焦点的状态