CSS3常用知识点

CSS3常用知识点

1 css3选择器

1.1 属性选择器
        /*  E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
        .attr2 a[class~="kawa"] {
            //TODO
        }
        /*  E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
        .attr3 a[class|="kawa"] {
            //TODO
        }
        /*  E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
        .attr4 a[class*="kawa"] {
            //TODO
        }
        /*  E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
        .attr5 a[class^="kawa"] {
            //TODO
        }
        /*  E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
        .attr6 a[class$="kawa"] {
            //TODO
        }
1.2 伪类选择器
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */
1.3 伪元素选择器
:first-letter   /*向文本的第一个字母添加特殊样式。*/
:first-line     /*向文本的首行添加特殊样式。*/
:before         /*在元素之前添加内容。*/
:after          /*在元素之后添加内容。*/
1.4 结构性伪类选择器
:root /*样式绑定到页面艮元素中*/
:not  /*对某个结构元素使用样式,但想排除其子元素的样式*/
:empty/*当元素为空时使用的样式*/
:target/*对页面中某个target元素指定样式,该样式只在用户点击了页面的超链接起作用*/

2 CSS3布局

2.1 css3多栏布局
2.1.1  column-count 分多少栏展示
column-count: 3;-webkit-column-count: 3;-moz-column-count: 3;/*分成3栏展示*/
2.1.2 column-width 每一栏以宽度多少来展示
 column-width: 200px;-webkit-column-width: 200px;-moz-column-width: 200px;/*分栏展示每一栏宽度200px*/
2.1.3 column-gap 指定栏目与栏目之间的距离
 column-column-gap: 10px;-webkit-column-gap: 10px;-moz-column-gap: 10px
2.1.4 column-rule栏目与栏目之间增加一条分隔线
 column-column-rule: 1px solid #cccccc;;-webkit-column-rule: 1px solid #cccccc;;-moz-column-rule: 1px solid #cccccc;
?
2.2 css3盒布局
display: -moz-box; display: -webkit-box; /*比css里面用浮动定位布局更简洁*/
2.3 css3弹性盒布局
2.3.1 自适应弹性盒布局
-webkit-box-flex:1;-moz-box-flex:1;/*兄弟元素中值越大,占百分比越大*/
2.3.2 改变元素显示的顺序
-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;/*值越大越靠近左边或者上边*/
2.3.3 改变元素的排列方向
-webkit-box-orient:vertical;-moz-box-orient:vertical;/*水平从左向右排列*/
-webkit-box-orient:horizontal;-moz-box-orient:horizontal;/*垂直从上向下排列*/
2.3.4 指定内容的对齐方式
/*水平方向的对其方式*/
-webkit-box-align:start;-moz-box-align:start;/*内容左对齐*/
-webkit-box-align:center;-moz-box-align:center;/*内容中对齐*/
-webkit-box-align:end;-moz-box-align:end;/*内容右对齐*/
/*垂直方向的对齐方式*/
-webkit-box-pack:start;-moz-box-pack:start;/*内容上对齐*/
-webkit-box-pack:center;-moz-box-pack:center;/*内容中对齐*/
-webkit-box-pack:end;-moz-box-pack:end;/*内容下对齐*/
2.4 Media Queries
根据不同浏览器窗口大小加载不同的css样式
        @media screen and (min-width: 1000px) {
          //TODO
        }
        @media screen and (min-width: 640px) and (max-width: 999px) {
           //TODO
        }
        @media screen  and (max-width: 639px) {
           //TODO
        }
时间: 06-26

CSS3常用知识点的相关文章

CSS3常用形状

CSS3常用形状实现代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{width:100px; height:100px; background:#f00; margin:50px; text-align:center; line-height

css3常用工具

渐变生成器:http://colorzilla.com/gradient-editor/ 背景图案:http://lea.verou.me/css3patterns/ html5和css3浏览器支持情况:http://caniuse.com/ IE Tester:http://www.my-debugbar.com/wiki/IETester/HomePage Modernizr(让老版本浏览器支持html5标签,支持按需加载):http://www.modernizr.com Response

css的常用知识点

一.css的引入方式 1.行内引入 直接在标签中定义样式 <p style="background-color: red">test</p> 2.嵌入式引入 将css代码通过<style></style>标签,直接写在文件中 <head>     <meta charset="UTF-8">     <title>Title</title>     <style&g

CSS3常用选择器(一)

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在css3中,追加了三个属性选择器,分别为[attribute*=value],[attribute^=value],[attribute$=value],使选择器有了通配符的概念.这三个选择器分别是包含,首字符,结束字符. 举个栗子: a[src*="abc"]表示选择其 src 属性中包含

CSS3主要知识点复习总结+HTML5新增标签

1.显示属性,自身属性,文本属性 推荐样式编写顺序 1 显示属性 :display,list-style,position,float,clear [注意按照横着的顺序] 2 自身属性(合模型):width,height,margin,padding,border,background(第3点)     3 背景:background     4 行高:line-height     5 文本属性:color,font,text-decoration,text-align,vertical-al

CSS3常用选择器总结

CSS3选择器 中午吃饭时与同事简单聊了下H5和C3为我们提供的便利,晚上下班后简单整理了下CSS3的选择器,在这里跟大家分享下. CSS3新增了许多灵活查找元素的方法,极大的提高了我们查找元素的效率和精准度.CSS3选择器与jQuery中所提供的绝大部分选择器兼容. 1.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式(E是element的首字母,下面都是简写代替,程序员总是那么懒,哈哈哈): 1.E[attr] 表示存在attr属性即可: /*存在*/ [class]{/*选中的是

CSS3 常用属性(三)-- 用户界面、文字、两种盒模型

用户界面--column 关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染--然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示. 用户界面使用的示例如下: .font{ width:300px; height:300px; border:1px solid #000; margin:0px auto; column-count:3; /* 定义数量

dWebBrowser常用知识点

1.webbrowser调用的就是本机IE,并且webbrowser默认就是运行在IE7 mode下,除非你改变它. 2.不装IE,无法用webbrowser. 3.设置WebBrowser在IE9 mode下工作呢 There are two different sets of keys for 32 bit and 64 bit applications. 32 bit: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN

UIButton的一些常用知识点

关于UIButton的一些常用资料: //创建按钮 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; /* UIButtonType 按钮类型:(前两种是常用类型) UIButtonTypeCustom = 0, // no button type//自定义类型 UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0), // standard system button//系统类型