css知识点总结

77 阅读 0 评论 51 点赞

我是靠谱客的博主犹豫皮卡丘，最近开发中收集的这篇文章主要介绍css知识点总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

css（前端三要素之一）

1.介绍

作用：修饰页面的

css：层叠样式表

层叠：多个样式用于同一个元素

样式：color font-size

表：css代码，css文件

选择器样式布局

工作原理：加载html，然后加载css，将html和css结合，创建DOM树，浏览器显示DOM

DOM：文档对象模型，树形结构，元素、属性、文本称之为节点

2.语法

    声明

      属性名：属性值

css中区分大小写，对大小写比较敏感

声明块

将多个声明放在一个 {} 里面，每个声明之间使用；分隔

      {
          color:red;
          font-size:12px;
      }

规则

      选择器 {
        color:red;
      }

注释：/*注释内容*/

作用：1.记录你的编程思路

2.便于后期代码的维护

空白：可以在css代码中添加一些空白（空格、回撤），提高代码的可读性

color：red;
font-size:12px;

    速写形式
    类似于font，background， padding， border， margin 这些都被称为速记属性。这些属性允许在一行中写多个属性值。速记属性可以节省时间，使代码整洁。
      padding：1px 2px 3px 4px；

        padding-top
        padding-right
        padding-bottom
        padding-left

        padding: 10px 15px 15px 5px;
        等价于
        padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px

margin

如何在html中使用css

1.行内样式

将样式写在元素的style属性中

缺点：结构和样式没有分离

代码的复用率低

优点：优先级高

2.内联样式

将代码写在head标签中的style标签中

缺点：代码的复用率不高

优点：结构和样式可以分离

3.外部样式

在外部定义一个后缀名为.css的文件，在head中使用link标签引入

优点：结构和样式可以分离

复用率提高

选择器 + 规则（样式）+ 布局 + 动画
3.css选择器

作用：选择元素

核心选择器

1）标签选择器

        div {
          规则；
          规则；
          ...
        }

选中标签为div的所有元素

2）id选择器

        #id {
          规则；
          规则；
          ...
        }

3) 类选择器

        .class {
          规则；
          规则；
          ...
        }

4）普遍选择器

        *


    层次选择器

后代选择器

        ul li {
          规则；
          规则；
          ...
        }

选中ul下面的所有li

子代选择器

        .bottom > p {
          规则；
          规则；
          ...
        }

选中class为bottom的直接子元素p

相邻同胞选择器

        .jiangsu + li {
            规则；
            规则；
            ...
        }

选中class为jiangsu这个元素的下一个兄弟元素

一般同胞选择器

        .jiangsu ~ li {
          规则;
          规则;
          ...
        }

选中class为江苏的所有兄弟元素

多选择器

1）逗号选择器

        h1,h2,h3,.test {
          规则；
          规则；
          ...
        }

选中h1、h2、h3、class为test的元素

2）组合选择器

        a.baidu {
          规则；
          规则；
          ...
        }

选中class为baidu的a标签

属性选择器

[atrr] 选中具有属性atrr的元素，不管属性的值为多少

[atrr=val] 选中具有atrr属性，并且值为val

[atrr ^= val] 选中具有atrr属性，并且值以val开头

[atrr $= val] 选中具有atrr属性，并且值以val结尾

[atrr *= val] 选中具有atrr属性，并且值包含valable

[atrr ~= val] 选中具有atrr属性，并且其中一个值为val

伪类选择器

子代元素相关的伪类选择器

        ul:first-child {
          规则；
          规则；
          ....
        }

选中ul的第一个孩子

        ul:last-child {
          规则；
          规则；
          ....
        }

选中ul的最后一个孩子

        ul:nth-child(参数) {
          规则；
          规则；
          ....
        }
        参数的取值：
            1.数字

2.关键字（odd=>奇数，even=>偶数）

选中参数值的孩子

        元素状态相关伪类选择器
        :link   未被访问的状态，a标签
        :visited     已访问过的状态，a标签
        :hover     鼠标悬停的状态，a标签，其他标签也可用
        :active     活动的状态， a标签，其他标签也可用
        :focus     聚焦的状态
        :checked   用户选中的单选按钮和复选按钮
        :default   默认选中的单选按钮和复选按钮
        :enabled、 :disabled    可用的表单控件、禁用的表单控件
        :valid 、:invalid    通过验证的、不通过验证的
        :required、:optional   必填的和选填的
        :in-range 、:out-of-range   在范围内的、在范围外的

