WEB前端 CSS(非布局)

目录

  • WEB前端 CSS
    • CSS引入方式
    • CSS结构
    • CSS选择器
      • 直接选择器
      • 组合选择器
      • 分组选择器 也叫并集选择器
      • 属性选择器
      • 伪类选择器
      • 伪元素选择器
    • CSS选择器是一个查找的过程，高效的查找影响页面加载的效率
    • CSS选择器的优先级
    • CSS声明
      • CSS非布局声明
      • CSS布局声明
    • 除了css 对样式有影响，标签元素的其它属性也会有一些影响。如的type类型

WEB前端 CSS

CSS被用于同时控制多重页面的样式和布局样式很多；关键在于布局的耗时和难点通过CSS可以将html中的格式化都剥离出来。

为什么说层叠呢？
简单说就是：一个元素标签的样式css的来源，是可以有很多来源的。把每个来源点抽象看为一个层，每个来源层根据css的标准，是有不同的优先级的。优先级低的在底层，优先级高的在高层。这样层次堆叠就有了一个从上而下的堆叠模型，或者想象成一个装修材料层板堆叠在那里。每一层都可以给元素设置任何css属性，每一层之间可以有相同的属性。只是，相同的属性会根据层次的优先级进行覆盖。可以再次想象从上帝视角，垂直向下看，上层有的会遮挡下层有的，上层没有的就会看到下层有的。这就是将一个立体的看成一平面视角。这就是层叠的含义了。

至于优先级，内联高于选择器(多个选择器，根据权重排列优先，相同有后覆盖先)，选择器高于继承。
可以说，css这种设计非常优秀的。很多技术都有类似的设计解决多来源的冲突。
了解层叠和css属性来源，是调试样式的关键。
优点：

  1. 大大提升网页开发的效率
  2. 提高网站被搜索引擎收录，html文件小了。
  3. 内容和表现分离
  4. 网站表现统一，容易修改；这个很重要，用户体验最重要。

博文图片挂了临时解决办法
o_%E6%9F%A5%E7%9C%8B%E6%8C%82%E5%9B%BE%E4%B8%B4%E6%97%B6%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95.png

CSS引入方式

  1. 内联样式:在HTML元素标签头中添加style属性。
  2. 内部样式表:在HTML的head标签使用style标签，包含CSS内容
  3. 外部引用:使用外部CSS文件，通常在head中使用link；css文件最好已.css结尾;外部还有一种导入式；

三种引入方式，内联是优先大于后两者的。
而后两者注意其在html代码中引入的顺序；这个顺序会影响优先级。相同选择器权重后引入的优先级高。

一般父级标签可以影响到子标签，但是有些则不能，如a链接标签.
在引入方式这里还要提到，引入方式除了内联，其它都是选择器。
可以总结一个:标签css样式的抽象来源方式有：继承，选择器，内联。只是选择器有两种引入方式。

CSS结构

  1. CSS结构都是：选择器和声明；
  2. 选择器：selector 选择出dom节点。匹配选择器的节点，将获得该选择器的声明（Css样式）作为一层。至于这一层是优先级，另行判定权重。选择器原理在很多框架中都得到了应用，如jQuery。选择器原理可以参考这篇博客
  3. 声明：声明就是属性和值是k:v对，多个声明间使用分号间隔.
  4. css的注释方式：
/*这是注释*/
/*
html是<!-- -->
js是//
css是/**/
*/

CSS选择器

