CSS基础

颜色:

1.color:<color> 设置对象的文本颜色。无默认值。
2.opacity:<number>默认值:1。设置对象的不透明0。

字体:

1.font:复合属性。设置文本属性。不能一次性设置全部的font属性,只能针对具体的属性进行设置。
2.font-style:normal|italic|oblique 默认值:normal。设置文本字体样式。
3.font-variant:normal|small-caps。默认:normal。设置文本是否为小型的大写字母。
4.font-weight:normal|bold|bolder|lighter|<integer> 默认值:normal。 设置文本字体的粗细。
5.font-size:<absolute-size> 默认值:medium(16 ) 设置对象中的字体尺寸。
6.font-family:'隶书'  默认值:由浏览器决定。设置字体风格。

表格:

1.table-layout:auto|fixed  设置表格的布局算法。默认值:auto。
2.border-collapse:separate|collapse 设置表格的行和单元格的边框是合并还是独立。默认值:separate(独立)。
3.border-spacing:<length>{1,2}  设置当表格边框独立时,行和单元格的边框在横向和纵向向上的间距。
4.caption-side:top|bottom|left|right 设置表格的caption对象是在表格的位置(表头位置)
5.empty-cells:hide|show 设置当表格的单元格无内容时,是否显示该单元格的边框。

列表:(ol有序列表;ul无序列表;li列表元素)

1.list-style:none(设置无序列表前的...); 复合属性。设置列表项的相关内容。
2.list-style-image:none|<url>  默认值:none 设置列表项标记的图像
3.list-style-position:outside|outside 设置列表项标记文本排列的位置。 默认值:outside。
4.list-style-type:disc|circle|... 设置列表项所使用的预设标志。 默认值:disc。

背景:

1.background: 复合属性。设置背景特性。可一次性设置大部分属性,也可针对部分属性进行设置。
2.background-color:<color> 默认值:transpoarent 设置背景颜色。
3.background-image:<bg-image> 默认值:none 使用绝对或相对地址或者创建渐变色(linear-gradient-线性渐变,radial-gradient-径向渐变)来确定图像。
4.background-repeat:repeat-x|repeat-y|no-repeat... 设置背景图片如何铺排填充。必须先指定<background-image>属性
5.background-attachment:fixed|scroll|local  设置背景图像是随对象内容滚动还是固定。必须先指定<background-image>属性。
6.background-position:left|right|top|bottom|center 默认值:0% 0%,效果等同于left top。必须先指定<background-image>属性。
7.background-origin:border-box|padding-box|centent-box 默认值:padding-box  设置背景图像计算<background-position>时的参考原点(位置)
8.background-clip:border-box|padding-box|content-box|text 默认值:border-box 指定对象的背景图片向外裁剪的区域。
9.background-size:atuo|cover|contain 默认值:auto  设置背景图像的尺寸大小(auto:背景图像的真实大小。cover:将图片完全等比列缩放到完全覆盖容器,背景图像有可能超出容器。contain:将背景图像等比列缩放到宽度或高度与容器的高度或宽度相等,背景图像始终被包含在容器里)。

文本:

1.text-align:start|end|right|left|center|justify ... 默认值:start 设置内容的水平对齐方式。
2.text-indent:<lenngth> 默认值:0  设置对象中的文本首行缩进(两个字是32px)。
3.vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<length>  默认值:baseline 设置内联元素在行框内的垂直对齐方式(效果不明显,,,基本没作用)。
4.line-height:normal|<length> 默认值:normal 设置对象的行高,即字体最低端与字体内部顶端之间的距离。
5.word-wrap:normal|break-word 默认值:normal 设置当内容超过指定容器的边界时是否断行(break-word 跳到下一行,针对英文。中文会自动换行,不需要设置。)。
6.word-break:normal|keep-all|break-all 默认值:normal 设置文本的字内换行行为(keep-all:是在当前行的长度不够放置这个单词时,就让整个单词都跳转到下一行。break-all:是把单词拆分,放满当前行,放置不下的拆分放置到下一行)。
7.word-spacing:normal|<length> 默认值:normal  检索单词之间的最小,最大和最佳间隙。
8.letter-spacing:normal|<length> 默认值:normal  设置字符之间的最小,最大和最佳间隙。
9.text-decoration:<text-decoration-line>|<text-decoration-style>|<text-decoration-color> 复合属性。设置对象中的文本的修饰。
10.text-decoration-line:none|underline|overline|line-through|blink  默认值:none 设置对象中的文本修饰线条的位置。
11.text-decoration-style:solid|double|dotted|wavy  设置对象中的文本修饰线条的形状。
12.text-decoration-color:<color> 设置对象中的文本修饰线条的颜色。
13.text-shadow:none|<shadow> 设置对象中文本的文字是否有阴影及模糊效果(上,左,下,右,偏移量,颜色)。

外边距(外补白):

1.margin:<length> auto 设置一个值就可以设置全方位的偏移量。
2.margin-top. margin-right. margin-left. margin-bottom.

内边距(内补白):

1.padding:<length> auto 设置一个值就可以设置全方位的偏移量。
2.padding-top. padding-right. padding-left. padding-bottom.

边框:

1.border:[border-width]|[border-style]|[border-color]  复合属性。设置对象边框的特性。
2.border-width:<length>  设置边框宽度。如果提供全部四个参数,将按上右下左(border-top,border-top-width 复合属性)的顺序作用于四边。如果只提供一个,将用于全部的四边。
3.boder-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset (border-top-style 复合属性)设置边框样式。
4.border-color:<color> 设置或检索对象的边框颜色。

