10月30日 作业
* 元素按显示方式分为哪几种, 并举例, 正确描述它们
* CSS是什么? 它的主要作用是什么?
* 什么是CSS选择器,它的样式声明是哪二部分组成?
* 举例演示CSS简单选择器(全部)
* 举例演示CSS上下文选择器(全部)
* 举例演示常用CSS结构伪类选择器(不少于四种)
* 举例演示常用CSS表单伪类选择器(不少于三种)
-----------------------------------------------------------------------------
1、元素按显示方式分为哪几种, 并举例, 正确描述它们
A、 按内容是否可替换 分为:置换元素、非置换元素
置换元素<img src="..."> <input type="...">
非置换元素 <h1><p><span><div><table><ul+li><a>
B、按元素是否独占一行分为:块级元素、行内元素
块级元素<div>, <ul+li>, <table>,<p>, <h1-h6>
行内元素<span>,<input>, <em>,<strong>,<a>
2、CSS是什么? 它的主要作用是什么?
CSS: 层叠样式表(Cascading Style Sheets)用来设置页面中的元素样式和布局的
3、 什么是CSS选择器,它的样式声明是哪二部分组成?
根据元素的标签名称和属性来选择元素
样式规则 = 选择器 + 样式声明
4、举例演示CSS简单选择器(全部)
元素选择器: div{...}
属性选择器:tag{...}
类/class选择器:.active{...}
id选择器:#main{...}
群组选择器:p, .active , div{...}
通配符选择器:* ,表示全部元素,通常用在上下文选择器
5、举例演示常用CSS结构伪类选择器(不少于四种)
* `:nth-child(n)`: 匹配父元素中指定索引的子元素
* `:first-child`: 匹配父元素中的第一个子元素
* `:last-child`: 匹配父元素中的最后一个子元素
* `:nth-last-child(n)`: 匹配从父元素中倒数选择子元素
* `:only-child`: 匹配父元素中的唯一子元素* `selector:nth-of-type(n)`: 匹配父元素中指定索引的子元素
* `selector:first-of-type`: 匹配父元素中的第一个子元素
* `selector:last-of-type`: 匹配父元素中的最后一个子元素
* `selector:nth-last-of-type(n)`: 匹配从父元素中倒数选择子元素
* `selector:only-of-type`: 匹配父元素中的唯一子元素
6、* 举例演示常用CSS表单伪类选择器(不少于三种)
* `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
: `:read-only`: 选择只读表单元素