css样式表 | 易学教程

css的三种导入方式

阅读更多关于 css的三种导入方式

内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type="text/css"> p{ font-size: 100px; color: red; } </style> <p>css内部样式表</p> 外部样式表创建一个cssTest.css的css文件 p{ font-size: 50px; color:green; } span{ font-size: 50px; color: yellow; } 使用外部样式表 <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> <p> 优先级：内联样式表 > 内部样式表 > 外部样式表</p> <span >外部样式表</span> 完整测试代码  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <style type="text/css"> p{ font-size: 50px; color: red; } </style> <link rel="stylesheet" type="text

less 学习笔记

阅读更多关于 less 学习笔记

一、介绍 Less （Leaner Style Sheets 简洁的样式表）是一门向后兼容的 CSS 预处理语言，它扩展了CSS 语言。 less is more. 好处： 1、具有部分编程语言的功能，提高编码效率 2、提供模块化 3、结构清晰、易于拓展 4、完全兼容 css 缺点： 1、学习成本提高了些 2、让调试变的复杂起来（但其实有办法解决，不赘述了）几种 css 预处理语言的诞生先后顺序： Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。 Less 诞生于 2009 年，受 Sass 的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。二、安装 & 使用 less 即可在客户端运行，也可在服务器端运行。 1、在 Node.js 环境： npm install -g less > lessc styles.less styles.css 2、在浏览器环境： <link rel="stylesheet

Qt样式表

阅读更多关于 Qt样式表

