高效 css 整理

避免通用规则请确保规则不以通用类型作为结束! 不要用标签名或 classes 来限制 ID 规则如果规则的关键选择器为 ID 选择器,则没有必要为规则增加标签名.因为 ID 是唯一的,增加标签只会拖慢匹配过程. 差 button#backButton {…} 差 .menu-left#newMenuIcon {…} 好 #backButton {…} 好 #newMenuIcon {…} 例外:When it’s desirable to change the class of an ele…

高效CSS开发核心要点摘录

做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能. 下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用的,这里记录一下,提醒自己以后写CSS的时候尽量从这些方面出发来使用,对于CSS的性能提升有很大的帮助,对于你自己写出来的代码也更加的靠谱了. 本文摘录之“高效CSS开发核心”,一些我认为是已经不需要用规则来约束的就不再啰嗦了,感兴趣的读者可以去看全文. 1.把CSS文件放在<head>中,避免使…

css整理之-----------选择器

背景在20年初时总感觉自己的css 不够用,想把css 相关的东西整理下,去年一整年都比较忙,忙着就到2021了,今天趁着有点时间,先从选择器开始吧. 听说图片可以提升颜值.... 选择器 CSS选择器用于选择你想要的元素的样式.简单划分为简单选择器.组合选择器.伪类选择器. 简单选择器通配符标签选择器类选择器 id选择器属性选择器属性选择器还有如下语法: 选择器描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值…

css整理之-----------技巧、黑魔法

css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. 1.css 问题解决思路在遇到css问题时,我一般从以下思路来思考从元素本身的属性出发,组合各种可能: 尝试如果把相关属性设置为负数是否可以解决,如边框重叠问题: 如果第一步没有成功,那么在元素之外(或者之内)套一层元素,再次尝试: 一般问题都能在第二步解决,如果还是没有,那就要求助场外观众了…

css整理－06 表和列表

表格式化表布局 table, display:table caption, display: table-caption thead, display: table-header-group tbody, display: table-row-group tr, display: table-row td,td, display:table-cell tfoot, display:table-footer-group col, display:table-column 以行为主 css将其表模…

css整理－01选择器和继承

元素元素形式: 替换,非替换元素类型: 块级,行内列表是特殊的块级元素,它会生成一个标记符样式表候选样式表: rel='alternative' @import导入样式表,必须在style的开头:结构可以为 <style type='text/css'> @import url(a.css) print; <style/> 注释: /**/ 选择器关键字一般用空格分开,一种特殊情况就是,设置字体大小和行高 font: large/150% sans-serif; 属性选…

前端必会css整理

1.设置css样式的三种方式? 外部样式表,引入一个外部css文件内部样式表,将css代码放在<head>标签内部内联样式,将css样式直接定义在html元素内部 2.css有哪些选择器? id选择器类选择器标签选择器又可以细分为: 派生选择器(包括后代选择器.子元素选择器.相邻兄弟选择器) 伪元素选择器属性选择器 …

高效CSS書寫規範及CSS兼容性

