前端CSS笔记

118 阅读1分钟

类和id区别

  • 类选择器:class=“c1”,可以有多个属性
  • id选择器:唯一性

书写区别

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

使用环境

  • 一般用类选择器比较多
  • id选择器一般和JS开发集合使用

通配符选择器

*{}找到页面中所有的标签,设置样式

字体大小

font-size:尽量偶数,默认16px

字体粗细

font-weight

字体样式

font-style

字体

font-family,可以写多个备用,中间用逗号隔开

复合写法

font:style weight size family 同时设置单写和连写的形式,要把单写的样式写在连写的下面

首行缩进

text-indent:32px或者2em

文本居中

  • text-align:right
  • text-align给文本所在标签设置(文本父元素)
  • line-height垂直方向居中

交集选择器

作用:选中页面中同时满足多个选择器的标签 标签选择器必须在最前面 p.active无空格

伪类

      a:link {
        color: blue;
      }

      /* 链接访问之后 */
      a:visited {
        color: aqua;
      }
      /* 鼠标放到标签上时 */
      a:hover {
        color: brown;
      }
      /* 被激活  鼠标点击 不松手 */
      a:active {
        color: chartreuse;
      }

      /* 
       4个伪类同时应用于a标签时要注意顺序问题

       hover要放到link 和visited的后面
       active要放到hover的后面
      */
      h3:hover {
        background-color: aquamarine;
        color: brown;
      }
      /* 鼠标点击 不松开 */
      h3:active {
        color: chartreuse;
      }
      /* 了解 */
      input:focus {
        background-color: cornflowerblue;
      }