CSS

css属性语法

  • 1.css引入方式:
    (1)外部样式表
    (2)内部样式表
    (3)行内样式表

  • 2.css背景:
    (1)雪碧图,css精灵图
    (2)使用cssSprite可以减少网络请求,提高网易加载性能。

  • 3.浮动:
    (1)父元素清浮动,||加宽高。
    (2)子元素浮动

  • 4.css盒模型:
    (1)标准盒模型 content-box 宽 = 内容宽度
    (2)IE盒模型 border-box 宽 = content + padding + border

  • 5.BFC:
    (1)BFC的产生
    (2)BFC特性
    (3)BFC作用

  • 6.常见属性兼容:
    � inline-block: >=ie8
    � min-width/min-height: >=ie8
    � :before,:after: >=ie8
    � div:hover: >=ie7
    � inline-block: >=ie8
    � background-size: >=ie9
    � 圆角: >= ie9
    � 阴影: >= ie9
    � 动画/渐变: >= ie10

  • 7.盒子模型类型:
    (1)块级元素 ( 1排1,可改尺寸 )
    (2)行内元素 ( 1排多个,不可改尺寸 )
    (3)同时具备 ( 1排多个,可改尺寸 )

css 属性

  • 1.布局
      float
      postion
      top
      right
      bottom
      left
      overflow
      z-index
  • 2.盒模型
      width
      height
      margin
      padding
      border
  • 3.颜色、背景
     color
     background
                -color
                -image
                -repeat
                -position
                -attachment
                -size
                -clip
                -origin
  • 4.字体
      font
          -family
          -weight
          -size
          -style
          -variant
          -stretch
  • 5.文本
      text-indent
      text-align
      line-height
      vertical-align
      word-spacinng
      letter-sapcing
      text-transform
      text-decoration
      text-shadow
      white-space
      direction
  • global.css
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body, main {
    height: 100%;
}

body {
font:14px/1.5 Microsoft YaHei; 
}

a {
    text-decoration: none;
    color: #444;
}

ul,li {
       list-style: none;
}

main::after {
        content: '';
        display: block;
        clear: both;
}

块级元素与行内元素

这两者的差别如下:
� 块级元素: h1~h6、div、p、ul、li、ol、hr、dl、dt、dd、form
� 行内元素:span、strong、font、b、a、input、textarea、u、img、i、em、br、label

  • 特性区别:
  1. 块级可以包含块级和行内,行内只能包含文本和行内
  2. 块级占据一整行空间,行内占据自身宽度空间
  3. 块级可以设置宽高,行内不能
  4. 块级内外边距值上下左右都可以设置,行内只可以设置左右内外边距,上下无效

如果说只是简单上面的规定,那么也太小看css了,当然是可以改的啦——display
� display样式有三个常用的值:inline(行内),block(块级),inline-block(行内块级)
� 其它值有:table,table-cell,table-row,list-item,none,inherit

顺带说下单位,一般常用的三种:
� px:绝对单位,一个像素点;
� em:相对单位,相对于父元素的字体大小;
� rem:相对单位,相对于根元素(html)的字体大小

css样式中常见的属性

  • 一 CSS文字属性:
       color : #999999; /*文字颜色*/
       font-family : 宋体,sans-serif; /*文字字体*/
       font-size : 9pt; /*文字大小*/
       font-style:itelic; /*文字斜体*/
       font-variant:small-caps; /*小字体*/
       letter-spacing : 1pt; /*字间距离*/
       line-height : 200%; /*设置行高*/
       font-weight:bold; /*文字粗体*/
       vertical-align:sub; /*下标字*/
       vertical-align:super; /*上标字*/
       text-decoration:line-through; /*加删除线*/
       text-decoration: overline; /*加顶线*/
       text-decoration:underline; /*加下划线*/
       text-decoration:none; /*删除链接下划线*/
       text-indent:30px;/*段落首行缩进*/
       text-transform : capitalize; /*首字大写*/
       text-transform : uppercase; /*英文大写*/
       text-transform : lowercase; /*英文小写*/
       text-align:right; /*文字右对齐*/ 
       text-align:left; /*文字左对齐*/
       text-align:center; /*文字居中对齐*/
       text-align:justify; /*文字分散对齐*/
       vertical-align属性 vertical-align:top; /*垂直向上对齐*/
       vertical-align:bottom; /*垂直向下对齐*/
       vertical-align:middle; /*垂直居中对齐*/
       vertical-align:text-top; /*文字垂直向上对齐*/
       vertical-align:text-bottom; /*文字垂直向下对齐*/
    
  • 二、CSS边框空白
       padding-top:10px; /*上边框留空白*/
       padding-right:10px; /*右边框留空白*/
       padding-bottom:10px; /*下边框留空白*/
       padding-left:10px; /*左边框留空白
    
  • 三、CSS符号属性
       list-style-type:none; /*不编号*/
       list-style-type:decimal; /*阿拉伯数字*/
       list-style-type:lower-roman; /*小写罗马数字*/
       list-style-type:upper-roman; /*大写罗马数字*/
       list-style-type:lower-alpha; /*小写英文字母*/
       list-style-type:upper-alpha; /*大写英文字母*/
       list-style-type:disc; /*实心圆形符号*/
       list-style-type:circle; /*空心圆形符号*/
       list-style-type:square; /*实心方形符号*/
       list-style-image:url(/dot.gif); /*图片式符号*/
       list-style-position: outside; /*凸排*/
       list-style-position:inside; /*缩进*/
    
  • 四、CSS背景样式
       background-color:#F5E2EC; /*背景颜色*/ 
       background:transparent; /*透视背景*/
       background-image : url(/image/bg.gif); /*背景图片*/
       background-attachment : fixed; /*浮水印固定背景*/
       background-repeat : repeat; /*重复排列-网页默认*/
       background-repeat : no-repeat; /*不重复排列*/
       background-repeat : repeat-x; /*在x轴重复排列*/
       background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置
       background-position : 90% 90%; /*背景图片x与y轴的位置*/
       background-position : top; /*向上对齐*/
       background-position : buttom; /*向下对齐*/
       background-position : left; /*向左对齐*/
       background-position : right; /*向右对齐*/
       background-position : center; /*居中对齐*/
    
  • 五、CSS连接属性
       a /*所有超链接*/ a:link /*超链接文字格式*/ 
       a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/
       a:hover /*鼠标转到链接*/ 鼠标光标样式:
       链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案(IE6) 
       p {cursor:url(“光标文件名.cur”),text;}
    
  • 六、CSS框线一览表
       border-top : 1px solid #6699cc; /*上框线*/
       border-bottom : 1px solid #6699cc; /*下框线*/
       border-left : 1px solid #6699cc; /*左框线*/ 
       border-right : 1px solid #6699cc; /*右框线*/
       以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color : #369 /*设置上框线top颜色*/
       border-top-width :1px /*设置上框线top宽度*/
       border-top-style : solid/*设置上框线top样式*/
       其他框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/
       groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/
    
  • 七、CSS表单运用

