CSS层叠样式表

CSS 层叠样式表

CSS的特点

  • 精确的定位：准确的控制页面的任何元素
  • 精细的控制：可以做到像素级别的调整
  • 便于维护，便于重用

CSS的使用方法

  • 写在标签内的style属性中

  • 写在<style>元素中

  • 写到外部css文件中，用<link>关联到html中

  • @import 可以引入css，用于css中引入css

    @import url("./style.css");

CSS的格式

选择器{
属性：值；
属性：值；
}

CSS的长度单位

  • 相对单位 常用
    • px 像素
    • em 倍数 相对于默认大小
    • 百分比
  • 绝对单位
    • pt 磅
    • cm 厘米 mm

颜色表示

  • 颜色英文单词

    cyan:青色 purple：紫色

  • rgb方式

    rgb(0255，0255，0~255)
    rgb(百分比，百分比，百分比)
    rgb(0,0,0)黑色
    rgb(255,255,255)白色
    rgb(100,100,100)灰色。只要三个都一样，就是灰色。靠近255就偏白，靠近0就偏黑。

  • 十六进制

    ffffff 白色 简写 #fff

    cccccc 灰色 简写 #ccc

    000000 黑色 简写 #000

CSS选择器

  • 元素选择器

    元素{}

  • ID选择器

    id名{}

  • class选择器

    .class名{}

  • 全局选择器

    *{}

  • 关联选择器

    选择器 选择器{}
    选择器>选择器{}
    如：.nav li{}
    #box div{}
    div .list{}
    .container li{}

  • 组合选择器

    两种基本选择器的组合，中间不能有空格
    选择器，选择器，选择器……
    如：p.text{}

  • 伪类选择器

    a:link{} 向未被访问的链接添加样式
    a:visited{} 向已被访问的链接添加样式
    a:hover{} 当鼠标悬浮在元素上方时，向元素添加样式
    a:active{} 向被激活的链接添加样式
    顺序不能乱

  • 选择器的优先级

    行内样式>ID选择器>CLASS选择器>TAG元素选择器>全局选择器
    组合选择器 ID：权重100 CLASS：权重10 TAG：权重 1

    规则：就近原则 看就近标签
    指向精确的优先级高
    并列的话谁在后面谁优先级高

字体属性

  • font-family 衬线字体（serif） 非衬线字体（sans-serif)

    font-family:"Microsoft YaHei","楷体"，sans-serif;

  • font-style 字体风格 默认 normal

    • italic(斜体)
    • oblique(强制变斜)

  • font-weight 字体粗度 默认 normal

    • bold 加粗
    • bolder 更粗
    • lighter 变细
    • 数字>=600(粗)

  • font-variant 字变形 默认 normal

    • small-caps 小型大写字母

  • font-size 字体大小

  • font 统一设置

    font:[style->variant/weight]->size->family 按顺序设置

颜色属性

  • color

文本属性

  • letter-spacing 字母间隔，值为长度，可以是负值

  • word-spacing 设置单词之间的间隔（通过空格识别）

  • text-decoration 文字修饰

    • underline 下划线

    • overline 上划线

    • line-through 删除线 中划线

    • none 默认

      text-decoration属性常用于去掉其下划线

  • text-align 水平对齐方式 left(默认)/right/center

  • *vertical-align 垂直对齐（基于文字的基线） baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比

  • text-indent 首行缩进

  • line-height 行高 长度单位

    当想让一行文字在某个元素中垂直居中：设置行高=高度的一半
    当需要设置行高也要设置font（font把行高也包含在内了）
    如： font:[style/variant/weight] size/line-height family
    /垂直居中/
    line-height:200px;
    font:30/200px "Microsoft YaHei", sans-serif;

CSS背景属性

  • background-color 背景颜色

  • background-image 背景图片

    background-image:url(dist/images/fenju.jpg);

  • background-repeat 背景图片的平铺方式

    • repeat 默认
    • repeat-x
    • repeat-y
    • repeat
    • no-repeat

  • background-position 背景图片定位

    • left/center/right/ 长度单位

    • top/center/bottom/

      background-position:right bottom;
      background-position:right center;
      background-position:center center;
      background-position:-30px -30px;

  • background-attachment 背景图片固定或滚动

  • scroll 默认

  • fixed

    统一设置：background：color image repeat position
    无顺序要求 值中间空格

CSS边框属性

  • border-width 边框线的宽度 长度单位

  • border-color

  • border-style 边框线的风格 solid/dotted/dashed/double...

  • border-left/right/top/bottom

    border-left-width: 10px;
    border-left-style:solid;
    border-right:10px dotted #369;

  • border

    统一设置：border:width style color；

CSS鼠标光标属性

  • cursor 值 default/pointer/move/crosshair/text/wait

CSS列表属性

  • list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-roman ....
  • list-style-postion 列表项图形的位置 outside/inside
  • list-style-iamge 自定义列表图形 url
  • 最常见的设置 list-style:none

CSS表格属性

  • table-layout 表格布局方式

    • auto
    • fixed 平均分配表格宽度

  • border-collapse 合并单元格边框

    • separate 独立
    • collapse 合并

  • border-spacing 单元格间距 长度单位

    若设置了collapse,border-spacing的设置就不起作用。

  • caption-side 表格标题位置 top/bottom

  • empty-cells 没有内容的单元格是否隐藏 show/hide

    若设置了collapse,empty-cells的设置就不起作用。

CSS sprites css精灵图

posted @ 2017-07-26 22:13  在水伊人  阅读(260)  评论(1)    收藏  举报