html基础知识

1、id器

• 语法

  • HTML中通过id属性定义

    如：

    <div class="box"></div>

  • css中以点进行标识:#

    #id名称 { 
        样式声明;
    }
    ​
    ​
    #box{
        background-color:red;
    }

• 作用:选择所有带有指定id名的元素

注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

总结

• 总结使用频率

  • 基础选择器中最常用是类选择器

  • id用于页面中唯一模块

  • 标签选择器定义的全局样式，单独使用要慎重

  • *号通常用于重置样式【最不常用】

2、表格CSS 属性

1、表格边框

指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性

表格会呈现双边框，是因为表和 th / td 元素有独立的边界。

table存在默认属性border-collapse：separate

2、表格的折叠边框

border-collapse 属性设置表格的边框是否被合并为一个单一的边框

• 取值

  • separate：边框独立（默认值）

  • collapse：相邻边框被合并

• border-spacing:单元格之间的间距

  • border-spacing:水平方向 垂直方向；

  • border-spacing：一个值；代表水平方向和垂直方向的间距是一样的 注意：只有在 边框独立border-collapse: separate时才能用

3、单元格内容的垂直对齐

• vertical-align 作用：垂直对齐属性设置垂直对齐，比如顶部，底部或中间

• 常用值

  • top顶部对齐

  • middle居中对齐

  • bottom底部对齐

小节：如何使用css实现表格的1像素边框

table{
    border-collapse:collspse;
}

3、CSS字体 ,文本属性

学习目标

• 熟练掌握css常用文本属性

• 熟练掌握css常用字体属性

• 能够说出颜色的常用表示方法

1、font-family：

• 作用：设置文本的字体系列

• 语法：font-family:字体名称

• 常用值：

  • 一个字体名称或系列名称（介绍常用字体名称、字体系列）

    • 微软雅黑 Microsoft YaHei

    • 宋体 simsun

    • 黑体 HeiTi

    • 楷体 KaiTi

  • 多个字体名称

    • 逗号分开 如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

      1.使用多个字体名称形成一个回退系统（也就是备用字体），当浏览器不支持第一个字体的时候则会尝试下一个字体，多个字体之间用逗号隔开
      2.中英文混合字体时，要先写英文字体，在写中文字体
      font-family: 'Times New Roman', '楷体', '宋体'
      .box{
          /*font-family:"微软雅黑","宋体";*/
          /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/
          font-family:"微软雅黑abc","宋体"; 
          /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
      }

2、font-size

• 作用：设置字体的大小

• 语法：font-size:值

• 常用值：

  • 长度值（通常是像素px）

  • 百分比（相对于父元素字号计算）

• em

  • 相对单位

  • 如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号

• 一般浏览器默认的大小为16px,支持最小的字体为12px。

3、font-style

• 作用：设置字体的样式

• 语法：font-style:值

• 常用值：

  • normal默认值

  • italic斜体显示

4、font-weight

• 作用：设置字体粗细

• 语法：font-weight:值

• 常用值：

  • normal默认值

  • bold加粗

  • 100-900九级字重， 400相当于normal,700相当于bold

5、line-height

• 作用：设置行高（效果是产生文本行间距）

• 语法：line-height:值

• 特性:实现单行文本的垂直居中

• 测量：文字高+行间距

• 打开px软件--在视图菜单---标尺（Ctrl+r）

  参考线：在标尺上按住鼠标左键不松手，拖拽鼠标

  按住alt键，放大图纸，为了测量更加准确，滚动滚轮，向外滚表示放大，向内滚表示缩小

  方法：测量两行文字中间的间距，然后除以2，得到平均间距，拉出参考线，进行标注，方便测量

• 常用值

  • normal默认。设置合理的行间距。

• px 设置固定的行间距。

• 百分比:相对于font-size计算

  .box{
  line-height:200%; /*产生的效果一致都是字号的两倍*/
  }
   line-height: 26px;
   如果行高属性值没有单位，那么表示字号的倍数
  20px/2 表示：字体大小是20px，行高是字体的两倍40px

6、font简写

• 作用：设置所有字体属性

• 语法：font: 字体风格 字体加粗 字号/行高 字体;

  • 依次【空格】隔开

• 总结：只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简简代码

  font:font-style font-weight font-size/line-height font-family;
  顺序：文字的样式 文字的加粗 文字的字号/行高 文字的字体
  注意：如果font属性有效，则必须要有font-size属性和font-family属性
  font: italic bold 14px/2 '微软雅黑';

7、text-align：

• 作用：设置文本的水平对齐方式

• 语法：text-align:值

• 常用值

  • left居左对齐 [默认值]

  • right居右对齐

  • center居中对齐

  • text-align: justify文本两端对齐方式

• 注：适用于块状元素