第三代半导体 django 网站favicon图标制作 做推广 控制跳转 json reactjs eloquent jar stl vue部署 vue响应式 npm安装vue vue遍历 java反射方法 python与机器学习 mysql安装后怎么使用 mysql升序 pythonfor循环 python入门教程 python抛出异常 python链接mysql数据库 python函数大全 java基础教学 java编译环境 java基础代码 java读取文件数据 java代码 java输出 登录界面html props java疯狂讲义 rar去广告 dep tampermonkey x64dbg fireworks winhex中文版下载 搜狐影音播放器 平均值符号怎么输入
当前位置: 首页 > 学习教程  > 编程语言

day 4-李大人part1

2020/12/5 10:45:24 文章标签:

day 4 一:CSS(层叠样式表) 文章目录day 4一:CSS(层叠样式表)1样式表:11行内样式表(内联):12内部样式表:**1.标签选择器**2.id选择器**3.类(class)选择器**4.伪类选择器**5.通用选择器**6.群组选择器**7.包含(后代)选择…

day 4

一:CSS(层叠样式表)

文章目录

  • day 4
    • 一:CSS(层叠样式表)
        • 1·样式表:
          • 1·1==行内样式表(内联)==:
          • 1·2==内部样式表==:
            • **1.标签选择器
            • **2.++id选择器++
            • **3.++类(class)选择器++
            • **4.++伪类选择器++
            • **5.++通用选择器++
            • **6.++群组选择器++
            • **7.++包含(后代)选择器++
          • 1·3==外部样式表==:
    • 二:随机文本的生成
    • 三:控制台的相关问题
    • 四:选择器的权重
    • 五:选择器的优先级
    • 五:选择器的优先级

1·样式表:

1·1行内样式表(内联)
  • 标签内部添加style属性:style=“属性名1:属性值1;属性名2:属性值2;”
1·2内部样式表
  • head里面加入style标签,通过选择器写入各种css样式

- 选择器的分类:

**1.标签选择器

特点:

  • style的格式=>标签{css属性1:属性值1;}


**2.++id选择器++

特点:

  • id是唯一的 ,不允许重复

  • style的格式=> #id {css属性1:属性值1;}

  • 常见命名方法:

    a.驼峰命名法(bigBox)

    b.下划线连接命名法(big_box)

    c.横线链接(big-box)


**3.++类(class)选择器++

​ 特点:

  • clsaa是可以重复的,且可以有多个class值,空格隔开

  • class=“name1 name2”

  • style的格式=> .class{ }


**4.++伪类选择器++

​ 特点:

  • a:link{ } 链接未跳转(点击)之前的样式

  • a:visted{ } 链接跳转(点击)之后的样式

  • 元素:hover{ } 鼠标划过时候的样式

  • a:active{ } 鼠标按下去的时候的样式

  • 以上四种同时作用于a标签,必须按照(LV好原则)


**5.++通用选择器++

​ 特点:

  • 选取到所有的标签,一般用来重置样式

  • style的格式=> *{}


**6.++群组选择器++

​ 特点

  • 当有多个选择符应用相同的样式时,可以写到一组

  • 格式:选择器,选择器{} 选择器之间逗号隔开

  • 之间的权重没有必然的联系


**7.++包含(后代)选择器++

​ 特点

  • 嵌套标签产生的辈分关系,可以有很多层

  • 选择器之间的类型是不固定的

  • 选择器 选择器{ } 选择器之间空格隔开


1·3外部样式表
  • 使用步骤:

    1·新建一个后缀名为.css的文件夹

    2·在文件夹里建一个后缀名为.css的文件

    3·使用link标签引入css文件

    ​ —rel:关联文档类型

    ​ —type:文档类型

    ​ —href:css文件的地址

  <link rel="stylesheet" href="css文件的地址" type="text/css">
  • 外部样式表的引入区别:

  • *方式区别:link是HTML提供的引用方式
    / @import是css提供

  • *加载顺序区别:link和HTML同时加载 /
    @import在加载完html后加载的(浏览器刚开始可能渲染不出样式)

  • *兼容性区别:link都兼容 / @importIE5以上才兼容

  • *DOM控制样式:使用js控制dom改变样式的时候,只能是link引入的样式

二:随机文本的生成

​ lorem直接回车,或者确定随机的英文单词个数:lorem数字

三:控制台的相关问题

在这里插入图片描述

四:选择器的权重

  • 内联样式权重1000

  • id选择器的权重 100

  • class,伪类选择器权重 10

  • 标签选择器权重为 1

五:选择器的优先级

  • 哪个权重值高,就优先显示哪个的样式
  • 继承样式的优先级最低
  • 权重值相同的,后写的优先级高
  • 后代选择的权重=每一个选择器的和
  • 群组选择器的权重=每一项自己本身的权重

class,伪类选择器权重 10

  • 标签选择器权重为 1

五:选择器的优先级

  • 哪个权重值高,就优先显示哪个的样式
  • 继承样式的优先级最低
  • 权重值相同的,后写的优先级高
  • 后代选择的权重=每一个选择器的和
  • 群组选择器的权重=每一项自己本身的权重


本文链接: http://www.dtmao.cc/news_show_450309.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?