css样式表 | 易学教程

前端深入之css篇|link和@import到底有什么区别？

阅读更多关于前端深入之css篇|link和@import到底有什么区别？

写在前面在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。而在我们学习之初的外部样式表都是用 link 引入的，但是当后来我们学习的逐渐深入，发现 @import 也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下 link 和 @import 的区别吧！区别 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style> </head> </html> 这就是两种引用方式的常见用法，可以很清晰的看出 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上才能识别；而link是 HTML 标签，所以不存在兼容性问题。 4

CSS - 简介

阅读更多关于 CSS - 简介

1. 概念　　层叠样式表, 用来进行网页的美化和对网页样式的开发, 依赖于HTML 2. 特点　　样式代码可以复用, 减少代码冗余 3.声明　　在标签上使用style属性进行声明, 这里声明的样式会直接作用到当前标签上 <hr style="width: 300px;" /> 　　在head标签中使用style标签进行声明, 一般用来声明公共样式, 也可以单独对某个标签的样式进行声明 <style type="text/css"> hr { width: 200px; } </style> 　　在head标签中使用link标签, 引入外部声明好的CSS文件, 这种方式解决了不同网页中使用相同样式的问题 <link rel="stylesheet" type="text/css" href="css/demo.css" /> 来源： https://www.cnblogs.com/mpci/p/11582512.html

再谈 load 与 DOMContentLoaded

阅读更多关于再谈 load 与 DOMContentLoaded

本文首发在github，感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了，相信大家在刚入门时，见的最多的可能就是 load 事件了。 load 事件接触多了，大家就会接触到它的闺蜜 DOMContentLoaded 事件，网上有很多介绍这两个事件的文章，对们它的解释无外乎以下两种 load MDN的解释： load 应该仅用于检测一个完全加载的页面当一个资源及其依赖资源已完成加载时，将触发load事件。意思是页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。 DOMContentLoaded MDN的解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。意思是HTML 下载、解析完毕之后就触发。看了这两个解释，我仍然一脸懵逼，只是像小学生背课文一样知道 load 和 DOMContentLoaded 事件的触发时机，但还是不明白究竟什么情况下触发这两种事件。一些概念下载/加载这两个词语表达的是一个意思，就是浏览器将资源下载到本地的过程。解析解析的意思是将一个元素通过一定的方式转换成另一种形式。比如 html 的解析。首先要明确，html 下载到浏览器的表现形式就是包含字符串的文件。浏览器将

CSS学习（6）层叠

阅读更多关于 CSS学习（6）层叠

1.声明冲突不同的样式，多次应用到同一元素层叠：解决声明冲突的过程，浏览器自动处理（权重计算）有时候需要修改样式的时候，可以使用优先级高的方式覆盖，而不是在源代码修改 ①比较重要性 (1)作者样式表中的 !important 样式用法：color:red !important; 拥有最高优先级，慎用。 (2)作者样式表中的普通样式 (3)浏览器默认样式 ②比较特殊性（看选择器）总体规则：选择器选中的范围越窄，优先级越高（如p.a比a优先级高）具体规则：通过选择器，计算一个四位数（逢256进1），数越大，优先级越高千位：内联样式，记做1，其他记做0 百位：id选择器的数量，没有记做0 十位：类选择器，属性选择器，伪类选择器的数量个位：元素选择器，伪元素选择器的数量 ③比较源次序代码书写靠后的优先级高应用 1.重置样式表书写一些作者样式，覆盖浏览器的默认样式就像是一种默认的标准格式的样式，通用的，先把浏览器的样式覆盖掉，后面具体的样式再写一个详细的样式表常见的重置样式表：normalize.css、reset.css、meyer.css 2.爱恨法则（越写在后面的优先级越高） link > visited > hover > active a:link{color:black;} 正常 a:visited{color:gray;} 访问过的 a:hover

第01天HTML与CSS

阅读更多关于第01天HTML与CSS

一.HTML与css #day02_CSS 1.回顾: html:超文本标记语言超文本:文本…,超链接|音频|视频|图片标记:标签 <标签名></标签名> < 标签名/> 标记(标签): 1.标题标签 n:1-6 2.段落 —>块标签 3.文字属性 <标签名属性名 = 值属性名 = 值 > size,color 4.字体修饰标签 :加粗斜体 5.图片: width: alt: 6.超链接: 锚点: 1.设置锚点 2.找锚点 <a href=""#id属性值/name属性值> 7. 线条 8. 换行 9.列表 9.1:有序列表 9.2:无序列表 9.3:自定义列表 10.表格 table 行列表头行合并 rowspan 列合并 colspan 11.表单标签(重点) < form method = " " action = " " > </ form > 1.普通输入文本框 < input type = " text " name = " " value = " " > 2.密码框 password 3.单选 radio 默认值checked < input type = " radio " name = " " value = " " > checked 4.复选框 checkbox 5.上传文件 file 6. 按钮 button 提交 submit 重置

CSS学习并应该注意学习的地方

