css样式表 | 易学教程

div+css布局之float与clear的用法

阅读更多关于 div+css布局之float与clear的用法

CSS Float Layout Basics - CSS浮动布局基础：基于浮动的布局利用了float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一个<div>标签上时，浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页（或者其他包含块）的一边。任何显示在浮动元素下方的HTML都在网页中上移，并环绕在浮动周围。 float的属性如下表所示: left 文本或图像会移至父元素中的左侧。 right 文本或图像会移至父元素中的右侧。 none 默认。文本或图像会显示于它在文档中出现的位置。 CSS样式表中 clear:both;可以终结在出现他之前的浮动 CSS中 clear:both;可以终结在出现他之前的浮动。使用clear属性可以让元素边上不出现其它浮动元素。 clear的四个属性如下表所示: left 不允许元素左边有浮动的元素 right 不允许元素的右边有浮动的元素 both 元素的两边都不允许有浮动的元素 none 允许元素两边都有浮动的元素举例说明:float与clear的用法. <style> .fl{float:left;width:100px;height:25px;background:#cccccc;margin-left:5px; text

link和@import的区别

阅读更多关于 link和@import的区别

本质上，这两种方式都是为了加载css文件区别 1.从属关系区别 @import 是 CSS 提供的语法规则，只有导入样式表的作用； link 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2.加载顺序区别加载页面时， link 标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载。 3.兼容性区别 @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别； link 标签作为 HTML 元素，不存在兼容性问题。 4.DOM可控性区别可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。 5.权重区别(该项有争议，下文将详解) link 引入的样式权重大于 @import 引入的样式。 CSS 选择器的权重高，即选择器的优先级高。 CSS 的优先级特性表现为，对同一 HTML 元素设置样式时，不同选择器的优先级不同，优先级低的样式将被高优先级的样式层叠掉。 CSS 权重优先级顺序简单表示为： !important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符 6.链入方式上有区别。 link导入方式： <link rel="stylesheet" type=

css样式表的先后顺序

阅读更多关于 css样式表的先后顺序

CSS书写顺序位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, margin) 文字系列(font, line-height, letter-spacing, color- text-align等) 背景(background, border等) 其他(animation, transition等) 使用CSS缩写属性　　CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。去掉小数点前的“0” 连字符CSS选择器命名规范　　1.长名称或词组可以使用中横线来为选择器命名。　　2.不建议使用“_”下划线来命名CSS选择器，为什么呢？　　输入的时候少按一个shift键；　　浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）　　能良好区分JavaScript变量命名（JS变量命名是用“_”）来源： oschina 链接： https://my.oschina.net/u/261347/blog/639283

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

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

网页打开速度慢慢的所造成的影响很重大的，因此站长对于网页打开速度的在意程度也是不断的在加重。但是站长不知道除了外部环境（带宽速度）会影响网页的打开速度之外，网站内部也是存在有影响因素的，不过站长可以通过优化从而提高网页的打开速度。所以香港葵芳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引用的图片文件过多

面试知识点 html css（经常更新）

阅读更多关于面试知识点 html css（经常更新）

1.HTML5语义化什么是语义化　　用合理、正确的标签来展示内容，比如h1~h6定义标题好处易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。详细介绍地址：https://link.zhihu.com/?target=http%3A//www.daqianduan.com/6549.html 2.为什么最好把 CSS 的 <link> 标签放在 <head></head> 之间？为什么最好把 JS 的 <script> 标签恰好放在 </body> 之前，有例外情况吗？把 <link> 放在 <head> 中　　把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。如果将将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。把 <script> 标签恰好放在 </body> 之前脚本在下载和执行期间会阻止 HTML 解析。把

《浏览器工作原理与实践》<05>渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？

阅读更多关于《浏览器工作原理与实践》渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？

在上一篇文章中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用 JavaScript 优化动画流程，通过优化样式表来防止强制同步布局，等等。既然它的功能这么强大，那么今天，我们就来好好聊聊渲染流程。为了能更好地理解下文，你可以先结合下图快速抓住 HTML、CSS 和 JavaScript 的含义：从上图可以看出， HTML 的内容是由标记和文本组成。标记也称为标签，每个标签都有它自己的语意，浏览器会根据标签的语意来正确展示 HTML 内容。比如上面的标签是告诉浏览器在这里的内容需要创建一个新段落，中间的文本就是段落中需要显示的内容。如果需要改变 HTML 的字体颜色、大小等信息，就需要用到 CSS 。CSS 又称为层叠样式表，是由选择器和属性组成，比如图中的 p 选择器，它会把 HTML 里面标签的内容选择出来，然后再把选择器的属性值应用到标签内容上。选择器里面有个 color 属性，它的值是 red，这是告诉渲染引擎把标签的内容显示为红色。至于 JavaScript （简称为 JS），使用它可以使网页的内容“动”起来，比如上图中，可以通过

