css样式表 | 易学教程

引入css的四种方式

阅读更多关于引入css的四种方式

本文转载于: 猿2048 网站引入css的四种方式 1.内联式引用：直接用在标签上，但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用：css代码与html代码分离，便于代码重复使用 < link href ="css/style.css" type ="text/css" rel ="stylesheet" /> style.css文件内容如右： .font{color:blue;font-size:12px;} 3.内部式引用：页面较为清晰，但不能被别的页面使用 < style type ='text/css' > .font { color : blue ; font-size : 12px ; } </ style > 4.外部导入式：可以在一个HTML文件中导入多个样式表。类似于外部链接式引用在HTML文件中head标签中加入 < style type ='text/css' > @import url('./style/style.css'); </ style > 来源： https://my.oschina.net/u/4191619/blog/3099942

CSS性能优化的技巧（一）

阅读更多关于 CSS性能优化的技巧（一）

下面我们开始介绍实践型的4个优化技巧，先从首屏关键CSS开始。 1. 内联首屏关键CSS（Critical CSS）性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而**内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）**能减少这一时间。大家应该都习惯于通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。所以说，内联CSS能够使浏览器开始页面渲染的时间提前，因为在HTML下载完成之后就能渲染了。既然内联CSS能够使页面渲染的开始时间提前，那么是否可以内联所有的CSS呢？答案显然是否定的，这种方式并不适用于内联较大的CSS文件。因为初始拥塞窗口 3存在限制（TCP相关概念，通常是 14.6kB，压缩后大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。因此，我们应当只将渲染首屏内容所需的关键CSS内联到HTML中。既然已经知道内联首屏关键CSS能够优化性能了

测开之路九十：css的引用方式

阅读更多关于测开之路九十：css的引用方式

第一种：内联，直接在标签里面加style属性，优先级别最高，但是不利于维护第二种：页面嵌入，在head标签里面写一个style标签，以类选择器的形式写入，优先级别第二第三种：外联，样式表链接，单独写一个css文件，在html的head里面用link标签引用 css /* 定义body的背景色为紫色 */body{ background: blueviolet;} html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title>  <link rel="stylesheet" href="../css/css01.css">  <style> .class_01{ color:red; } </style></head><body> <h1>原始文字</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores aspernatur autem cum eligendi esse libero magnam nemo nesciunt, omnis

如何通过优化网站提高网页打开速度

阅读更多关于如何通过优化网站提高网页打开速度

网页打开速度慢慢的所造成的影响很重大的，因此站长对于网页打开速度的在意程度也是不断的在加重。但是站长不知道除了外部环境（带宽速度）会影响网页的打开速度之外，网站内部也是存在有影响因素的，不过站长可以通过优化从而提高网页的打开速度。所以香港葵芳IDC小编今天就为大家科普下，优化网页打开速度的内容有哪些。　　　　1、缩小Javascript和CSS文件　　　　如果你的网站大约有50-60%!的(MISSING)用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。使用压缩工具可以减少Javascript和CSS尽一半的文件大小。同时，使用香港服务器时，我们要开启缓存机制，使用户首次访问时，将图片、CSS和Javascript在其浏览器缓存，这样他们下一次访问就特别快。Apache Web服务器，可以使用mod_cache模块开启缓存。　　　　2、减少HTTP请求　　　　小编告诉你浏览器会花费80%!的(MISSING)时间获取外部元件，包括脚本、样式表、图像等，只有20%!的(MISSING)时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。通过Yslow等网站性能评分工具可以查看你的网站HTTP请求数，可以看到JS、CSS和CSS引用的图片文件过多

如何通过优化网站提高网页打开速度

阅读更多关于如何通过优化网站提高网页打开速度

CSS书写顺序

阅读更多关于 CSS书写顺序

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) CSS书写规范使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。去掉小数点前的”0″ 简写命名很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 16进制颜色代码缩写有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用”_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用”_”）这里有一篇破折号与下划线的详细讨论，英文：点击查看中文篇：点击查看不要随意使用id id在JS是唯一的

Web性能优化方案

