css样式

后代选择器 /* 以下两种写法叫做子代选择器，第一个元素不管是标签名还是类名，都作为其代表标签，也是该选择器的最高级别（父类），然后向下搜寻，搜寻到底 */ ​ /* 会使所有 ul 里的li标签改变样式 ul li{ color: brown; } */ ​ /* 这种写法就会让类名为 need 的ul 里的li 元素改变样式 .need li{ color: brown; }*/ <ul class="need"> <a href="#"> 22222222</a> <li><a href="#"> 11111111</a></li> </ul> 子元素选择器 /* 以下方式为子元素选择器，这种方式只会将父元素的儿子辈的元素改变样式，而儿子辈内部的元素则不会被修改样式 */ /* ul>a{ color: green; } */ <ul class="need"> <a href="#"> 22222222</a> <li><a href="#"> 11111111</a></li> </ul> 并集选择器 /* 以下为并集选择器 该选择器，用逗号分隔各个需要渲染的元素，同时还能够跟其他选择器同时使用 */ /* ol,p,ul li>a{ color: pink; } */ <ul class="need"> <a href="#"> 22222222</a> <li><a

由 OpenDigg 出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 react-fix-it 根据error自动生成测试 siema 轻量级轮播框插件 css-loader CSS加载器 rexxar-android 针对移动端的混合开发框架 react-decoration React组件装饰集合 pxq 基于 react + redux + immutable + ES6 的单页面项目 docute 无需生成过程直接编写文档 styles-debugger CSS-in-JS应用的调试样式可见辅助器 css-pokemon 低聚合的动画Pokemon angular2-idle-preload 使用请求IdleCallback用于预加载异步/lazy路线 wecqupt 在微信内被便捷地获取和传播 RNPolymerPo 基于React Native 的生活类聚合实战项目 css-constructor React组件的CSS构造函数 wx-charts 微信小程序图表工具 wemark 微信小程序Markdown渲染库 ios7-vue 使用vue2.0 vue-router vuex模拟ios7 vue-quill-editor 基于Quill

HTML + CSS 就是当代网页的基石 。全世界的网站，无论其服务器端的语言是什么，前端都使用了 HTML + CSS。 随着互联网行业的快速发展，前端这一职位也越来越火热，前端工程师的高薪资，也让越来越多的人想要进入这个行业。 那么，零基础小白如何才能成为一名前端工程师呢？ 首先大家要了解的是，Web 前端工程师都需要掌握什么？首先，一定要精通 HTML、CSS、JavaScript，只懂其中的一种或者是两种肯定是不行的，必须要三个全部掌握。 HTML ：HTML 是一种标记语言，类似于 markdown，可以理解为通过特定的语法，对文档的格式进行调整和统一。 CSS (Cascading Style Sheets): 如果说 HTML 是网页的骨架，那 CSS 就是网页的美容师，用来给 HTML 添加样式（如字体、颜色、大小等），还可以配合各种脚本语言对网站元素进行格式化。 JavaScript ：简称 JS，是前端必须掌握的编程语言，主要用于开发网页的脚本，但目前看起来要无所不能了…… HTML HTML + CSS HTML + CSS + JavaScript 需要注意的是，一定要将学习和练习同时进行，只有通过自己亲手的练习，才可以让自己理解吸收掉这些知识。 因此，我给大家推荐两门前端新课——「 HTML5 简明教程 」、「 CSS3 简明教程 」

3 月，跳不动了？>>> CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理>;<). 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

