css总结

1,选择器

a:元素选择器

文档的元素就是最基本的选择器

b:类选择器

可以单独使用,也可以与其他元素结合使用

*.important {color:red;}

.important {color:red;}

p.important {color:red;}

多类选择器:class同时包含的类

.important.warning {background:silver;}

c:ID选择器

与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次

d:属性选择器

E[att]                            选择具有att属性的E元素。

E[att=”val”]              选择具有att属性且属性值等于val的E元素。

E[att~=”val”]            选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

E[att^=”val”] CSS3   选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$=”val”] CSS3   选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*=”val”] CSS3    选择具有att属性且属性值为包含val的字符串的E元素。

E[att|=”val”]              选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素,如果属性值仅为val,也将被选择。

e:分组

选择器分组使用逗号,

通配符选择器*

声明的分组使用分号;

f:后代选择器

选择作为某元素后代的元素,用空格

g:子元素选择器

只能选择作为某元素子元素的元素,用>

h:相邻兄弟选择器

可选择紧接在另一元素后的元素,且二者有相同父元素,用+

i:伪类

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

j:伪对象选择符 Pseudo-Element Selectors

E:first-letter/E::first-letter       设置对象内的第一个字符的样式。

E:first-line/E::first-line             设置对象内的第一行的样式。

E:before/E::before                  设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E:after/E::after                         设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E::placeholder                         设置对象文字占位符的样式。

E::selection                             设置对象被选择时的颜色。

2,样式

a:背景属性

background:简写属性,作用是将背景属性设置在一个声明中。

background-attachment:背景图像是否固定或者随着页面的其余部分滚动。

background-color:设置元素的背景颜色。

background-image:把图像设置为背景。

background-position:设置背景图像的起始位置。

background-repeat:设置背景图像是否及如何重复。

css3

background-clip:规定背景的绘制区域。

background-origin:规定背景图片的定位区域。

background-size:规定背景图片的尺寸。

b:文本属性

color 设置文本颜色

direction 设置文本方向。

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent 缩进元素中文本的首行。

text-transform 控制元素中的字母。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

css3

text-overflow 规定当文本溢出包含元素时发生的事情。

text-shadow 向文本添加阴影。

word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

c:字体属性

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family 设置字体系列。

font-size 设置字体的尺寸。

font-style 设置字体风格。

font-variant 以小型大写字体或者正常字体显示文本。

font-weight 设置字体的粗细。

CSS3 @font-face 规则 web 设计师可以使用他们喜欢的任意字体

d:其他

文本装饰 Text Decoration

列表 List

表格 Table

内容 Content

多列 Multi-column

3,框模型

a:框模型概述

框模型概述

b:边框

border 简写属性,用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。

css3

border-image 设置边框图片的简写属性。

border-radius 设置圆角边框的简写属性。

box-shadow 向方框添加一个或多个阴影。

c:外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

4:定位 (Positioning)

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

一切皆为框

相对定位、绝对定位和浮动

定位属性

bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。

clear 规定元素的哪一侧不允许其他浮动元素。

clip 剪裁绝对定位元素。

cursor 规定要显示的光标的类型(形状)。

display 规定元素应该生成的框的类型。

float 规定框是否应该浮动。

left 设置定位元素左外边距边界与其包含块左边界之间的偏移。

overflow 规定当内容溢出元素框时发生的事情。

position 规定元素的定位类型。

right 设置定位元素右外边距边界与其包含块右边界之间的偏移。

top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。

vertical-align 设置元素的垂直对齐方式。

visibility 规定元素是否可见。

z-index 设置元素的堆叠顺序。

5,高级

a:尺寸

尺寸单位

常用的:

%

px:像素 (计算机屏幕上的一个点)

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

em:基于父级元素的字体大小

rem文章web app变革之remhttp://isux.tencent.com/web-app-rem.html

尺寸属性

height 设置元素高度。

max-height 设置元素的最大高度。

max-width 设置元素的最大宽度。

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

width 设置元素的宽度。

b:媒介类型

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

媒体查询 Media Queries

例如利用@media screen实现网页布局的自适应

c: 颜色

css3 opacity 设置元素的不透明级别

d:浏览器私有属性

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

-o-表示opera

例如-webkit-box

e:可伸缩框属性(Flexible Box)

flex 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

flex-grow 设置或检索弹性盒的扩展比率。

flex-shrink 设置或检索弹性盒的收缩比率

flex-basis 设置或检索弹性盒伸缩基准值。

flex-flow 复合属性。设置或检索伸缩盒对象的子元素排列方式。

flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。

flex-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。

align-content 设置或检索弹性盒堆叠伸缩行的对齐方式。

align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

align-self 设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。

justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

order 设置或检索伸缩盒对象的子元素出現的順序。

f:其他

动画(Animation)

2D/3D转换(Transform)

过渡(Transition)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 标签(空格分隔): 面试准备 [TOC] 3.1、谈谈你对CSS布局的理解 3.2、请列举几种可以清除浮动的方法(...
    niices阅读 548评论 0 3
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 1、样式种类:浏览器默认样式、带有样式的标签、内联样式、style标签、link引入样式文件。2、选择器(http...
    Mystic_1阅读 593评论 0 4
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 916评论 0 2
  • 图片引入标签: 超链接标签: 百度 base标签: base标签可以给页面的链接加上默认的路径,或者默认的打开方式...
    钱钱_e3a6阅读 371评论 0 0