伪元素选择器

::after 选中之后的不存在的节点，可配合content属性进行内容填充

::before 选中之前的不存在的节点，可配合content属性进行内容填充

::first-letter 选中第一个文本字符

::first-line 选中第一行文本

::selection 选中用户在选择的时候的文本

4.优先级

1)权重(特性值)

   Thousands
     声明在元素的style属性中。特性值记为1000
   Hundreds
     包含在一个选择器中的所有ID选择器，特性值记为100
   Tens
     包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，特性值记为10
   Ones
     包含在一个选择器中的所有元素选择器，伪元素选择器，特性值记为1

2)后面的样式会覆盖前面的样式
如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。
采取就近原则。

3)!important
在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

5.继承
CSS中有些规则将会默认被子元素继承，有些则不会。
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border等

    inherit    继承父元素的样式
    initial    不继承。应用浏览器的默认样式
    unset    不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。

6.单位

颜色

关键字 red、pink、teal

十六进制的值 #ffffff = #fff,#cccccc,#ff0000

rgb函数 rgb(0,0,0),rgb(0~255,0~255,0~255)

rgba函数 rgba(0~255,0~255,0~255,0~1)

长度

绝对单位

px 像素

像素 (px) 是一种绝对单位（absolute units），因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位有 mm, cm, in，毫米（Millimeters），厘米（centimeters），英寸（inches）

相对单位

em 相对于当前元素的字体大小浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
div font-size：12px 1em = 12px width:10em

    rem   相对于html上的字体大小     浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
      div     html:10px      1rem = 10px     10rem = 100px

    %
      占父元素的百分比。例如：50%

选择器 + 样式（文本相关、字体、盒子、表格样式、列表样式）

7.文本相关的样式

文字相关的样式（可以被继承）

1）color 给文本指定颜色(关键字、十六进制的值、rgb、rgba)

2）font-family 给文本设置字体（字体栈、字体族）

serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线

      sans-serif   无衬线的字体，笔画结尾是平滑的字体

      monospace   等宽字体，用于代码，字体中每个字宽度相同

      cursive        草书，这种字体有的有连笔，有的还有特殊的斜体效果。

      fantasy    梦幻装饰字体，具有特殊艺术效果的字体

网络字体

      @font-face {
         font-family: myfont;
         src: url(./FZZJ-HGXSJW.TTF)
       }

      p {
         font-family: myfont;
      }

3）font-style 用于打开和关闭斜体

    normal       【默认】正常字体，关闭斜体

    italic        斜体

    oblique       模拟斜体

4）font-weight    字体的粗细程度

    normal       【默认】正常,400

    bold        加粗字体,700

    lighter       设置当前元素字体比父元素更细

    bolder       设置当前元素字体比父元素更粗

    100–900    数值类型的粗细程度（值越大字体越粗）

5）text-align 文本的排列方式

    left    左对齐

    center   居中

    right   右对齐

6）text-transform   允许字体变形

    none        防止任何改变

    uppercase   将文本转换为大写

    lowercase   将文本转换为小写

    capitalize   将所有单词第一个字母转换为大写

    full-width   转换为类似于一个等宽字体

7）text-decoration(line style color)
设置或者取消文本修饰
速写属性 line style color

text-decoration-line

none 取消所有文本修饰

underline 为文本添加下划线

overline 为文本添加上划线

line-through 为文本添加删除线

text-decoration-style

solid(实线)

wavy(波浪线)

dashed(虚线)

dotted(点状线)

double(双实线)

text-decoration-color

关键字、十六进制的值、rgb函数、rgba函数

8）text-shadow（h-shadow v-shadow blur color）文本的阴影

          none         取消所有阴影

          h-shadow       必需。水平阴影的位置。允许负值

          v-shadow      必需。垂直阴影的位置。允许负值

          blur          可选。模糊的距离

          color          可选。阴影的颜色。参阅 CSS 颜色值

