css样式表 | 易学教程

[原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

阅读更多关于 [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引用外部css文件时, 需要拼出实际的含有IP地址的CSS文件地址 , 并且需要用双斜杠(//)来代替单斜杠 . =====后来遇到的问题: css文件里的样式, 在页面上显示没有问题, 但是打印预览却没有样式.... 又挣扎了一天, 原来问题是: lodop中的加入css文件后, 不能识别css类(.baseInfo)这样的样式, 得写到具体的元素中才可以, 如: (.baseInfo Table)下的css才会生效. 对于Repeater中的Table标签, 貌似也加载不了样式, 最后网repeater的Table标签设置了一个ClassName, 才生效. =====为了能让页眉、页脚、以及内容页, 全部都应用CSS中的样式, 着实费了一番功夫. 不知道是不是<link....> + HTML的方式不好使还是我没弄清楚, CSS样式表无法全部生效(只有用ADD_PRINT_HTM的部分生效, 其他不生效). 最终, 在JS中用ajax获取CSS文件内容, 然后采用<style...>+HTML的方式解决. 代码如下: //母版页, 注意: url的拼接形式 <input id=

高性能web开发

阅读更多关于高性能web开发

外部JS的阻塞下载所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现. 阻塞下载图：下图是访问blogjava首页的时间瀑布图，可以看出来开始的2个image都是并行下载的，而后面的2个JS都是阻塞下载的(1个1个下载)。嵌入JS的阻塞下载

CSS层叠

阅读更多关于 CSS层叠

1、层叠的含义：声明冲突是多个相同的CSS声明(属性)，应用到同一个元素上，层叠是一种机制，用于解决CSS声明冲突 2、层叠的过程： 2.1比较优先级每一个声明都有一个优先级，当发生冲突时，优先级高的会被保留，优先级低的会淘汰，一个声明的优先级与他的来源和重要性有关。若属性后面跟上【！important】，则表示一条重要声明，否则表示普通声明。优先级从低到高的顺序如下：（1）浏览器默认样式表中的声明；（2）用户样式表中的普通声明；（3）作者样式表中的普通声明；（4）作者样式表中的重要声明；（5）用户样式表中的重要声明 2.2比较特殊性一个声明的特殊性，取决于规则适用范围的大小。规则适用范围越大，特殊性越小。特殊性从高到低如下：（1）行内样式；（2）ID选择器；（3）类选择器；（4）元素选择器；（5）通配符选择器 2.2.1权重值！important→infinity 行间样式→1000 ID选择器→100 class/属性/伪类→10 标签/伪元素→1 通配符→0 2.3比较源次序代码靠后的胜出。 3、a元素伪类书写顺序（1）【：link】链接未被访问的样式；（2）【：visited】链接已经被访问过的样式；（3）【：hover】鼠标悬停在元素上的样式，适用于其他元素；（4）【：active】链接被激活时的样式。 4、继承继承

【CSS】如何在一个页面中引入样式css

阅读更多关于【CSS】如何在一个页面中引入样式css

CSS（Cascading Style Sheet）又叫层叠样式表。是我们学习前端必不可少的一门语言，学习它其实就是为了学会如何去更改页面标签的样式。目前使用最广的是css3，但同样的，他是从css2演变过来的，所以我们还是要从css2开始学起。今天就先聊聊如何在html中引用css，以改变页面样式。 1.行内引用（行内式）所谓行内式就是通过style属性在标签内部写。但是这种方法及其不推荐。因为w3c标准就是一直倡导结构和样式分离，在标签内部写会使得css和html代码交织在一起。 1css.html <p style="font-size:20px; color:red">行内式</p> 实现效果： 2.内部引用（嵌入式）所谓内部引用就是在head标签内添加子标签style，在子标签内写css代码。当文件的css较少，或者我们自己做测试时多使用这种方式。 1css.html （head部分） 1 <style type="text/css"> 2 /* 嵌入式/内嵌式 */ 3 p { 4 color: aqua 5 } 6 </style> 1css.html （body部分） 1 <p>内部引用</p> 实现效果： 3.外部引用（外部式）所谓外部引用就是在一个html文件写标签结构，在另一个css文件中写样式代码。然后把css文件连接到html文件中

css之选择器

阅读更多关于 css之选择器

CSS之选择器一，CSS有三种方式引入样式表： 1，内联方式 Inline Styles 内联定义即是在对象的标记内使用对象的 style 属性定义适用其的样式表属性。示例代码： <p style="color:red">这一行的字体颜色将显示为红色</p> 2,内部样式块对象 Embedding a Style Block 在你的 HTML 文档的 <head> 标记里插入一个 <style> 块对象。示例代码： <style> .test2 { color: red; } </style> 3,外部样式表 Linking to a Style Sheet 先建立外部样式表文件 *.css ，然后使用 HTML 的 link 对象。或者使用 @import 来引入。示例代码：  <link rel="stylesheet" href="core.css">  <style> @import url("more.css"); </style> 二，选择器的分类 1，标签选择器 <div> <p>Sample Paragraph</p> <p>Sample Paragraph</p> <p>Sample Paragraph</p> </div> <style type="text

WEB开发编码原则：优化Javascript文件,并将其放到页面底部

阅读更多关于 WEB开发编码原则：优化Javascript文件,并将其放到页面底部

在这篇博文中指出： 1、整个页面文档家在结束才开始加载css和js以及其他的数据 2、当顶部的所有js都家在结束之后才可以加载页面中的图片 3、顶部的common.css和common.js几乎是同时开始加载 4、底部的loader-min.js和离他最近的footer.jpg也是同时开始加载从这里面可以得出的结论是 1、尽量减少整个document的大小和顶部css的大小，加快他们的加载，甚至在整个页面比较小的情况下可以将css放在底部。 2、javascript放在底部，这样就可以和图片几乎同时下载，让图片尽快的下载下来回复感觉也很有道理： 22 楼 fighter_Jon 2010-11-01 优化应该是个权衡的过程 js放在底部是防止js对之后资源造成阻塞但是如果是web app应用部分js也需要放在head部分保证页面功能完整而不是页面先行 13 楼 smildlzj 2010-10-30 PS... LZ知识没学好.. 每一个读取js,css,图片什么都是一个http连接,关长连接啥事... CSS尽量放头部, js尽量放最后(不过一般还是会放头部) css,图片会并行下载 10 楼 Saito 2010-10-29 嗯.hoooooooooopo说的没错. http1.1规范里面建议每个domain两个连接并行下载.所以可以把图片什么的分域名.

CSS-基础

阅读更多关于 CSS-基础

CSS定义 CSS（Cascading Style Sheet)层叠样式表。插入CSS样式表插入CSS样式表的方式有3种： 1.内联样式（Inline style) 在标签内部使用样式，如下所示： <p style="color:sienna;margin-left:20px">这是一个段落。</p> 2.内部样式表（Internal style) 在文档头部的<style>标签定义内部样式表，如下所示： <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p{ color:red; } </style> </head> 3.外部样式表（External style) 当样式需要应用于很多页面时，外部样式表将是理想的选择。使用文档头部的<link> 标签链接到样式表，如下所示： <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 多重样式的优先级（就近原则） 1. 内联样式 > 内部样式 >外部样式 > 浏览器默认样式注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 2.内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素(类型)选择器 >