一.選擇器針對性說明某一元素的多个规则集中,选择器的针对性越高,该规则集的权重也就越高.针对性相同的,后出现的规则集的权重更高. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /*…

自动化高效css开发，畅谈less的灵活变化

css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢的心情来写css,于是,有一些聪明的程序员就发明了less. less是为了简化css开发,灵活css开发而出现的,其功能非常强大,灵活性也很高,上手也很快,所以越来越受到前端开发的青睐,其中的基本语法我就不讲了,相信度娘上有无数的教程可以参阅,我就来讲点利用less灵活的特点做的一些东西. 1 l…

精简高效CSS系列之二——浮动float

一.浮动基础知识假如一个页面上有3个div块,如下排列: 图1:不使用浮动图2:向右浮动图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动图3说明了框1向左浮动,脱离文档流向左移动,直到它的左边缘碰到框2的左边缘为止,由于框1脱离了文档流,不占据空间,框2处于文本流中,所以框1覆盖了框2. 上面3个图说明了,浮动既可以向左也可以向右,直到它的外边缘碰到包含框或者另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块…

一些常用的html css整理--文本长度截取

div+css设置列表div超出部分显示...(单行文本) width:200px; //指定宽度: overflow:hidden; //将超出内容隐藏 text-overflow:ellipsis; //文本溢出时显示省略标记. white-space:nowrap; //强制内容不换行.强制在同一行内显示所有文本,直到文本结束或者遭遇 br 元素现在的浏览器都支持text-overflow:ellipsis属性,用来实现单行文本的溢出显示省略号,但是这个属性并不支持多行文本. 多行文本处…

前端HTML 与css 整理（未完）

HTML 中的标签存放于文本文件中需要按照以下固定的文档结构组织:<!DOCTYPE HTML><html> <head>头部相关信息 </head> <body> 页面主体相关内容 </body></html> 标签解释:#1.<!DOCTYPE HTML>是文档声明,必须写在HTML文档的第一行,位于<html>标签之前,表明该文档是HTML5文档. #2.<html></h…

HTML CSS整理笔记

——修改placeholder提示的样式: 1.除IE外通用写法类名或标签名::placeholder {color: red;}2.加兼容前缀写法 css超出一行显示省略号:给定宽度(width:100px).超出隐藏(overflow:hidden).强制在同一行显示(white-space: nowrap).省略号(text-overflow:ellipsis) ——常见字体单位——1.em移动端常用的字体尺寸单位,相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div…

css整理之-----------布局相关

文档流文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式布局,文档流可以分为定位流.浮动流.普通流三种普通流(Normal flow) 在常规流中,盒一个接着一个排列,也就是常说的默认的文档流在块级格式化上下文里面, 它们竖着排列在行内格式化上下文里面, 它们横着排列当position为static或relative,并且float为none时会触发常规流对于静态定位(static positioning),position: static,盒的位置是常规…

css整理之-----------基本知识

盒子模型所有HTML元素可以看作盒子,它包括:边距,边框,填充,和实际内容. CSS中组成一个块级盒子需要: Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height. Padding box: 包围在内容区域外部的空白区域: 大小通过 padding 相关属性设置. Border box: 边框盒包裹内容和内边距.大小通过 border 相关属性设置. Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域.大小通过 margin 相…

css整理－05 边框,背景和浮动，定位

边框样式:border-style hidden, dotted, dashed, solid , double, groove, ridge, inset, outset 最不可预测的是double,这都是由用户代理决定的可以每边设置不同样式宽度颜色简写当三个一起简写的时候,没有顺序背景背景图片:background-image 背景默认是不继承的:但可以使用background-image: inherit;来继承重复: background-repeat repeat-x…

css整理－04 基本视觉格式化

基本框假定每一个元素都会生成一个火多个矩形框,为元素框元素框中心有一个内容区,周围有内边距,边距和外边距内容的背景会应用到内边距,外边距是透明的,可以看到父元素的背景内边距不能是负值,外边距可以包含块每个元素相对于其包含块摆放,包含块就是一个元素的布局上下文包含块是由最近的块级祖先框,表单元格火行内祖先框的内容边界构成行内元素的摆放方式不直接依赖于包含块水平格式化使用auto 如果设置width,margin-left,margin-right中两个值为特定值,其余一个为au…

css整理－03 文本

缩进和水平对齐缩进文本:text-indent 可以设置为负值可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素: 水平对齐: text-align left,center,right,justify 只应用到块级元素垂直对齐行高: line-height 指的是文本行基线之间的距离,而不是字体的大小:它确定了将各个元素框的高度增加或减少多少 line-height值和字体大小只差就是行间距文本行文本行中的每一个元素都会生成一个内容区,这由字体的大小确定: 这个内容区会…

css整理－02 颜色和字体

颜色命名颜色 RGB指定颜色数值: 0-255 百分比三元组:红绿蓝 16进制RGB web安全颜色在256色计算机系统上总能避免抖动的颜色表示为rgb值20%和51的倍数 web安全色的简写16进制是0,3,6,9,C,F 长度单位绝对长度单位 in, cm, mm, pt, pc 实际中几乎不使用相对长度单位印刷度量单位:em, ex,像素:px 度量的实际距离可能因为屏幕分辨率,可视区的宽度,用户选择等原因而改变 1个em定义为一种给定字体的font-size值; (实际上…

css整理 background-size优化

font-size:12px; line-height:22px; font-family:Arial,Helvetica,sans-serif; /*优化*/ font:12px/22px Arial,Helvetica,sans-serif; background-color:#eee; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; backgro…

MySQL语句高效写法整理

优先使用INNER JOIN 多表关联查询,扫描的行尽量少关联的时候下条件减少扫描的行数 SELECT ... FROM ad_ad_summary_for_pos_eq sum4eq INNER JOIN (SELECT id, NAME FROM wlw_area WHERE grade = 2) area ON area.id = position.city_id 避免使用SELECT * 你从你的表里返回每个列,甚至后期加的列.被传递到了…

整理及优化CSS代码的7个原则

作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不再考虑这条30KB的理想准则.随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化,使得这种现象越来越普遍,尤其是对于大型网站来说,仅仅一个CSS文件就已经超过了30KB的上限. 但是即便如此,现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和…

精简高效的css命名准则

对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如果名字越普通就越没有含义,越容易被重用,所以css想要重用性高,就需要命名简单.但是,简单的命名越容易造成冲突面向属性的命名方法我们习惯在css命名的时候掺杂语义,这样可以让代码更易懂.例如淘宝中免费注册:help-guest-regist .l{float:left} .r{float:rig…

[css] 【转载】精简高效的CSS命名准则/方法

原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/ 一.“无”的哲学佛家讲究“因果报应”,有果必有应.此段看似与主题没有血缘关系,实际讲的是“因”. 我个人比较喜欢老子的道家思想,并喜欢以其思想解释学习与工作中遇到的一些问题.例如我之前写过的“…

【干货分享】前端面试知识点锦集02（CSS篇）——附答案

二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型.…

【经验之谈】前端面试知识点总结（CSS相关）——附答案

目录二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以使用的方法? 5.常见浏览器兼容性问题与解决方案? 6.列出display的值并说明他们的作用? 7.如何居中div, 如何居中一个浮动元素? 8.CSS中 link 和@import 的区别是? 9.请列举几种清除浮动的方法(至少两种)? 10.block,inline和inlinke-block…

Htmlt_Div+Css简介

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位. CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML等文件式样的计算机语言. DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始标签和结束标签之间的所有…