CSS教程

继承性 层叠性 优先级 优先级权重 !important

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例：<h1 "color:red;">st

解决子级对象使用css float浮动 而父级div不能自适应高度，不能被父级内容撑开解决方法，父级div没有高度解决方法。 当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个

content 和 attr 配合使用 如果你不想把content内容在CSS里写死，那你可以使用attr表达式来从页面元素中动态的获取内容： attr属性通常和自定义属

CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects&#1

又开始公司的新项目了。。。又到了无聊的切图时间，没办法，拿人钱财替人消灾啊 ！ 那当我们拿到公司新项目的时候我们需要做些什么呢？ 下面就来分享一下我的工作步骤吧（仅使用于初学者，大神勿见怪 ，有不好的

刚入了这个博客园，发现竟然这么高的自由度，页面风格可以自己搞，那还不嗨起来？ 于是赶紧搞了一波，有没有被头部的昵称炫到。。。当然也是网上找的一个，拿来看一下效果 废话不多说。上代码 就是它了，各位看官

网站开发 ，经常需要用到登录注册，签到抽奖等模块，虽然每次都要写，但是把这个记录下来会很方便下次再用。。。 这边刚写了一个签到抽奖，放到这边来分享记录一下。 首先根据设计图 需要这样的样式与效果 这样

transitions(过渡) 被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终想要的值。 主要包括四个属性： 执行变换的属性：transition-property 变换延续的时间：

分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用 语法：-moz-linear-gradient( [<poin

语法： R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百分数 A：透明度。取值0~1之间 取值： <length>:Hue(色调)。0(或360)表

属性选择器： 1.完全匹配的属性选择器。 就是完全匹配的字符串。 [id=article]{ color:red; } 2.包含匹配选择器。包含有指定的字符串。 语法是：[attribute*=val

1.属性选择器 完全匹配的属性选择器 [id=article]{} 示例： <style> input[type=text]{ border: 2px solid red;} </s

css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML，还可以作用于SVG 兼容性： IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51

响应式设计是在不同设备下分辨率不同显示的样式就不同。 media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。 语法： @media mediatype and | n

1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。 语法：box-flex:value; 示例： <style&g

1.box-shadow 属性向框添加一个或者多个阴影。 语法： box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须，水

1.transition 语法：transition: property duration timing-function delay; transition-property 设置过渡效果的css

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。 语法：transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现。 p

grid 布局的使用 css 网格布局，是一种二维布局系统。 浏览器支持情况:老旧浏览器不支持， 概念： 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。 <div cla

使用第三方平台转换字体文件为font-face所支持的格式。 TureTpe(.ttf)格式 支持浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS

flex 即为弹性布局。 任何一个容器都可以指定为flex布局。 .box{display:flex} 行内元素可以使用flex布局 .box{display: inline-flex} webkit

compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块，用来补充和丰富sass的工能， 安装： compass是用 ruby语言开发的，所以安装它之前必须安装

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： 1 <div> 2 <p>第一个子元素</p>