站在元素标签的角度，它被选择器Selector选中后，元素去选择排序涉及到自己的选择器权重顺序，并重叠他们，取出想要的。权重高的没有的属性，就使用选择权重低的的样式。这就是重叠。
其实选择器的分类，可以站在另一个角度来看待：

  • 一类：直接选择器，通过元素自身的特点的选择器；标签选择器，类，id，属性。
  • 二类：间接选择器，很多叫组合选择器；通过自己所处的环境和位置来；由直接选择器构成，直接选择器之间存在包含关系或者说父子关系，最后选择上的是被包含的元素；利用了父元素的选择来间接通过它们的关系来选择上元素。如：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。
  • 三类：分组选择器，很多叫群组选择器。就是多个选择器，无论直接还是间接，它们都是一样的声明样式；为了节约代码，将他们用逗号间隔。其实质就是放到把选择器放到一起成为一个组，他们之间没有任何关联关系，只是大家都是一样的声明样式，放在一堆而已。
  • 四类：交集选择器，因为一个元素的多个自身特点组合在一起来选择元素。但是，第一个选择器必须是标签选择器，第二个必须是类选择器或者id选择器。如元素有多个类，通过一个类可能选择不到，就通过多个类一起选择。也可以想成，一个选择器选择的元素和另一个选择器选择的元素之间的交集里面的元素。交集选择器用的还是比较多的。它的构成就是选择器之间没有空格。交集还可以是标签和属性选择器交集。
  • 五类：伪类和伪元素，不存在的。伪类是元素事件发生时被选择上所呈现的样式。为元素是元素的前后虚拟出元素。

小结：选择器说白了，就是找可能定位元素的各种维度去实现查找。带到耗子的就是好猫。当你要给一个或者一类元素创建选择器时，就是考虑怎么查找到他们更准确，就是选择器类型的选型了。还有种选择器是用于动态的，就是配合js改变元素，从而改变元素匹配的选择器，从而改变页面的布局样式。这就是js操纵页面动态的手段之一(也要考虑选择器优先级)。

直接选择器

1. 标签选择器

选择器是标签名：p {}

2. 类选择器

选择器是.类名: .red {}
其实类选择器可以看作是用于标签继承的，标签可以多继承。
类用来归类一些列样式。可以将实现了不同样式的类应用到元素中。最后多个类进行层叠，得到想要的效果。所以用类的层叠使用是很科学和灵活的。

  • 要用“公共类”的思想，将多个标签相同的样式，都抽象到一个类中
  • 不要试图使用一个类就将标签的样式都写到这个类中。通过抽象公共部分到一个类中，然后标签使用多个类。这样就解除了一定的耦合，即如果元素的样式都在一个类中，那么类和这个元素之间就是高度耦合的。每个类尽量小，减少了耦合度，这样就变得非常灵活，把代码写活了。

3. ID选择器

选择器是#id值： #p2 {}

4. 通用选择器

* { }
主要用于reset css 重置样式；如清楚所有盒子的padding和margin；设置百分比高度继承有效果参考

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
html {box-sizing: border-box;
}*,
*::before,
*::after {box-sizing: inherit;
}

组合选择器

是对前三种选择器进行扩展组合。而inline style是元素标签内的，严格不是选择器，但是人们便于理解记忆，将其说成内联选择器。

标签选择器后 跟 标签

    1. 后代，无论直属还是间接： div p {}
    1. 直属，直接后代 : div>p {}
    1. 毗邻, 后代中最近的一个： div+p {}
    1. 弟弟，找到和自己同级的标签： div~p {}
      如： .polaris span img {} 通过多个选择器好到具体的标签。

分组选择器 也叫并集选择器

如： div,span,img {} 注意使用逗号间隔的，这就是群主选择器，其实群主选择器就是将定义相同的放在一起，省代码

属性选择器

  1. 根据属性查找
  2. 根据属性和值查找：=，^=，$=，*=，~=

伪类选择器

是标签加上标签的type类型。如： a:active {} 。

  • 伪类选择器主要用在a标签
  • 对于a标签：有“love hate" link visited hover active
  • 表单的input标签input输入框获取焦点时的样式：input:focus {}

伪元素选择器

所谓伪元素选择器，就是针对一个虚拟的元素，没有具体的标签，就是一个标签的相对位置构建一个默认inline的盒子。所以伪元素选择器，长得像这样：p:after {} 这样。

  • 主要有三类：first-letter、before、after
  • 其实指定元素的伪元素，这个伪元素是一个相当于是个元素，就是一个盒子，这个盒子是在指定元素盒子的content内，即是指定元素的子元素。before在前面after在后面。
  • before和after伪元素要起作用，其选择器必须有content属性，即使content时候一个空字符串；没有content是不会在页面有任何效果的；
  • after多用于一个盒子内，利用它的位置性，即总是在最后，可以给他指定一个clear:both属性，进行清除浮动。
  • 经过试验：发现first-letter只能用在元素类型是block和inline-block可用。
  • 对于after和before在盒子前后添加一个盒子做分隔线还是不错的。