CSS笔记

阅读更多关于 CSS笔记

W3C英文网站： https://www.w3.org/ W3Shcool中文网站： http://www.w3school.com.cn 概述 CSS指层叠样式表(Cascading Style Sheets),用来指导HTML元素的显示，实现了内容与表现分离，极大提高了工作效率。通常采用外部样式表导入的方式实现内容与表现分离。 HTML引入CSS的4种方式：（优先级1-4, 1优先级最高） 1--内联样式（在HTML元素内） <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 2--内部样式表（位于标签内） <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> type可以不写！ 3--外部样式表在header引入 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 4--浏览器默认样式来源： https://www.cnblogs.com/bryant24/p

CSS基本布局属性

阅读更多关于 CSS基本布局属性

CSS 是 Cascading Style Sheet 的缩写，又称为“层叠样式表”，简称样式表。它是一种制作网页的新技术，现在已经被大多数浏览器所支持，成为网页设计者必不可少的工具之一。样式表首要目的是为网页上的元素精确定位。其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过使用格式来控制。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将网页的格式通过 CSS 样式表文件来控制。网页设计中我们通常需要统一网页的整体风格，统一的风格大部分涉及网页中文字属性、网页背景色以及链接文字属性等，如果我们应用 CSS 来控制这些属性，会大大提高网页设计速度，更加统一网页总体效果。来源： https://www.cnblogs.com/zhaochenliang/p/11451506.html

CSS学习笔记

阅读更多关于 CSS学习笔记

层叠样式表（Cascading Style Sheets，CSS）用于为 HTML 元素指定样式，从而使得内容与表现分离 CSS 系列文章整理如下，有不足之处还请多多指正： CSS学习笔记(一) 基本介绍 CSS学习笔记(二) 选择器 CSS学习笔记(三) 样式声明 CSS学习笔记(四) 框模型来源： https://www.cnblogs.com/wsmrzx/p/11438253.html

订阅 css样式表