csss | 易学教程

CSS（二）样式优先级别和css的单位刻度

阅读更多关于 CSS（二）样式优先级别和css的单位刻度

一、css的特殊性-优先级　　csss的选择是有优先级的，　　a)、同类型，同级别的样式后者先于前者　　b)、ID > 类样式 > 标签 > * 　　c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式　　d)、具体 > 泛化的，特殊性即css优先级　　e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表) 　　内嵌样式：内嵌在元素中，<span style="color:red">span</span> 　　内部样式表：在页面中的样式，写在<style></style>中的样式　　外联样式表：单独存在一个css文件中，通过link引入或import导入的样式　　f)、!important 权重最高，比 inline style 还要高二、计算优先级　　important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符　　权重、特殊性计算法：CSS样式选择器分为4个等级，a、b、c、d 　　1.如果样式是行内样式（通过Style=“”定义），那么a=1，1,0,0,0 　　2.b为ID选择器的总数 0,1,0,0 　　3.c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0 　　4.d为标签、伪元素选择器的数量 0,0,0,1 　　5.

第二次学习

阅读更多关于第二次学习

第二节课感觉上也不是很难，主要是给网页的格式排版，要用到<div></div> 一个静态页面要有标题，有开头，有内容，有结尾，所以分几个模块用<div id = **>来写开头给定id也就是这个“模块”的名字，我们设最上面标题类为banner，下面有菜单menu，接着是主要内容main，最下面是末尾footer。先设一个“盒子”box，将上面的东西放在盒子里，如下 ————————————这里是代码—————————————————— <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title>  <link href="csss.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="box"> <div id="banner">  我是图片 <img src="../图标/WPH.ico" alt="我的图片不见了" /> </div> <div id="menu"> 我是菜单 </div> <div id="main">

一款绝对让你惊艳的CSS框架——TailwindCSS

阅读更多关于一款绝对让你惊艳的CSS框架——TailwindCSS

前言前段时间，laravel更新8.0版本，系统内置的Jetstream应用支架使用的是Tailwind CSS，于是勾起了我对Tailwind CSS的兴趣。后来项目中也是逐步使用，总体感觉超级爽。就像他的简介一样Utility-First效用优先的CSS框架。相比bootstrap，semantic ui antd这些组件库，tailwind只是个css库，简单的说就是可以完成任何ui交互，而上面的组件库一般就是做个后台应用，所以使用tailwind的环境更广泛一些。几个亮眼的地方首先是响应式设计。 css的媒体查询写起来还是比较麻烦的，如下： @media only screen and (max-width: 760px) { .navbar { width:100%; } } **使用了Tailwind CSS就免去这些繁琐的东西。**默认情况下，Tailwind使用移动优先断点系统，类似于您在Bootstrap或Foundation中可能使用的系统。这意味着未加前缀的实用程序（如uppercase）在所有屏幕尺寸上都有效，而带前缀的实用程序（如md:uppercase）仅在指定的断点及以上断点生效。如下一段代码就可以实现不同尺寸显示不同样式，是不是比媒体查询写法方便很多呢！ <div class="bg-red-500 sm:bg-green-500 md