zoukankan      html  css  js  c++  java
  • CSS 层级样式表

    CSS 层级样式表

    一、 作用

    ​ 1 美化页面。

    ​ 2 html 和 css 分离。

    二、 基本语法

    ​ 选择器 {样式 : 值; 样式: 值;}

    三、 位置分类

    ​ 1 标签,行内样式表

    ​ 2 页面样式

    ​ 3 外部样式表, link标签引入

    四、 基础选择器

    ​ 1 id选择器,只能修饰该id的样式

    ​ 1 定义id

    内容

    ​ 2 定义样式: #title{样式}

    ​ 整个html页面id唯一。

    ​ 2 类选择器,所有使用了该类样式的元素

    ​ 1 定义类样式: .类样式名称 {样式}

    ​ 2 使用:

    内容

    ​ 3 元素(标签)选择器, 所有该元素

    ​ 1 标签名 { 样式}

    优先级:

    ​ 1 id选择器 > 类选择器 > 元素选择器

    ​ 2 元素使用了多个类选择器,且多个类选择器包含相同的样式,以代码顺序最后的一个为准。

    ​ 通配选择器:*

    五、 颜色:color

    ​ 1 英文单词 red green blue……

    ​ 2 十六进制,#ff0000

    ​ 3 rgb方式,rgb(255,0 ,0)

    六、 文本字体:

    ​ 字体:font-family :

    ​ 粗细:font-weight

    ​ 大小:font-size

    ​ 风格:font-style

    ​ 简写: font : (font-style font-weight font-size font-family) (至少保留font-size font-family)

    行高:line-height ,文本垂直居中

    文本:

    ​ 居中方式:text-align: center right left

    文本修饰:text-decoration : none 没有下划线

    文本缩进:text-indent: 2em;

    七、 复合选择器

    ​ 1 并集选择器

    ​ 2 属性选择器

    ![](https://img2020.cnblogs.com/blog/2194955/202107/2194955-20210707173037922-74254614.png)
    

    ​ 3 后代选择器, 选择器 选择器

    ​ 4 子选择器

    ​ 5 相邻兄弟元素

    伪类,伪元素

    八、 CSS注释

    ​ /* 注释 */

    九、 CSS三大特性

    ​ 1 层叠性

    ​ 口诀:长江后浪推前浪,前浪躺在沙滩上。

    ​ 2 继承性

    ​ 口诀:龙生龙,凤生凤,老鼠的儿子会打洞。

    ​ 3 优先级

    ​ CSS权重

    ​ 用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

    继承或者* 的贡献值 0,0,0,0
    每个元素(标签)贡献值为 0,0,0,1
    每个类,伪类贡献值为 0,0,1,0
    每个ID贡献值为 0,1,0,0
    每个行内样式贡献值 1,0,0,0
    每个!important贡献值 ∞ 无穷大

    比如:

    div ul li ------> 0,0,0,3 0,0,0,3

    .nav ul li ------> 0,0,1,2 0,0,1,2

    a:hover -----> 0,0,1,1 0,0,1,1

    .nav a ------> 0,0,1,1 0,0,1,1

    #nav p -----> 0,1,0,1 0,1,0,1

    注意: 数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。

    总结优先级:

    1.使用了 !important声明的规则。

    2.内嵌在 HTML 元素的 style属性里面的声明。

    3.使用了 ID 选择器的规则。

    4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

    5.使用了元素选择器的规则。

    6.只包含一个通用选择器的规则。

  • 相关阅读:
    java 深入理解jvm内存模型 jvm学习笔记
    java实体 和 xml相互转换
    clickhouse 离线/在线 安装和java通过jdbc链接
    clickhouse安装 Requires: libstdc++.so.6(GLIBCXX_3.4.19)(64bit)
    maven pom.xml详解
    elasticsearch 简单demo RestHighLevelClient LowLeveClient
    从一段时间段中获取所有日期
    hadoop 输入路径用正则表达式被默认处理为多个参数的问题
    对象变化影响map中的数据
    小技巧积累
  • 原文地址:https://www.cnblogs.com/hnkjdx-ssf/p/14982578.html
Copyright © 2011-2022 走看看