CSS01基础

回顾

结构标签

• html
• body
• head

头部标签

• meta
• title
• link

格式标签

• hn
• br
• hr
• p
• pre
• center

列表标签

• ul
• li
• ol
• dl
• dt
• dd

文本标签

• em
• strong
• q
• blockquote
• cite
• bdo
• kbd
• var
• code
• sub
• sup
• address
• abbr
• .......

超链接

• a

图像

• img
• map
• area

表格标签

• table
• caption
• thead
• tbody
• tfoot
• tr
• td
• th
• colgroup
• col

表单标签

• form
• input
• select
• option
• textarea
• button
• fieldset
• legend

框架分帧

• iframe

HTML全局属性

• title
• id
• class
• dir
• style

一、CSS 层叠样式表

1.CSS的使用方式

• 写在标签内的style属性中 行内式 内联式

    <html标签 style="样式属性：取值;...">
  

• 写在 <style> 标签内

    <style type="text/css">
    	选择符{
    			样式属性：取值;...
    		}
    <style>
  

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

    <link rel="stylesheet" type="text/css" href="样式表文件地址（.css）">  
  

• @import可以引入css文件，用于css文件中引入另一个css文件

    @import url("样式表地址");   
  

2. CSS的格式

选择器{
		属性1:值;
		属性2:值;
	}

3.CSS的长度单位

• px ： 像素
• em ： 相对于默认大小 倍数
• % ：百分比
• pt(磅) cm(厘米) mm(毫米) 绝对单位

4.颜色表示

• 颜色的英文单词

  red orange yellow green cyan blue purple black white pink gray

• rgb方式

    rgb(123,45,178)
    rgb(0~255,0~255,0~255)
    rgb(百分比，百分比，百分比)
  

  • rbg(255,0,0) 红色
  • rbg(255,255,255) 白色
  • rgb(0,0,0) 黑色
  • rgb(100,100,100) 灰色。 只要三个都一样，就是灰色

• 十六进制

  • 34afa1

  • ff0000 红色 可以简写 #f00

  • 00ff00 绿色 简写 #0f0

  • 0000ff 蓝色 简写 #00f

  • ffffff 白色 简写 #fff

  • 000000 黑色 简写 #000

  • cccccc 灰色 简写 #ccc

  • 336699 简写 #369

5. CSS注释

• /* 注释 */

6.CSS选择器

• HTML元素（标签）选择器

• ID选择器 #id名

• CLASS选择器 .类名

• 全局选择器 *

• 关联选择器-后代元素选择器 选择器 选择器

    例如：
    .nav li{...}
    #box div{...}
    div.list{...}
    .container li{...}
  

• 关联选择器-子元素选择器 选择器>选择器

    例如：(子元素选择器，孙元素不选择) 
    ul>li{....}
  

• 关联选择器-相邻选择器 选择器+选择器

    例如：（选择紧贴在E元素之后的F元素）
    E+F{...}
  

• 关联选择器-兄弟选择器 选择器~选择器

    例如：(选择E元素所有兄弟元素F)
    E~F{...}
  

• 组合选择器 两种基本选择器的组合

• 伪类选择器 love-hate(a标签为例)

  • a:link：向未被访问的链接添加样式
  • a:visited：向已被访问的链接添加样式
  • a:hover：当鼠标悬浮在元素上时，向元素添加样式
  • a:active：向被激活的元素添加样式（点击的时候）

7. 选择器的优先级

• 内嵌样式>嵌入外部样式表/内部样式表

  • 嵌入外部样式表与内部样式表根据定义的先后顺序来定义，最后定义的优先（就近原则）

• 行内 > ID > Class > Tag(html标签选择符)

• !important

    例如：
    .box{
    	color:gray !important;
    	}
  

• 组合选择器

  • ID权重100
  • class权重10
  • Tag权重1

二、CSS的属性

1. 字体属性

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

• font-style ： 字体风格 normal(默认)/italic(斜体)/oblique(强制变斜)

• font-weight ： 字体粗度 normal(默认)/bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600 粗)

• font-variant ： 字变形 noraml(默认)/small-caps(小型大写字母)

• font-size ： 字体大小

• font ： 统一设置

    font:[style/weight/variant] size family
    注意：
    前面三个可写可不写，后面两个必须写且顺序不可交换（必须放在其他属性后面）
  

2.颜色属性

• color 值：字母/rgb/16进制

3.文本属性

• letter-spacing ：字母/符间距

  • normal(默认0px)
  • 像素：-0.3px(允许使用负值)

• word-spacing ：字/ 单词间距

  • normal(默认0px)
  • 像素：1.5px(允许使用负值)

• text-decoration ：文本能修饰

  • none（默认）
  • underline 下划线
  • overline 上划线
  • line-through 中划线 删除线
  • blink 定义闪烁的文本

• text-align:横向排列

  • left(默认)
  • right
  • center
  • justify(两端对齐)

• vertical-align：垂直对齐方式

  • baseline:将支持valign特性的对象的内容与基线对齐
  • sub：垂直对齐文本的下标
  • super：垂直对齐文本的下标
  • top：将支持valign特性的对象的内容与对象顶端对齐
  • text-top：将支持valign特性的对象的文本与对象顶端对齐
  • middle：将支持valign特性的对象的内容与对象中部对齐
  • bottom：将支持valign特性的对象的文本与对象底端对齐
  • text-bottom：将支持valign特性的对象的文本与对象顶端对齐
  • <percentage>：百分比指定由基线算起的偏移量。可以为负值，基线对于百分数来说就是0%
  • <length>：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0（CSS2）