html和css的总结

阅读更多关于 html和css的总结

接触前端web开发已经一个月了，当然这里面还是有知识盲点。首先我会先总结一下我自己经常出错的地方，其次再介绍一下html5的部分用法。 1、回顾知识点在使用css的时候首先要在head头文件里面加入link语句，具体如下： <head> <link rel="stylesheet" type="text/css" href="链接样式表文件.css"/> </head> 其次我们会在css中建立一个通用css和index.css 在通用css中一般会有一下几个语句： *{ padding: 0; margin: 0; box-sizing: border-box; } 这一步目的是在消除空格，无缝连接。在网页设计时候，我们会用到盒子模型，最初为宽：内容宽+border+margin+padding，内容上比较繁琐，加上box-sizing: border-box;会使计算简便些，宽：width+margin (宽＝内容宽+border+padding)。 ul li{ list-style: none; } a{ text-decoration: none; } 因为ul li 在使用的时候默认是实心圈圈，在通用css中消除默认格式，同理超链接a在默认状态会有下划线，所以加上以上语句，达到我们想要的效果。 index.css中，我们在写代码的时候，尽量文字标注清晰

13 复习 - webpack基本配置2

阅读更多关于 13 复习 - webpack基本配置2

在webpack下使用样式表 1.安装处理样式表的loader cnpm i style-loader css-loader -D //css cnpm i less-loader less -D //less cnpm i sass-loader node-sass -D //scss 2.添加配置节点配置文件webpack.config.js下和plugins平级 module:{//配置所有第三方loader模块的 rules:[//第三方模块的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']},//处理css文件的loader {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//处理less文件的loader {test:/\.scs$/,use:['style-loader','css-loader','sass-loader']},//处理scss文件的loader ] } 来源： https://www.cnblogs.com/songsongblue/p/11876924.html

webpack基本使用

阅读更多关于 webpack基本使用

webpack安装时的坑高版本的webpack除了全局安装webpack外，还需安装webpack-cli，在本地使用时也一样需要这样，不然会出错 webpack使用是的坑在原始启动webpack编译时不要忘了加-o，在原始文件和要编译成为的文件目录中间要正常使用（方便使用）就要在package.json中配置 "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot", devDependencies和dependencies的区别 -D对应devDependencies，代表打包时使用，实际上线不会使用 webpack使用 webpack使得index.html中不用引入文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <!-- 因为 main

css入门

阅读更多关于 css入门

前端三要素：html，css，javascript，分别表示着内容，表现，行为。一个形象的比喻：富有能动性的人的构成三要素，血肉之体（内容）+ 外形轮廓（表现）+ 行为能力（行为）。颜值即正义的今天，越来越多的花里胡哨的页面层出不穷，这其中css就扮演了很重要的角色，虽然没有javascript来的那么让人惧怕，让人望而生畏，但也有很多需要理解和记忆的东西。讨论一个问题，习惯性的会问三个问题： 1.是什么？ 2.为什么？ 3.怎么样？答： 1. css （Cascading Style Sheets/层叠样式表）　　从名称中可以提取看出：css拥有层叠的能力，可以多张且可以叠加，用于描述样式，以表的形式存在。　　隐含的内容： css 是作用于 html，脱离了躯体将无处附着。　　这里就要提出几个问题了，　　多张：多张是如何在 html 中进行作用的　　　　叠加：叠加又是如何解决优先级，如何处理合并，替换的问题　　表的形式存在：css 作用 html 时都有哪些存在方式 2. 简单的内容堆叠已经满足不了用户的需求，需要有一种方式去解决样式的问题。　　最先提出的方式是利用 html 中的标签，i 代表斜体，strong 代表粗体，庞杂，体积大，复用性差终将决定他不能久存，终于被 css 取代了。 3. css 声明语句的规范：　　选择器

订阅 css样式表