css入门汇总

CSS引入的方式：

方式一：行内样式

<p style=”color:red;”></p>

方式二：内嵌套

<style type=”text/css”>

P{

Color:red;

}

</style>

<p>内嵌套</p>

方式三：链接式(把CSS抽到一个单独的文件中，这样可以给很多网页使用)

<link type=”text/css” href=”red.css” rel=”stylesheet” />

方式四：导入样式

<style type=”text/css”>

@import url(red.css)

</style>

一般情况下不适用导入样式：这是直接把这个CSS文件加载都这个地方，所以说效率不高，链接式是用什么元素有用什么样式再去CSS中请求加载。

CSS中的优先级：

行内样式 >链接式>内嵌式>导入式(链接式在后面)

行内样式 >内嵌式>导入式>链接式(链接式在前面)

总的规律：

想读更多 ->

CSS属性-派生选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

请注意标记为 <strong> 的蓝色代码的上下文关系：

想读更多 ->

12款很赞的web前端移动开发框架

原生移动应用程序运行更快、更顺畅，有更好的用户体验。而同时，前端开发人员总是寻找新的 Web 技术来获得这种性能。利用现有的高质量移动框架来构建移动 Web 应用程序已成为非常容易，但是如何选择合适的框架是比较纠结的。因此在本文中，我们整理了12个很赞的移动框架。

1.Redbeard

Redbeard让它来创建本地应用程序没有一个样板更快和更容易。它与吨的组成部分的一个完整的框架，有一系列的准备使用的组件的一些最常用的功能。每一个组件是完全主题化的通过我们的可怕的主题引擎，不需要包装或包装的应用程序框架。Redbeard 100%原生开发框架，整个iOS套件Objective-C和Swift。

2.Weex

Weex是一款跨平台UI框架。它重量轻，高性能和可扩展性。Weex是从阿里巴巴与HTML构建移动应用程序，CSS和Java，它的模块、UI组件，它自己的工具和命令，设计了对移动环境和加快发展。

想读更多 ->

用css制作吃豆人加载动画

今天试着用css3的animation动画制作吃豆人加载动画，效果如下：

思路：

制作两个有缺口的元素，使其重叠，然后添加方向相反的旋转动画，形成嘴张开-闭合的效果。

添加三个圆形元素，依次循环向吃豆人移动，形成被吃掉的效果。

步骤：

1.添加基本html,其中.mouth1、.mouth2用于制作吃豆人的嘴，.beans1、.beans2、.beans3用于制作豆子。

<div class="outerDiv">

<div class="mouth1"></div>

<div class="mouth2"></div>

<div class="beans1"></div>

<div class="beans2"></div>

<div class="beans3"><

想读更多 ->

「架构技术专题」什么是架构设计的五个核心要素？如何设计？(4)

前面，前文我们讲解了架构的十大演变过程，和对应的9种高性能高可用高并发的技术架构，接下来我们来讲讲好的架构中五个重要的核心指标，分别是性能、可用性、伸缩性、扩展性和安全性这5个架构指标。老规矩，需要架构师视频的仍然关注后私信“架构师”即可。

性能就是核心要素之一，不然我为什么架构设计？随随便便一个lowlow的系统上线就好了。所以性能优化是很多小公司卖不去过的坎。这么说吧，当然优化网站性能的手段也非常多：

浏览器访问优化（浏览器缓存、页面压缩传输、合理布局页面、减少Cookie传输）

减少http请求。避免建立太多通讯链路。将js、css、图片文件尽可能合并。避免太多请求。同时，对于系统的后端请求也尽可能进行合理的设计，来避免出现太多交互。

使用浏览器的缓存。http头设置Cache-Control和Expires.js文件名比如可以带时间戳。一旦有更新则更新时间戳，否则缓存；同时尽量避免同一时间更新大量

想读更多 ->

CSS笔记 定位position

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

在CSS中一共有N种定位方式，其中，static ,relative,absolute三种方式是最基本最常用的三种定位方式。position取值:

static 默认定位方式

relative 相对定位。相对于原来的位置，但是原来的位置仍然保留。理解为棋盘上棋子的排列：

棋子从左往右排列，达到边缘时移到下一行。棋子排列方式是由display决定。样式属性display的值为block的元素自动放在下一行(默认)，而为inline的元素自动放在同一行，位于前一个元素后面。对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置

absolute 绝对定位。相对于最近的非标准流定位，原来的位置消失，被后边元素的位置所顶替。

这个属性是相对于参照物，能够指定元素的矩形局域相对于父元素区域的位置。

将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制

想读更多 ->

CSS属性-派生选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

请注意标记为 <strong> 的蓝色代码的上下文关系：

想读更多 ->

动画图解css中的float属性

前言代码：

有两个盒子，分别设置了float:left,float:right:以及这两种的组合，多说无益，直接上图。

float都为left

上面为float:left;下面为float:right;

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。

定

想读更多 ->