码迷,mamicode.com
首页 > Web开发 > 详细

HTML第四课+(CSS基础)

时间:2017-07-31 20:49:40      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:mil   图像   删除   百分比   legend   权重   sub   group   16进制   

回顾

结构标签

  • 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 层叠样式表

CSS的使用方式

  • 在元素的style属性内 行内式 内联式
  • 写在 <style> 标签内
  • 写到外部css文件中,用<link>关联到HTML中,
  • @import可以引入css,用于css中引入css

CSS的格式

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

CSS的长度单位

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

颜色表示

  • 颜色的英文单词

    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

CSS注释

  • /* 注释 */

CSS选择器

  • 元素选择器
  • ID选择器 #id名
  • CLASS选择器 .类名
  • 全局选择器 *
  • 关联选择器-后代元素选择器 slecter selecter
  • 关联选择器-子元素选择器 selecter>selecter
  • 组合选择器 两种基本选择器的组合
  • 伪类选择器 love-hate
    • :link
    • :visited
    • :hover
    • :active

选择器的优先级

  • ID >CLASS > Tag
  • 组合选择器 ID权重100 class权重10 Tag权重1

CSS的属性

字体属性

  • font-family 衬线字体(serif) 非衬线字体(sans-serif)
  • font-style 字体风格 normal(默认)/itailc(斜体)/oblique(强制变斜)
  • font-weight 字体粗度 normal(默认)/bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600 粗)
  • font-variant 字变形 noraml(默认)/small-caps(小型大写字母)
  • font-size 字体大小
  • font 统一设置

    font:[style/weight/variant] size family
    

颜色属性

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

文本属性

  • letter-spacing 字母间距
  • word-spacing 单词间距
  • text-decoration 文本能修饰
    • none
    • underline 下划线
    • overline 上划线
    • line-through 中划线 删除线

HTML第四课+(CSS基础)

标签:mil   图像   删除   百分比   legend   权重   sub   group   16进制   

原文地址:http://www.cnblogs.com/monkeychao/p/7265226.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!