CSS选择器是一个查找的过程，高效的查找影响页面加载的效率

选择器查找原理

CSS选择器的优先级

选择器优先原理参考
一般而言，选择器越特殊，选择器指向越准确,优先级越高（所以我们要定义一个选择器时，要想优先级高不被其它覆盖，尽量准确）基于基本选择器的权重进行计算，参考权重值:

65c17dd5gy1g2eww855qwj20fr04xdgq.jpg

组合的选择器，就根据这个进行计算得出权重值，这里也给个形象的枚举出所有组合可能之间的权重关系：
65c17dd5gy1g2ewxnp37nj20go0l9q4t.jpg

还有一些法则：
65c17dd5gy1g2ewyf9u29j20hj0453yv.jpg

还有：1. 伪类选择器、属性选择器、类选择器 权重一样
2. 标签选择器、伪元素标签选择器 权重一样

！important 是作用域属性，在属性的值后面加上！important，那么这个属性所影响到的元素都已这个！important所影响的值。

特别注意：权重比较是按照同类比较，不会去计算和的大小。也就是说同一权重计数是不会进位的。

CSS声明

就是指定k-v对，也可以说是元素的属性，影响元素在浏览器中的表现。
可以将属性对样式产生的影响不同进行分类：
大分类两种：

CSS非布局声明

就是和盒子还有布局无关；如字体，颜色等.
text-decoration 文字上通过线装饰。
background-image:url(xx.png)

CSS布局声明

见《WEB前端 布局》
关于布局：盒子模型和BFC规则，

除了css 对样式有影响，标签元素的其它属性也会有一些影响。如

  • 的type类型

转载于:https://www.cnblogs.com/ZJiQi/p/9264304.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/266747.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

二叉树的三叉链表存储和基本操作

二叉树的三叉链表存储和基本操作

三叉链表存储表示 改进于二叉链表&#xff0c;增加指向父节点的指针&#xff0c;能更好地实现结点间的访问。 存储结构 /* 二叉树的三叉链表存储表示 */typedef struct BiTPNode{TElemType data;struct BiTPNode *parent,*lchild,*rchild; /* 双亲、左右孩子指针 */}BiTPNode,*…
阅读更多...
麟龙指标通达信指标公式源码_通达信指标公式源码单阳不破主图指标公式

麟龙指标通达信指标公式源码_通达信指标公式源码单阳不破主图指标公式

做价值的传播者&#xff0c;一路同行&#xff0c;一起成长问题&#xff1a;怎样才能每天都收到这类文章&#xff01;答案&#xff1a;只需点击上方《通达信公式指标》{通达信单阳不破}MA30: MA(C,30 ),COLORGREEN;MA30_: IF(MA30>REF(MA30,1),MA30,DRAWNULL),COLORMAGENTA;阳…
阅读更多...
高考英语口语测试软件,练习英语口语的app有哪些

高考英语口语测试软件,练习英语口语的app有哪些

随着国际化的发展&#xff0c;英语越来越普遍。英语中口语也是很重要的成分之一。也是跟老外交流或者英语考试的重要考点之一。我们有很多方法锻炼口语。什么方法最快捷最有效方便&#xff1f;下面我们看看几款最受欢迎的英语口语练习app。练习口语的app1、口语侠一款非常实用的…
阅读更多...
chkconfig命令会立即生效吗_UG绘制波纹管，整体变形命令你会用吗？

chkconfig命令会立即生效吗_UG绘制波纹管，整体变形命令你会用吗？

最近又有小伙伴问我波纹管怎么画了&#xff0c;这个以前教过大家&#xff0c;文章名字叫饮料吸管和排水管&#xff0c;看来这个名字不够专业&#xff0c;大家找不到啊&#xff0c;今天就来重新绘制一个&#xff0c;用一个新的方法&#xff0c;大家来额外学习一下&#xff0c;了…
阅读更多...
C语言入门日记