css盒子模型

圆角边框:

1.border-radius:<length> 设置圆角边框。(上左top-left,上右top-right,下右bottom-right,下左bottom-left。如果只提供一个将作用于全部的四个角)
2.border-top-left-radius 

阴影:

1.box-shadow:none|<shadow> 设置对象中文本的文字是否有阴影及模糊效果(水平 垂直 模糊值 外延值 颜色。其中模糊值和颜色必须要有)。

定位:

1.position:static|relative|absolute|fixed 默认值:static
      a.static:无特殊定位,对象遵循正常交流文档。top,right,bottom,left等属性不会被应用。(即对top,right,bottom,left进行设置,也不会有任何作用,依然会根据元素默认排版情况进行放置)
      b.relative:对象遵循正常交流文档,但依据top,right,bottom,left等属性在正常文档流中偏移位置。(即放置情况会根据对top,right,bottom,left的设置,根据上一层对象进行排版)
      c.absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。(即放置情况会根据对top,right,bottom,left的设置,相对最近的,设置了position的上一层对象进行排版)
      d.fixed:对象头里正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。(相对窗口固定在某个位置)
      /*设置了absolute,脱离文档,不按规则顺序设置,自己相对设置了position的上级对象层设置,没有就根据最底层设置(即窗口);设置了relative,不脱离文档,都是根据上一层对象层进行设置。*/
      2.-index:auto| 默认值:auto 检索或设置对象的层叠顺序。必须定义position属性值为absolute,relative或fixed,此取值方可生效。
     3.定位关键字:top,right,bottom,left   设置的默认值为auto。设置与其最近一个定位的父对象相关部分的位置。

布局:

1.display:none|inline|block|...  用于设置布局的属性。
       a. inline:行内元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。span是一个标准的行内元素。a元素是最常用的行内元素,它可以被用作链接
      b. block:块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p,form和HTML5种的新元素:header,footer,section等等。
      c. none:通常用来在不删除元素的情况下隐藏或显示元素。它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间,但是visibility:hidden;还会保留(占位)。

浮动:

1.float:none|left|right 默认值:none 设置对象是否及如何浮动。(可实现表格布局的多列功能)
       a. left:设置元素从左向右依次排列
       b.right:设置元素从右向左依次排列
2.clear:none|left|right|both  默认值:none  设置是否允许浮动及浮动对象的边。(使用float属性设置多列功能后,在下一列开始之前使用clear属性清除一次浮动,否则上面的布局会影响到下面)
      a.none:允许两边都可以有浮动对象
      b.both:不允许有浮动对象
      c.left:不允许左边有浮动对象
      d.right:不允许右边有浮动对象

元素选择符:

1. *                 通配选择符   所有元素对象。
2.E                   类型选择符   以文档语言对象类型作为选择符。
3.E#myid         id选择符       以唯一标识符id属性等于myid的E对象作为选择符。
4.E.myclass     class选择符   以class属性包含myclass的E对象作为选择符。

伪类选择符:

1.E:link                               设置超链接a在未被访问前的样式。
2.E:visited                           设置超链接a在其链接地址已被访问过时的样式。
3.E:hover                             设置元素在其鼠标悬停时的样式。
4.E:active                             设置元素在被用户激活时的样式。
5.E:focus                              设置元素在成为输入焦点时的样式。
6.E:checked                          匹配用户界面上处于选中状态的元素E。
7.E:enabled                          匹配用户界面上处于可用状态的元素E。
8.E:disabled                         匹配用户界面上处于禁用状态的元素E。
9.E:empty                            匹配没有任何子元素(包括text节点)的元素E。
10.E:target                          匹配相关URL指向的E元素。
11.E:not(s)                          匹配不含有s选择符的元素E。
12.E:root                            匹配E元素在文档的根元素。
13.E:first-child                   匹配父元素的第一个子元素E。
14.E:last-child                    匹配父元素的最后一个子元素E。
15.E:only-child                   匹配父元素仅有的一个子元素E。
16.E:nth-child(n)                 匹配父元素的第n个子元素E。
17.E:nth-last-child(n)          匹配父元素的倒数第n个子元素E。
18.E:first-of-type                匹配同类型中的第一个同级兄弟元素E。
19.E:last-of-type                 匹配同类型中的最后一个同级兄弟元素E。
20.E:only-of-type                匹配同类型中的唯一的一个同级兄弟元素E。
21.E:nth-of-type(n               匹配同类型中的第n个同级兄弟元素E。
22.E:nth-last-of-type(n)       匹配同类型中的倒数第n个同级兄弟元素E

伪对象类选择符:

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

语法与规则:

1.!important         提升指定样式条目的应用优先权。
2./*comment*/    CSS中的注释 /* 这里是注释内容 */
3.@import            指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明
3.@charset           在外部样式表文件内使用。指定该样式表使用的字符编码
4.@media             指定样式表规则用于指定的媒体类型和条件。
5.@font-face        设置嵌入HTML文档的OpenType字体。
6.@keyframes      指定动画名称和动画效果。


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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1 92
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,072评论 0 40
  • 时间:2016年5月16号 前三天,HTML5的基础已经完结。网页中涉及的样式就跟我们今天学习的css有关。首先,...
    旭先生阅读 999评论 0 3
  • 一.CSS描述 CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要是用于定义HTM...
    snowy_sunny阅读 1,073评论 0 4
  • Lvyawen阅读 348评论 1 0