这篇文章是记录标签和层叠样式表的一些知识点.

标签

  1. 标签分为块级元素和行内元素,块级元素独占一行,块级元素内部可以容纳其他的元素,行内元素可以与其他的行内元素位于同一行且行内元素只能容纳行内元素不能容纳块元素.

常见的块级元素如下:

  • div
  • h
  • p
  • hr
  • ol
  • ul

常见的行内元素如下:

  • p
  • img
  • span
    1. 列表有三种:无序列表&有序列表&定义列表
    2. a标签中的target表示窗口的打开方式,”_self”表示当前窗口打开链接且地址栏地址改变,”_blank”表示新开一个窗口打开链接.
    3. 浮动框架iframe,滚动条的控制是scrolling属性

样式

  1. 引入方式分为三种:外部,内部,内联
    1. 外部,即html和css分成不同的文件,在html文件中使用link标签把css导入
    2. 内部,把html和css写在同一个文件下,但css是使用style标签(放置在head标签中)
    3. 内联,其实就只是单纯的html,css是在标签内部中写好

  2. css选择器的一些例子:

    • 如果选择器是某一个标签,那么表示选择所有该标签元素

      1. div{color:red;}//表示选中所有的div元素

    • id选择器,不解释

    • class选择器,表示选中该类的元素
    • 子元素选择器,父元素和子元素使用空格隔开
#f #s{color:blue;}//表示选择id为f的容器下的id为s的元素
  • 选择元素的下一个兄弟元素,使用”+”连接
#b+div{color:red;}//表示b标签的下一个相邻元素
  • 群组选择器,使用”,”连接
div, p, h{
     color:red;//表示同时选择div,p,h元素 
}

文字本身的样式

  • font-size,文字大小.eg: 12px
  • color, 文字颜色.eg: red 或者 十六进制 #03FCA1

文字段落样式

  • text-align,文本水平对齐方式.eg:left, right, right.
  • text-indent,段落首行缩进.eg:12px
  • text-transform,文本大小写.eg:uppercase, lowercase,capitalize
  • line-height, 行高.eg:12px
  • word-spacing,词距.eg:12px
  • letter-spacing,字距.eg:12px

边框样式

  • border-width,宽度.eg:12px
  • border-style,外观.eg:none, solid(实线), dashed(虚线),dotted(点线)
  • border-color,颜色.eg:十六进制或者颜色单词
  • 边框样式的简写方式: border: 1px solid red;
  • 局部样式: border-方向-属性.eg:border-top-color:red;

背景样式

  • background-color,控制元素的背景颜色.
  • background-img,定义图片的背景.

超链接元素

  • a:link{css样式}, 即未访问时的样式
  • a:visited{css样式},即访问后的样式
  • a:hover{css样式},即鼠标移动到元素的样式. hover元素可以应用在多个元素中,不只是a标签可以使用.
  • a:active{css样式},即鼠标点击后的样式

图片样式

  • width,图片的宽
  • height,图片的高
  • border,表示图片的边框
  • text-align,图片水平对齐[在父元素中设置].(text-align只对img和p标签有效)
  • vertical-align,图片相对于同级元素的垂直对齐[在img标签中设置].eg: top&middle&baseline&bottom