阅读更多关于 CSS学习并应该注意学习的地方

css的学习和其他的学习一样,都需要特定的方法才能比较快的去掌握它.要想掌握CSS,?首先要学会HTML，我刚开始是从零开始学习的，花了一个月时间学习HTML，没有老师，书就是我唯一的老师，也没有上网的条件！一个月过后，我就开始学习CSS，刚开始看的第一本CSS书是《CSS网页样式设计》看了几天后发现根本看不懂！，之后换了一本《HTML参考大全》，这本书是网页制作师的案头常备之书！之所以更换这本书来学习CSS，是因为这里面有一部分是CSS，就成了我的CSS启蒙书。看了几段后，觉得外国人写的教程很有条理，由浅入深，一步一步引领你向前走，让你明白他们在说什么，而不是象国内的书讲的深浅不一，缺乏条理，好象怕你不知道他很有学问！就象前面所说的那本书《CSS网页样式设计》当时看了，对于初学CSS的我来说，真的不知道它在说什么！再来谈一下学习过程中的细节，因为一个样式它是不可能脱离HTML页面的，HTML不与样式结合的话,?CSS就失去了存在的意义。所以一般书中都会举一个例子，然后让你上机测试效果，这是笔者想让你有对样式表CSS有一个初步的印象，告诉你CSS能做什么。一个小例子：“麻雀虽小，五脏俱全”，你可能看不懂每一个语句的真正意思。但是你可以记得例子的模式，以后在实践中不断地用，不断用的过程就是不断记的过程，所以不能恢心，不能总认为自己记忆力不好，但不管你骑的是牛也好

less 学习笔记

阅读更多关于 less 学习笔记

一、介绍 Less （Leaner Style Sheets 简洁的样式表）是一门向后兼容的 CSS 预处理语言，它扩展了CSS 语言。 less is more. 几种 css 预处理语言的诞生先后顺序： Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。 Less 诞生于 2009 年，受 Sass 的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。二、安装 & 使用 1、在 Node.js 环境： npm install -g less > lessc styles.less styles.css 2、在浏览器环境： <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ><

2019.09.16 CSS选择器和引入方式

阅读更多关于 2019.09.16 CSS选择器和引入方式

1、CSS三种引入方式怎么使用？　　CSS三种引入方式是：　　　　1：内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式 <div> <p style="color: green">我是一个段落</p> </div> 　　　　2：内接样式，又称内嵌式，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style> 　　　　3：外接样式，外接样式分两类，一类是链接式，第二类是导入式（具体看第二个代码）。链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，而导入式是通过将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过CSS中的import将外部样式表文件链接到HTML文档中； <link rel="stylesheet" href="./index.css"> 　　　　 <style type="text/css"> @import url('./index.css'); </style> 2、CSS引入方式 @import 和 link 的区别？　　　区别：　　　　1.从属关系区别　　　

一篇RPO漏洞挖掘文章翻译加深理解。

阅读更多关于一篇RPO漏洞挖掘文章翻译加深理解。

　　　　这是我第一次尝试翻译一篇漏洞挖掘文章，翻译它也是为了加深理解它。这是一篇很有意思的漏洞挖掘文章。　　前几天在看fd的博客，偶然看到了这篇文章，虽然有点老了。但是思路真的牛皮。我决定花费时间和精力研究它们。我决定运用我对这个漏洞的理解来讲述他们。　　存在漏洞网站地址: http://www.google.com/tools/toolbar/buttons/apis/howto_guide.html 　　查看源代码 <html> <head> <title>Google Toolbar API - Guide to Making Custom Buttons</title> <link href="../../styles.css" rel="stylesheet" type="text/css" /> ...... 首先我们不管有没有rpo漏洞吧，先看最基础的，代码是不符合规范的当我在sublime中输入<htm然后自动补全代码的开头会有<!DOCTYPE html> 了解这个很重要，我们继续往下说。　　　　rpo呢，简单点来说就是相对路径覆盖，源码中引用了相对路径css文件。　　　　那么我们要做的就是覆盖这个css文件，导致css攻击钓鱼 or css-xss攻击? 　　　　现在我们知道，这算符合rpo攻击的一些条件的 1.没doctype 2.包含相对路径

Bulma CSS - 开始

阅读更多关于 Bulma CSS - 开始

Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式有数种方法可以安装Bulma：使用npm安装Bulma包使用cdnjs CDN链接到Bulma样式表从GitHub项目库获得最新的开发版本 1. 使用npm安装Bulma包 npm install bulma 2. 使用cdnjs CDN https://cdnjs.com/libraries/bulma 3. 从GitHub项目库下载 https://github.com/jgthms/bulma/tree/master/css Font Awesome 字体图标如果想使用图标，可加上Font Awesome 字体图标库： <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> 规范要求 Bulma能正常工作需要把网页设置为支持响应式。 1. 使用HTML5 doctype <!DOCTYPE html> 2. 添加支持响应式的viewport元标记 <meta name="viewport" content="width=device-width, initial-scale

订阅 css样式表