CSS层叠样式表

CSS 层叠样式表

CSS的特点

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

CSS的使用方法

• 写在标签内的style属性中
• 写在<style>元素中

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

    <link rel="stylesheet" type="text/css" href="./style.css">

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

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

  CSS的格式

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

  CSS的长度单位

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

  • cm 厘米 mm

    颜色表示

• 颜色英文单词

    cyan:青色  purple：紫色

• rgb方式

    rgb(0~255，0~255，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属性常用于<a></a>去掉其下划线

• 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精灵图

转载于:https://www.cnblogs.com/pangwl/p/7242312.html