首先，要说的是我们领导总挂在嘴边的一句话：一入前端深似海。之前没有接触过前端，一直不懂这句话的含义，直到最近写作业改需求的时候才发现，因为web页面是直接面向客户的，所以需求的修改都和前端有关，有时候甚至不需要修改后台的代码就可以满足新的需求。突然对前端工程师的未来表示担忧，于我来说，这些繁琐的细节性工作我希望始终与其保持安全距离，嘻嘻！ 　　不喜归不喜，然而python是一门自动化语言，分工不像java开发那样明确，所以也需要掌握前端的知识，关于前端的知识网上比比皆是，在这里就不多做赘述，今天想说的还是我在学习过程中的一些困扰，面对那些繁琐的js文件，css文件和html文件，你是不是也和我一样蒙圈。。。不知道该往哪里放，不知道目录结构怎么安排？现在就来分享一下我从前端同事那里偷师来的目录结构和引用方式吧~~~ 初识那些乱七八糟的文件 　　要写好一个web页面，必不可少的是html文件，css文件，和js文件。可是这些东西到底是什么呢？举个栗子：html就是一个赤裸裸的人，css则是人的衣服，而js就是一个人的行为，它支配页面上的所有动作。我们写html，用各种标签、容器来承装不同的文字、图片，总之html做的就是把我们要表达的一股脑的写在页面上。但是它们在什么位置、什么颜色，好看不好看，就不是html的工作了，这个装饰页面的工作就交给了css。有了css和html

3 月，跳不动了？>>> 简介 ---- CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。 原理 ---- 本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 LESS 可以直接在客户端使用

3 月，跳不动了？>>> CSS 外边距 CSS 边框 CSS 外边距合并 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。 CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性 。 margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。 margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白： h1 {margin : 0.25in;} 下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)： h1 {margin : 10px 0px 15px 5px;} 与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的： margin: top right bottom left 另外，还可以为 margin 设置一个百分比数值： p {margin : 10%;} 百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。 margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是

　　最近有点忙，所以没有发表博文，现在时间空闲下来了，好好的整理一下知识，今天总结一下css里面的一些选择器。 　　css里的选择器有好多种，下面我就把我了解到的写一写，如果有不全的或者有误的欢迎留言指正，万分感谢。 　　一、选择器 　　1、* 通配符选择器 　　　这个选择器是匹配页面中所有的元素，一般用来清除浏览器的默认样式. *{margin:0; padding:0} 　　2、元素选择器 　　　　通过标签名来选择元素。 div{width:100px; height:100px;} 　　3、class选择器 　　　　　class选择器 / 类选择器 / 用class属性给元素命名，在页面中可以出现很多次，相当于人的名字。 .box{width:100px; height:100px;} <div class="box"></div> <p class="box"></p> 　　4、 id选择器 　　　　以id属性来命名，在页面中只能出现一次，具有唯一性，并且权重值最高，相当于一个人的身份证。 #box{width:100px; height:100px;} <div id="box"></div> 　二、高级选择器 一　 　　1、 E F 后代选择器 　　　　匹配到E元素下面的所有的F元素（包括子、孙），空格隔开。 div ul li {width:100px; height

由上所述，我们可以得出以下结论: css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行、 因此，为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法: 使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间) 对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩) 合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号) 减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存) 具体戳这里 来源： https://www.cnblogs.com/lulin1/p/9254467.html

继从零开始学Bootstrap(1)后，我们需要实际做一些页面，边学边做。 因为前端是一项非常注意实践的技术，知识点太多、太琐碎了，所以我们只能边学边做。 根据我们想要做的效果，去查相应的资料。不要想着把所有的东西都学会后再做网页实践。 过程中会频繁查阅资料的网站 ： http://www.w3school.com.cn/ 这是W3C联盟为了传播W3C标准而建立的网站，有很多关于Web端的技术，你可以将其看作为一部Web技术的百科全书。 http://v3.bootcss.com/ 不用多说，BootStrap3官方文档 http://www.runoob.com/ 这个其实跟W3school差不多，但是比W3school要全要杂一点，好多内容都是从原版W3C英文网站和原版BootStrap官方英文文档翻译过来，但是我感觉他的翻译质量要更高（因为前两个网站说白了也是翻译过来的），有些Case更加好懂。 闲话不多说，让我们开始： （1） 明确实现目标 如下图所示，这就是咱们要实现的一个简单网站。布局简单，也没有很炫的效果。但是要实现一个功能：从Json文件（关于Json的知识可以到上述网站去查）里读取相关信息，显示在网站上。 Json文件内容 ： { "Class 001": { "Xiao Wang": { "Gender": "Male", "Age": "18",