C语言入门日记

参考&#xff1a;C语言入门日记 作者&#xff1a;9art0 发布时间&#xff1a;2020-08-30 16:37:46 网址&#xff1a;https://blog.csdn.net/GatoWong/article/details/108307915?spm1001.2014.3001.5501 C语言入门日记1.1.C语言搭建及system函数1.2.C语言的基础框架解释1.3.C程…
阅读更多...
测试电视是不是4k的软件,怎么判断4K电视真假?教你快速检测的方法!

测试电视是不是4k的软件,怎么判断4K电视真假?教你快速检测的方法!

原标题&#xff1a;怎么判断4K电视真假?教你快速检测的方法!4K电视从进入市场之后一直都受到企业的力捧&#xff0c;随着电视企业对4K电视的大力度宣传和消费环境的逐渐成熟&#xff0c;越来越多的消费者开始认可4K电视&#xff0c;并在购机时表明首选4K电视。4K电视顾名思义就…
阅读更多...
等压线上怎么画风向_战场上骑兵应该怎么拔刀？从清人佩刀为何总是刀柄向后说起...

等压线上怎么画风向_战场上骑兵应该怎么拔刀？从清人佩刀为何总是刀柄向后说起...

在以前的文章《兵器谱|挂错地方死得快&#xff01;图说骑兵马刀的佩带与悬挂》&#xff0c;有读者问&#xff1a;清代的武将大多数都是刀柄朝右边&#xff0c;挂在屁股后面&#xff0c;算不算双附耳式悬挂法的一个变种呢&#xff1f;这样到底是不是真的有助于马上拔刀&#xff…
阅读更多...
win10计算机跑分,鲁大师如何跑分_鲁大师跑分详细教程

win10计算机跑分,鲁大师如何跑分_鲁大师跑分详细教程

很多小伙伴都知道鲁大师可以测试电脑的性能&#xff0c;就是大家称为的跑分&#xff0c;跑分的大小跟电脑的性能成正比&#xff0c;跑的越高性能越好。那么该如何在鲁大师里面进行跑分测试呢?其实只要打开性能测试就可以了&#xff0c;具体的教程下面一起来看看吧。鲁大师跑分…
阅读更多...
C语言函数日记

C语言函数日记

参考&#xff1a;C语言-函数-日记 作者&#xff1a;9art0 发布时间&#xff1a;2020-08-31 00:57:06 网址&#xff1a;https://blog.csdn.net/GatoWong/article/details/108314011?spm1001.2014.3001.5501 C语言-函数-日记2.1.函数概述一2.2.函数概述二2.3.函数无返回参数&…
阅读更多...
python运行调出控制台_python.exe 和 pythonw.exe 的区别

python运行调出控制台_python.exe 和 pythonw.exe 的区别

(区分.py、.pyw、.pyc 文件)最近也在学习python&#xff0c;针对python中的一些问题做下记录&#xff0c;希望大家共同成长&#xff1b; Windows系统搭建好Python的环境后&#xff0c;进入Python的安装目录&#xff0c;大家会发现目录中有python.exe和pythonw.exe两个程序。 …
阅读更多...
修复计算机u盘,u盘损坏怎么修复 u盘损坏修复方法

修复计算机u盘,u盘损坏怎么修复 u盘损坏修复方法

造成u盘损坏的原因有很多&#xff0c;比如我们在拔出u盘前&#xff0c;如果没有先将u盘弹出或者弹出的不彻底&#xff0c;就很可能造成u盘的损坏。u盘损坏就会导致计算机无法识别出u盘。那u盘损坏了能不能修复?如果能修复&#xff0c;那要怎么操作?下面就让我们一起来看看u盘…
阅读更多...
433M射频灯

433M射频灯

参考&#xff1a;433M射频灯 作者&#xff1a;9art0 发布时间&#xff1a;2020-09-21 21:57:29 网址&#xff1a;https://blog.csdn.net/GatoWong/article/details/108700989?spm1001.2014.3001.5501 目录433M射频灯硬件接线1. KEIL建立工程2. 电子可编程开关继电器原理3. 上电…
阅读更多...
2清空所有表_拉链表（二）

