HTML form and CSS selectors, pseudo-classes and pseudo elements

A, input label

1.<input>实现按钮效果
    -与表单相关的按钮效果
    -<input type="button" value="按钮">
2.<button>标签表示按钮
   -与表单无关的按钮效果：<button>按钮</button>
   -类似于<input type="submit"> - 提交表单
3.<input type="image">
   -基本用法 - 也可以显示图片
   -鼠标点击图片时 - 也有提交表单的作用
<input type="image" src="imgs/girl.jpg">
不同于<img src="imgs/girl.jpg">（只是图片）

Second, the basic selector

1.选择器的优先级别
 通配符选择器 < 元素选择器 < 类选择器/属性选择器 < ID选择器
2.元素选择器 - 定位当前页面的指定标签名
  ID选择器 - 定位当前页面中指定ID属性值的标签（只能匹配一个标签，无法重复使用）
  类(class)选择器 - 定位当前页面中指定class属性值的标签
  通配符选择器 - 匹配当前页面所有内容
  属性选择器 - [attr] - 匹配含有指定属性(属性名为attr)的标签(元素)。
3.优先级别：内联样式 > 外联样式。
4.!important
  设置当前内容的选择器的级别为最高;
  注意 - 打乱CSS选择器的默认优先级别顺序;
  建议 - 尽量不要使用.

Third, the relationship between the selector

1.祖先与后代的关系 - 后代选择器 A B
2.父级与子级的关系 - 子选择器 A>B
3.相邻兄弟选择器 - 定位指定元素的下一个兄弟元素 A+B
4.后面兄弟选择器 - 定位指定元素的后面所有兄弟元素 A~B

Fourth, the combination of the selector

1.组合选择器 - 选择器之间使用逗号隔开，之间为并集如：
h1, h2, h3 {font-size: 18px;}
其中：<h1>标题一</h1>
     <h2 >标题二</h2>
     <h3>标题三</h3>
2.组合选择器 - 选择器之间没有任何分隔，之间为交集
    1） p#p1 {  color: lightcoral; } 都选中
    <p>这是一个段落内容.</p>
    <p id="p1">这是一个段落内容.</p>
    2） p.mini { font-size: 12px; } 只选中p元素。
    <h2 class="mini">标题二</h2>
    <p class="mini">这是一个段落内容.</p>

Fifth, the color values

1.使用英文单词描述颜色
  -常用的颜色使用比较方便
  -问题
   -比较特殊的颜色，表示比较麻烦
   -不同浏览器对单词描述的颜色存在色差
    -建议 - 开发中，尽量不要使用
2.颜色基本由三原色（红、绿、蓝）组成
  -rgb(红, 绿, 蓝)
  -每个颜色值的范围 - 0 ~ 255
  - #红绿蓝
    -每个颜色使用两位表示
    -值的范围 00 ~ ff
    -举例
    -#000000

Sixth, pseudo-classes

伪类 - 设定指定状态下的样式
<a>标签链接 - 默认样式
   未被访问的样式 - 字体颜色为蓝色
   鼠标悬浮在链接元素时 - 鼠标样式变化
   当鼠标点击链接元素时 - 字体颜色为红色
已被访问的样式 - 字体颜色变化
：hover  ：active  ：visited  ：link  ：focus

Seven, pseudo-elements

：：before   ：：after等

Eight, block-level elements and inline elements

1.块级元素
    独占一行（自动换行） - 所有的块级元素都是垂直排列的
    <h1>  <p>  <ul>  <table>
2.内联元素
    内联元素是水平方向排列的
    内联元素 - 设置高度和宽度是无效的（高度和宽度由文字决定）
    <a>  <td>  <img>

Nine, semantic

所谓的语义化
 -每一个指定的HTML元素， 具有明确的指定含义。
HTML编写静态页面时
1. 使用常见的HTML元素 + CSS样式
 -<table>、<h1>、<p>等  
2. 使用语义化的HTML元素 + CSS样式
 -HTML5新增了很多语义化标签
3.若<div>与<span>元素 + CSS样式，这两个标签都是无语义化的表示

Ten, div and span

1.<div>标签是块级元素 - 独占一行
  - 默认的宽度为父级元素宽度的100%
  - 默认的高度为 0
  作用：用于布局
2.<span>元素是内联元素

Guess you like