文章目录 1、什么是QSS 2、QSS的使用 3、盒子模型 4、QSS语法规则 5、选择器类型 6、子控件 7、伪状态 8、动态属性 9、自定义控件 10、命名空间内的自定义控件 11、解决冲突 12、级联效应 13、继承 1、什么是QSS 说QSS之前，先了解下CSS，一般接触过前端开发的都知道CSS是什么，CSS（层叠式样式表）一般用来表现HTML或XML等文件的计算机语言，CSS能够静态修饰网页，也能够结合脚本对网页各元素进行动态格式化。而QSS，说白了，就是适用于Qt的“层叠式样式表”，由影响窗口部件绘制的样式规则组成，在概念、术语、语法上等很大程度上受到了CSS的影响，QSS的功能比CSS弱很多，主要是体现在选择的类型较少，可用于Qt的属性也比较少，并且，并不是所有的属性都可以在Qt的控件上使用。 2、QSS的使用 1、直接调用QWidget::setStyleSheet()方法 QWidget * pWidget = new QWidget ( ) ; pWidget - > setStyleSheet ( "background-color:#ff0000" ) ; 2、调用QApplication::setStyleSheet()方法，该方法可以设置整个程序的样式表 qApp - > setStyleSheet ( "background-color:

网站性能优化（website performance optimization）2

阅读更多关于网站性能优化（website performance optimization）2

我们先研究下构建渲染树前的几个步骤：也就是DOM和CSSOM，通常这些步骤的效果最差使你的网页呈现速度非常慢，我们是讨论尽可能快的将HTML流式传输给客户端，使浏览器能够开始构建DOM，还有其他注意事项吗？有一个HTML的尺寸呢？我想应该尽可能小，我们来看看实现这一目的一些策略，假设我想要优化这个HTML 要优化CSSOM，我们需要删除不必要的样式，缩小和压缩文件并缓存，对吧？对，这些都是很好的策略，安市没记错的话，当我们运行PageSpeed Insignts的时候，它还推荐我们查看下阻止呈现的CSS。假设有个简单的网页，包含一个CSS文件，浏览器下载了HTML然后发现并获取CSS，浏览器最早什么时候就会绘制网页？我们不能绘制没有样式的网页，也就是阻止呈现的CSS，可以对此作出优化？CSS使我们能够按照特定条件范围应用样式，如这个文件，body规则在所有条件下都适用。但是当设备处于横向模式时，我们会应用特殊的规则。是菜单悬浮在右侧，类似的，如果有用户想要打印网页，我们就会调整文本大小，适用更小的字号，媒体查询对自适应设计来说很重要，但是这回如何帮助我优化关键渲染路径呢？假设我要呈现使用这个CSS文件的网页，我们注意到浏览器会阻止呈现，直到解析了所有的样式，但是直观的来说，你认为它应该对print规则阻止呈现吗？我认为如果我们不打印网页的话，则没必要呈现，对吧？对

浏览器渲染页面原理，reflow、repaint及其优化

阅读更多关于浏览器渲染页面原理，reflow、repaint及其优化

浏览器的主要组件包括： 1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。 2. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。 3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。 4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。 5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。 6. JavaScript 解释器。用于解析和执行 JavaScript 代码，比如chrome的JavaScript解释器是V8。 7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。关键路径渲染(Critical Rendering Path)：渐进式浏览器拿到HTML之后的渲染过程：（不同内核实现不一样但大概是这样） 1. 解析HTML，构建DOM tree。 2. 解析CSS，构建CSSOM tree。 3. 合并DOM tree和CSSOM tree

HTML表单和CSS

阅读更多关于 HTML表单和CSS

href是链接标签的核心属性，属性值可以是一个跳转的地址 <a href="//www.baidu.com/">GO!百度</a>，适用于任何带有路径的地址 href里面所有的内容就是路径，绝对路径：从盘符开始，然后依次往下查找。相对路径：从当前文件开始，如果下一级目录就直接写文件夹名，上一级用、、/表示 form核心标签只有提交功能，没有任何样式。action提交的地址通常为服务端的地址，如果不写默认本页提交。method的提交方式是get/post，如果不写为get提交。 CSS的使用方式：1 行内样式（内联样式）<标签style="属性名1：属性值1；属性名2：属性值2；.... "></标签> 2页面样式：在head标签里增加一个子标签</style> 选择器{ 属性名1：属性值1；属性名2：属性值2； .... } 3.外部文件（外部样式表）在head标签里面增加一个子标签 <link rel="stylesheet" href="css文件的路径" /> 4.外部导入样式主要用在样式初始化。因为有一些标签有自己的样式，我们需要清空，方便自己计算 css------选择器 ID选择器使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头一个页面中只能有一个id属性值 css中id选择的表示方法用 # 表示 class选择器

CSS系列：CSS的引入方式

阅读更多关于 CSS系列：CSS的引入方式

css的四种引入方式内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"></div> 这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。嵌入方式 <head> <style> .embedded { width: 50px; height: 50px; background-color: black } </style> </head> <div class="embedded"></div> 嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。链接方式 <head> <link rel="stylesheet" href="reference.css"> <

CSS 禁止底部出现滚动条

阅读更多关于 CSS 禁止底部出现滚动条

1、完全隐藏在 <boby> 里加入 scroll="no" ，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示； <boby scroll="auto"> 3、样式表方法在 <boby> 里加入 style="overflow-x:hidden" ，可隐藏水平滚动条；加入 style="overflow-y:hidden" ，可隐藏垂直滚动条。被包含页面里加入 <style> html { overflow-x:hidden; } </style> 4、另一种方法 <style type="text/css"> body { overflow-x:hidden; overflow-y:hidden; 来源： https://www.cnblogs.com/sylys/p/12125333.html

CSS基础知识~

阅读更多关于 CSS基础知识~

CSS:层叠样式表 div:容器开发过程中，通常使用DIV+CSS进行内容布局 ------------------------------------------- 1.CSS代码出现的位置 1.1 出现在标签中 <tag style="CSS代码" /> 作用范围：仅作用于当前标签 1.2 出现<style></style>代码块中(结合选择器使用) <head> <style> CSS..... </style> <head> 作用范围：作用于当前整个html 1.3 出现在外部文件中（规范性写法）首先，需要新建一个专门用于书写CSS代码的文件 (后缀名为.css的文件) 其次，在需要引入CSS文件的HTML文件中书写：<link rel="stylesheet" type="text/css" href="CSS文件的路径" /> 作用范围：只要导入了这个CSS，那么可以作用于所有HTML ------------------------------------------- 2.选择器：用于将某个元素选中 2.1 标签选择器：标签名{CSS代码....} 2.2 class(类)选择器：首先，在每个标签中都有一个class属性，用于为本标签指定类名其次，在css中，使用.类名的方式来选中符合条件的标签同一个HTML中，class名可以允许出现重复 2.3

前端性能优化常用方法

阅读更多关于前端性能优化常用方法

网页内容 1.1 减少http请求次数 1.1.1 捆绑文件通过一些现成的库将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。 1.1.2 CSS Sprites 把多个图片拼成一副图片，然后通过CSS来控制需要显示图片的位置（ CSS Sprites Generator ） 1.1.3 Inline images 通过Base64编码的字符串将图片内嵌到网页文本中。（但是只适合用于小图标，大一点的图片就免了） 1.2 减少DNS查询次数 DNS（Domain Name System，域名系统） 1.3 避免页面跳转 1.4 缓存Ajax 1.5 延迟加载这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。 Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。 1.6 提前加载与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。 1.7 减少DOM元素数量

订阅 css样式表