2清空所有表_拉链表（二）

拉链表&#xff08;一&#xff09;拉链表&#xff08;二&#xff09;一、前言在上一节简单介绍了拉链表&#xff0c;本节主要讲解如何通过binlog采集MySQL的数据并且按月分区的方式实现拉链表。这里以上节介绍的用户表(user) 举例二、涉及到的表1. 原始表&#xff08;user&…
阅读更多...
出生日期范围的Sql语句_【呕心总结】python如何与mysql实现交互及常用sql语句

出生日期范围的Sql语句_【呕心总结】python如何与mysql实现交互及常用sql语句

9 月初&#xff0c;我对 python 爬虫 燃起兴趣&#xff0c;但爬取到的数据多通道实时同步读写用文件并不方便&#xff0c;于是开始用起mysql。这篇笔记&#xff0c;我将整理近一个月的实战中最常用到的 mysql 语句&#xff0c;同时也将涉及到如何在python3中与 mysql 实现数据交…
阅读更多...
iphone的生命周期

iphone的生命周期

ios应用的生命周期在开发过程中我们需要一些全局对象来将程序的各个部分连接起来&#xff0c;这些全局对象中最重要的就是UIApplication对象。但在实际编程中我们并不直接和UIApplication对象打交道&#xff0c;而是和其代理打交道。UIApplication 是iPhone应用程序的开始并且负…
阅读更多...
基于Wemos的智能感应开盖垃圾桶——日记

基于Wemos的智能感应开盖垃圾桶——日记

参考&#xff1a;基于Wemos的智能感应开盖垃圾桶——日记 作者&#xff1a;9art0 发布时间&#xff1a;2020-09-24 00:40:59 网址&#xff1a;https://blog.csdn.net/GatoWong/article/details/108759063?spm1001.2014.3001.5501 1.项目软硬件平台及开发环境 1.1.硬件平台 1…
阅读更多...
严格程度_国内医疗器械生产许可证申请申报-经营一类、二类、严格的三类之间区别...

严格程度_国内医疗器械生产许可证申请申报-经营一类、二类、严格的三类之间区别...

医疗器械生产许可证是医疗器械生产企业必须持有的证件&#xff0c;由当地药监局审核颁发。开办医疗器械生产企业应当符合国家医疗器械行业发展规划和产业政策。医疗器械生产许可证同样也是根据生产医疗器械的种类不同&#xff0c;需要办理资质审批也是不同的&#xff0c;具体如…
阅读更多...
matlab z变换离散化_用C++编写一个简单的光栅化渲染器：3D篇

matlab z变换离散化_用C++编写一个简单的光栅化渲染器：3D篇

3D光栅化与2D光栅化在图元绘制方面差别并不大&#xff0c;3D光栅化主要是多了很多坐标系(Local&#xff0c;world&#xff0c;View...)&#xff0c;除此外遮挡算法和裁剪算法也会稍微复杂一些。本篇文章的重点就主要集中在各种坐标系变换上。1.基本3D变换本文所采用的向量(vect…
阅读更多...
Catalan数列

Catalan数列

引入 今天听学长讲了卡特兰数列后对其有了更深的认识&#xff0c;在此完善了一下之前的博客加以总结。 首先用一个经典的例子来描述一下Catalan数列&#xff0c;我们有一个1~n的数列和一个大小为n的栈&#xff0c;我们有如下两种操作&#xff1a; 当未入栈序列不为空时&#xf…
阅读更多...
计算机和外部通信方式,计算机和外部的通信方式

计算机和外部通信方式,计算机和外部的通信方式

计算机和外部交换信息又称为通信(Communication)。按数据传送方式分为并行通信和串行通信两种基本方式。1、并行通信并行通信就是把传送数据的n位数用n条传输线同时传送。其优点是传送速度快、信息率高。并且&#xff0c;通常只要提供二条控制和状态线&#xff0c;就能完成CPU和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023