文字方块 按钮 复选框 选择钮 多行文字方块 下拉式菜单 选项1选项2

  • 八、CSS边界样式
 margin-top:10px; /*上边界*/ 
margin-right:10px; /*右边界值*/ 
margin-bottom:10px; /*下边界值*/
 margin-left:10px; /*左边界值*/
  • 九、CSS滤镜属性 Filter:

在样式中加上滤镜特效。由于此属性内容比较多,我们将到下一章单独对滤镜介绍。

1.Alpha:设置透明度 Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。

FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。

Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY:代表渐变透明效果的开始X和Y坐标。 FinishX和
FinishY:代表渐变透明效果结束X和Y 的坐标。

2.BlendTrans:图像之间的淡入和淡出的效果 BlendTrans(Duration=?) Duration:淡入或淡出的时间。注意:这个滤镜必须配合JS建立图片序列,才能做出图片间效果。

3.Blru:建立模糊效果 Blur(Add=?, Direction=?, Strength=?) Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。
Direction:设置模糊的方向,其中0度代表垂直向上,然后每45度为一个单位。 Strength:代表模糊的象素值。

4.Chroma:把指定的颜色设置为透明 Chroma(Color=?) Color:是指要设置为透明的颜色。

5.DropShadow:建立阴影效果 DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color:指定阴影的颜色。
OffX:指定阴影相对于元素在水平方向偏移量,整数。
OffY:指定阴影相对于元素在垂直方向偏移量,整数。
Positive:是一个布尔值,值为true(非0)时,表示为建立外阴影;为false(0),表示为建立内阴影。

6.FlipH:将元素水平反转

7.FlipV:将元素垂直反转

8.Glow:建立外发光效效果 Glow(Color=?, Strength=?) Color:是指定发光的颜色。
Strength:光的强度,可以是1到255之间的任何整数,数字越大,发光的范围就越大。

9.Gray:去掉图像的色彩,显示为黑白图象

10.Invert:反转图象的颜色,产生类似底片的效果

11.Light:放置光源的效果,可以用来模拟光源在物体上的投影效果 注意:此效果需要用JS设置光的位置和强度。

12.Mask:建立透明遮罩 Mask(Color=?) Color:设置底色,让对象遮住底色的部分透明

13.RevealTrans:建立切换效果 RevealTrans(Duration=?, Transition=?)
Duration:是切换时间,以秒为单位。 Transtition:是切换方式,可设置为从0到23。
注意:如果做页面间的切换效果,可以在<head>区加上一行代码:<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在页面里的元素必须配合JS使用。

14.Shadow:建立另一种阴影效果 Shadow(Color=?, Direction=?) Color:是指阴影的颜色。
Direction:是设置投影的方向,0度代表垂直向上,然后每45度为一个单位。

15.Wave:波纹效果 Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add:表示是否显示原对象,0表示不显示,非0表示要显示原对象。
Freq:设置波动的个数。LightStrength:设置波浪效果的光照强度,从0到100。0表示最弱,100表示最强。 Phase:波浪的起始相角。从0到100的百分数值。(例如:25相当于90度,而50相当于180度。) Strength:设置波浪摇摆的幅度。

16.Xray:显现图片的轮廓,X光片效果 注意:在使用CSS滤镜时,必须使用在有区域的元素,比如表格,图片等。而文本,段落这样没有区域的元素不能使用CSS滤镜,对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"

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

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,018评论 0 1
  • 一,HTML有N多标签,根据显示的类型,主要可以分为3大类 1,块级标签 独占一行的标签 能随时设置宽度和高度(比...
    张不二01阅读 718评论 0 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 1 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) ...
    厝弧阅读 320评论 0 0
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,050评论 0 40