css

css3思维导图,里面有常用css3的使用方式,相当于一个速查表。

css3

• 创建
  • 外部样式
    • <link rel="stylesheet" type="text/css" href="mystyle.css">
  • 内部样式
    • <style> hr {color:sienna;} </style>
  • 内联样式
    • <p style="color:sienna;margin-left:20px">这是一个段落。</p>
  • 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
• 基础样式
  • 字体
    • font-family //设置字体
      • 字体行号中间可以用逗号隔开后备多个
    • font-style //设置字体样式
      • normal //正常显示
      • italic //斜体
      • oblique //斜体
    • font-size //设置字体大小
      • px
      • em
    • font-weight //字体加粗
      • 100-900
  • 文本
    • color //设置文本颜色
    • text-align //设置文本水平对齐方式
      • center
      • right
      • justify //适用于文章段落自然段
    • 垂直对齐
      • line-height //行高默认一般是字体的1.2倍
      • vertical-align //垂直对齐文本
        • baseline //基线对齐
        • sub //效果：字体会下移
        • super //效果：字体会上移
        • top //和bottom效果相反
        • text-top
        • middle //居中对齐
        • bottom //将元素的底部和父元素的底部对齐
        • text-bottom
        • %
        • px
    • 字间隔和字母间隔
      • word-spacing 改变字间隔
        • em
        • normal
        • number
      • letter-spacing 字母间隔
        • em
        • normal
        • number
    • text-decoration //文字秀修饰线
      • overline //上线
      • line-through //中线
      • underline //下划线
    • text-transform //大小写转化
      • uppercase //全部大写
      • lowercase //全部小写
      • capitalize //首字母大写
    • text-shadow //文本阴影
      • green 5px 0.5em 右5px下0.5em偏移绿色阴影
    • white-space //空白符处理
      • normal //设置为多个空格为一个
      • pre //保留原有空格
      • white-space //防止换行除非有br
    • direction //文本方向
      • ltr
      • rtl
    • text-indent //文本缩进
      • px
      • em 1em=16px
  • 边框
    • border-collapse:collapse; //中间没有白线间隔线
  • 背景
    • background-color //背景颜色
      • #ff0000
      • rgb(255,0,0)
      • red
    • background-image //背景图片
      • url()
    • background-repeat //按照什么方向平铺
      • repeat-x
      • no-repeat
    • background-attachment //图片定位方式不然它随着滚动消失
      • scroll 背景图片随页面的其余部分滚动。这是默认
      • fixed 背景图像是固定的
      • inherit 指定background-attachment的设置应该从父元素继承
    • background-position //改变图片的位置
      • left top
      • left center
      • left bottom
      • right top
      • right center
      • right bottom
      • center top
      • center center
      • center bottom
      • 50% 50% //使用百分比居中
      • 30px 50px //使用像素位移
    • opacity: 0.2 //图片透明上面的文字也会透明
  • 列表样式
    • list-style-type //列表样式
      • circle //无序列表空心圆
      • square //无序列表正方
      • upper-roman //有序阿拉伯数字
      • lower-alpha //有序abc
      • none //不使用标识
    • list-style-image //列表样式图片
      • url() //使用url
    • list-style-position
      • inside 将标志放在内部
      • outside 将标志放在外部
      • 子主题
    • 子主题
  • a标签
    • a:link {color:#000000;} /* 未访问链接*/
    • a:visited {color:#00FF00;} /* 已访问链接 */
    • a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
    • a:active {color:#0000FF;} /* 鼠标点击时 */
• 盒子模型
  • 边框
    • border-style //边框样式
      • dotted //dotted:定义一个点线边框
      • dashed //定义一个虚线边框
      • solid //定义实线边框
      • double //定义两个边框。 两个边框的宽度和 border-width 的值相同
      • groove //定义3D沟槽边框。效果取决于边框的颜色值
      • ridge //定义3D脊边框。效果取决于边框的颜色值
      • inset //定义一个3D的嵌入边框。效果取决于边框的颜色值
      • outset //定义一个3D突出边框。 效果取决于边框的颜色值
    • border-width //边框宽度
    • border-color //边框颜色
    • 单独个边样式
      • border-top-style:dotted;
      • border-right-style:solid;
      • border-bottom-style:dotted;
      • border-left-style:solid;
  • 轮廓 //可以画在边框外边
    • outline-style
    • outline-width
    • outline-clolr
  • 外边距
    • margin
      • auto
      • px
      • %
    • margin-bottom 设置元素的下外边距。
    • margin-left 设置元素的左外边距。
    • margin-right 设置元素的右外边距。
    • margin-top 设置元素的上外边距。
  • 内边距/填充
    • padding-top:25px;
    • padding-bottom:25px;
    • padding-right:50px;
    • padding-left:50px;
• 定位
  • 定位
    • static //默认
    • fixed //浏览器窗口（固定定位）
    • relative //相对定位,相对于自身,以自己为中心
    • absolute //绝对定位,以父类为基础，创作人员通常会指定一个relative而且没有偏移，作为absolute的包含块
  • 浮动
    • float //浮动
      • left
      • right
      • none
      • inherit
    • clear //禁止浮动
      • left
      • right
      • both
      • none
      • inherit
  • 居中
    • margin: auto; //元素水平居中
    • text-align: center //文本水平居中
    • line-height //垂直居中
• 改变元素显示
  • display
    • block //块状元素
    • inline //行内元素
    • inline-block //行内块
  • 内容溢出裁剪
    • overflow
      • visible 初始值
      • scroll 会出现滚动条
      • hidden 隐藏掉
  • visibility //元素可见性
    • visibility 初始值
    • hidden 隐藏但是还站位
    • 子主题
  • z-index //覆盖顺序和
    • number
• 2D转化
  • transform:rotate(-9deg); //旋转-9°
    • -ms-transform: rotate(30deg); /* IE 9 兼容可有可无*/
    • -webkit-transform: rotate(30deg); /* Safari and Chrome 兼容可有可无*/
    • -o-transform: rotate(30deg); /* Opera兼容可有可无 */
    • -moz-transform: rotate(30deg); /* Firefox兼容可有可无 */