• text-indent：文本的首行缩进

  • 常用单位
    • 像素（50px）
    • 百分比
    • em(2em代表两个字)

• line-height：设置行间距离，不允许使用负值

  • 常用单位

    • normal(默认)

    • 数字

    • 百分比

    • px

    • em

        注意：
        line-height:200px;
        font:30px "Mcrosoft";
        此时line-height的设置失效
        因为font把它给覆盖了
        可使用以下方式同时设置：
        font:30px/200px "Microfost";
      

• text-transform：设置对象中的文本的大小写

  • none(默认)
  • capitalize(每个单词以大写字母开头)
  • uppercase(转换为大写字母)
  • lowercase(转换为小写字母)

• text-shadow：向文本添加阴影

    例如：(可以同时设置多个阴影，中间用“,”分开)
    h2{
    	text-shadow：5px     5px     5px    green,...;
    			  水平方向  竖直方向  模糊度  模糊颜色
    }
  

4.背景属性

• background-color

  • 设置背景色，或设置为transparent（透明）

• background-image

  • 背景图片(支持多重背景图)
    • url("图像地址1"),url("图像地址2")

• background-repeat

  • 背景重复
    • repeat:背景图像在纵向和横向上重复平铺
    • no-repeat:背景图像不重复平铺
    • repeat-x:横向重复平铺
    • repeat-y:纵向重复平铺

• background-attachment

  • 背景附件
    • scroll:背景图像是随对象内容一起滚动，是默认选项
    • fixed:背景图像固定在页面上静止不动，只有其他的内容随滚动条滚动

• background-position(背景不能平铺)

  • 背景位置（如果只给一个值，另一个默认为center）

      例如：
     	background-position:  left     top;
      （left/center/right）水平位置  垂直位置(top/center/bottom)
      background-position:  20px  50%;
      （单位可以是px/百分比%） x坐标 y坐标
    

• background

  • 综合属性

    • background：背景颜色|背景图像|背景重复|背景附件|背景位置（各属性没有先后顺序，以空格分开）

        例如：
        background:red url('./123.png') no-repeat 100px 10px;
      

5.边框属性

• border-style

  • 边框样式

    • border-top-style

    • border-right-style

    • border-bottom-style

    • border-left-style

        样式有如下：
        dotted(点线)  dashed(虚线) solid(实线)  double(双实线)
        groove(3D凹线) ridge(3D凸线) inset(内嵌效果) outset(外凸效果，3D浮出线)
      

• border-color

  • 颜色值
  • transparent(透明色)

• border-width

  • 宽度（px）

• border

  • 边框综合（顺序随便）
    • border：边框颜色 边框样式 边框宽度

• border-radius

  • 圆角边框
    • border-radius:25px 10px 15px 30px (四个角为原形)
    • border-radius:50px 10px(对称圆角边框)

• border-image（CSS3）

  • 花样边框
    • url('图片地址')
    • 图片使用的边框线宽度（数字）
    • 图片宽度（数字）可省略
    • 图片填充方式 （可省略）

      • stretch：把图片拉伸到整个边框区域

      • repeat:重复填充

      • round：重复并自动调整图片大小

          例如：
          border-image:url('aa.png') 35 25 25 15;
          border-image:url('bb.png') 36 round;
        

6.鼠标光标属性

• cursor(该属性写在dody中就可以了)

  • cursor：auto(默认值)/形状取值/url('图像地址');

      形状取值：
      text：文字选择器
      crosshair：十字架
      wait:等待
      help：帮助
      pointer：小手
      move
      progress
    

7.列表属性

• list-style-type

  • disc：实心圆
  • circle：空心圆
  • square：小方框
  • decimal：阿拉伯数字1,2,3...
  • lower-rowan：小写罗马数字i ,ii, iii...
  • upper-roman：大写罗马数字I,II,III...
  • lower-alpha：小写英文字母a，b,c..
  • upper-alpha：大写英文字母A,B,C..

• list-style-image

  • none/url('图片地址')

• list-style-position

  • inside：标示在li里面
  • outside:标示在li外面

• list-style

  • 复合属性(经常用none表示不设置)

      例如
      ol{
      	list-style:square inside url('cat.jpg');
       }
    

8.表格属性（设置给table）

• table-layout

  • 表格布局方式
    • auto(默认)布局将基于各单元格的内容，可能定义单元格宽度为100px，但结果不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢。
    • fixed平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。

• border-collapse

  • 行和单元格的边是合并还是独立
    • separate：独立（默认）
    • collapse：合并

• border-spacing(不设置border-collapse时才有用)

  • 当表格边框独立时，行和单元格的边框在横向和纵向上的间距
  • 该属性作用等同于标签属性cellspacing(单元格边框)。border-spacing:0;等同于cellspacing="0"
  • 只有当表格边框独立（即<'border-collapse'>属性等于separate时）此属性才起作用
  • 如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距
  • 如果只提供一个值时，作用于横向和纵向上的间距

• caption-side

  • 表格标题在table上面还是下面
    • top
    • bottom

• empty-cells

  • 没有内容的单元格隐藏还是显示
    • show(默认)
    • hide