字体图表库

iconfont

4.优先级

1)权重(特性值)

2)后面的样式会覆盖前面的样式
如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。
采取就近原则。

    inherit    继承父元素的样式
    initial    不继承。应用浏览器的默认样式
    unset       不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承</title>
    <style>
        .main{
            background-color: brown;
            font-size: 30px;
        }
        p{
            font-size: initial;
        }
    </style>
</head>
<body>
    <div class="main">
        <p>hello</p>
        <p>world</p>
    </div>
</body>
</html>

6.单位

颜色

关键字 red、pink、teal

十六进制的值 #ffffff = #fff,#cccccc,#ff0000

rgb函数 rgb(0,0,0),rgb(0~255,0~255,0~255)

rgba函数 rgba(0~255,0~255,0~255,0~1)

长度

绝对单位

px 像素

相对单位

em 相对于当前元素的字体大小浏览器给网页设置的默认基础字体大小是16像素，1em的计算值默认为16像素。
div font-size：12px 1em = 12px width:10em

选择器 + 样式（文本相关、字体、盒子、表格样式、列表样式）

7.文本相关的样式

文字相关的样式（可以被继承）

1）color 给文本指定颜色(关键字、十六进制的值、rgb、rgba)

2）font-family 给文本设置字体（字体栈、字体族）

serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线

      sans-serif   无衬线的字体，笔画结尾是平滑的字体

      monospace   等宽字体，用于代码，字体中每个字宽度相同

      cursive        草书，这种字体有的有连笔，有的还有特殊的斜体效果。

      fantasy    梦幻装饰字体，具有特殊艺术效果的字体

网络字体

      @font-face {
         font-family: myfont;
         src: url(./FZZJ-HGXSJW.TTF)
       }

      p {
         font-family: myfont;
      }

3）font-style 用于打开和关闭斜体

    normal       【默认】正常字体，关闭斜体

    italic        斜体

    oblique       模拟斜体

5）text-align 文本的排列方式

    left    左对齐

    center   居中

    right   右对齐

6）text-transform   允许字体变形

7）text-decoration(line style color)
设置或者取消文本修饰
速写属性 line style color

text-decoration-line

none 取消所有文本修饰

underline 为文本添加下划线

overline 为文本添加上划线

line-through 为文本添加删除线

text-decoration-style

solid(实线)

wavy(波浪线)

dashed(虚线)

dotted(点状线)

double(双实线)

text-decoration-color

关键字、十六进制的值、rgb函数、rgba函数

8）text-shadow（h-shadow v-shadow blur color）文本的阴影

字体图表库
iconfont

列表样式

list-style [<type>][<image>][<position>]

1）list-style-type 列表的类型

            none              没有类型
            disc              一个实心的小黑圆圈
            circle          一个空心的小圆圈
            square          一个块
            decimal          数字
            lower-roman    小写罗马数字   i, ii, iii, iv, v…
            upper-roman       大写罗马数字 I, II, III, IV, V…
            decimal-leading-zero   十进制的值

2）list-style-image

none 没有图片

url（）图片的路径

3）list-style-position

outside [默认值]显示在主块的外部

inside 显示在主块的内部

其他样式

1）cursor 调整光标悬浮到链接上的时候光标的形状

      url   需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help

      default   默认光标（通常是一个箭头）

      auto    默认。浏览器设置的光标

      pointer   手型

      crosshair十字交叉

      wait   等待

      help   帮助

      move   移动

      text   文本

2）line-height 行高

给元素设置行高等于盒子的高度，那么盒子中的文本将垂直居中
一般不写绝对单位一般写em 容易修改

3）outline 环绕边框

类似于盒子的边框，但是不占空间

      outline-width     边框线的宽度
      outline-style   边框线的样式
      outline-color   边框线的颜色
      outline-offset   边框线的偏移

4）dispaly 控制盒子的显示方式

inline 行内显示，宽高无效(行内元素)

block 块级显示，宽高有效（块级元素）

inline-block 行内显示同时宽高有效（行内块）

none 不显示，不占据屏幕空间（隐藏）

5）visibility 显示于隐藏

hidden 隐藏，占据屏幕的空间