参考慕课网的学习笔记

H5 标签（常用）

• 段落
• 网页基本信息定义
• 网页主要内容
• 
  换行

• ---

  分割线
• 文本域
• 无意义
• 标题
• 标签名称
• 表格
• 表格行
• 表格列
• 表头
• 下拉选
• 如果是选项 checked 表示选中
• 表单
• 图片
• 超链接
• 一般分层用，无特殊意义

CSS 使用

CSS全称为“层叠样式表 (Cascading Style Sheets)”，用于网页样式。一般有三种方式，分别是外部式，嵌入式，内联式,理论优先级依次增高，遵循就近原则。

内联式：

<p style="color:red">这里文字是红色。</p>

嵌入式：被 style 标签包裹

<style type="text/css">
    span {
        color: red;
    }
</style>

外部式：

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

选择器

标签选择器

css 选择器表示会对哪些内容进行样式渲染，这里会对

标签中的内容进行渲染

<style type="text/css">
   p {
       font-size: 12px;
       /*设置文字字号*/
       color: red;
       /*设置文字颜色*/
       font-weight: bold;
       /*设置字体加粗*/
   }
   </style>

类选择器

<style type="text/css">
   .test {
       color: red;
   }
   </style>
<div class="test">...</div>

id 选择器

<style type="text/css">
   #test {
       color: red;
   }
   </style>
<div id="test">...</div>

子选择器

可以在一个选择器后面指定一个子选择器，用大于号(>)指定

<style type="text/css">
   #test>span{
       color: red;
   }
   </style>
<div id="test"><span></span>...</div>

后代选择器

在一个选择器后面指定后台选择器，用空格指定

<style type="text/css">
   #test span{
       color: red;
   }
   </style>
<div id="test"><span></span>.<span></span>..</div>

通用选择器

适配所有，用 * 表示

<style type="text/css">
   * {
       color: red;
   }
   </style>
<div id="test"><span></span>.<span></span>..</div>

伪类选择器

给当前页面不存在的选择器设置，常用的有 a:hover 表示当鼠标在a标签时，css 样式就会起作用

<style type="text/css">
   a:hover {
       color: red;
   }
</style>
<div id="test"><a>测试</a></div>

分组选择器

<style type="text/css">
div,.first {
  color: green;
}
div,#second {
  color: red;
}
</style>
<div id="test">
<a class="first">测试1</a>
<a id="second">测试2</a>
</div

样式优先级

内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

样式权值的计算

显示那种样式由权值来决定，继承的权值为0.1，标签的权值为1，标签的权值为10，id的权值为100。

!important 最高优先级。例如 p {color: red!important;}
**

网页字体

字体类型

body{font-family:”宋体”;} 如果用户本地电脑没有宋体，就会使用默认的字体

字体大小

body{font-size:12px;}

首行缩进

p {
    // 首行缩进
    text-indent: 2em;
    // 行高
    line-height: 1.5em;
    // 英文单词之前间隔
     word-spacing: 2px;
}

2em; 表示缩进的距离死字体的2倍

字体颜色

颜色可以用英文，rgb，百分比，16进制表示

• p{color:red;}
• p{color:rgb(133,45,200);}
• p{color:rgb(20%,33%,25%);}
• p{color:#00ffff;}

16进制图片

排列方式

div {
  // 靠右，还有center，left    
  text-align: right;
}

长度值

1. 像数，px，90个像数是1寸
2. em，1个em多大，取决于字体font-size是多大
3. 百分比，%

元素分类

块状元素