阅读更多关于 Web性能优化方案

第一章打开网站慢现状分析在公司访问部署在 IDC 机房的 VIP 网站时会感觉很慢。是什么原因造成的？为了缩短页面的响应时间，改进我们的用户体验，我们需要知道用户的时间花在等待什么东西上。可以跟踪一下我们的登录页面，如下图所示从上图我们可以分析知道， HTML 文档只占了总响应时间的 20% ，其它 80% 响应时间用来下载 JS 、 CSS 、图片等组件。所以 WEB 前端有很大的优化空间，我们将从 WEB 的前端优化、后端优化两方面综合考虑给出 WEB 的性能优化方案。第二章 WEB 前台的优化规则一、尽量减少 HTTP 请求有几种常见的方法能切实减少 HTTP 请求： 1 、合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。 2 、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位 , 把多个图片合成一个图片。二、使用浏览器缓存在用户浏览网站的不同页面时，很多内容是重复的，比如相同的 JS 、 CSS 、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。根据服务器端的响应 header ，一个文件对浏览器而言，有几级不同的缓存状态。 1 、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。 2

css day2

阅读更多关于 css day2

外观属性 color：文本颜色用于定义文本的颜色 1.预定义的颜色值，如red、green、blue等 2.十六进制，如#FF0000、#FF6600、#29D794等。十六进制是最常用的定义颜色的方式 3.RGB代码，如红色可以表示为rgb（255,0,0）或rgb（100%，0%，0%） line-height:行间距 <style> p { line-height:20px; } </style> 一般情况下，行间距比字号大7/8像素即可 text-align：水平对齐方式用于设置文本内容的水平对齐，相当于html中的align对齐属性属性 left：左对齐（默认值） right：右对齐 center：居中对齐 <style> h1 { text-align:center; } </style> text-indent：首行缩进设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比% 允许使用负值，建议使用em作为设置单位 1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度 letter-spacing：字间距用于定义字符与字符之间的间距，其属性值可为不同单位的数值，允许使用负值，默认为normal word-spacing：单词间距用于定义英文单词之间的间距，对中文字符无效，与letter

CSS继承控制：inherit、initial和unset

阅读更多关于 CSS继承控制：inherit、initial和unset

CSS里有三种常用的属性值继承方式：inherit，initial和unset。我们用一个简单的例子来演示一下： <ul style="color: green;"> <li>Default <a href="#">link</a> color</li> <li>Inherit the <a style="color: inherit;" href="#">link</a> color</li> <li>Reset the <a style="color: initial;" href="#">link</a> color</li> <li>Unset the <a style="color: unset;" href="#">link</a> color</li> </ul> Default link color Inherit the link color Reset the link color Unset the link color 第一项没有规定颜色继承方式，因此使用浏览器对<a>标签预设的超链接样式表，在这里是蓝色； [注] 浏览器预设样式表：可以理解为浏览器帮我们为<a>写了个style，其优先级自然就高于其父元素了。第二项将继承方式设置为inherit，于是使用其父（或祖父，etc）元素的颜色值，在这里是绿色；第三项将继承方式设置为initial

浏览器DOM渲染及阻塞问题

阅读更多关于浏览器DOM渲染及阻塞问题

在准备面试，然后复习到了计网的知识点，紧接着又扯到了 url从输入到浏览器渲染的那个问题，这里来顺便完善补充一下，本文的重点在渲染上面的图就是浏览器从服务器请求来页面后渲染的全过程这里我们分开来看：分为了四大步解析DOM树和CSSOM 1.HTML标签进行Dom树解析：在Dom树解析的过程中，遇到link会去进行请求资源，这个过程不会阻塞Dom的解析；遇到script标签，则会将解析停下来，去执行js代码，因此script标签通常建议放在</body>之前，能优化用户体验，减少白屏时间，还可以使用js动态加载生产script标签（PS：这个jsonp跨域请求有在使用）这里需要注意 img标签是不会阻塞Dom的解析的，虽然他也有src标签去请求外部资源下面是大佬思否上的原话：解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。 2

订阅 css样式表