html列表伪类元素,HTML表单及CSS选择器、伪类和伪元素

一、input标签

1.实现按钮效果

-与表单相关的按钮效果

-

2.标签表示按钮

-与表单无关的按钮效果：按钮

-类似于 - 提交表单

3.

-基本用法 - 也可以显示图片

-鼠标点击图片时 - 也有提交表单的作用

不同于(只是图片)

二、基本选择器

1.选择器的优先级别

通配符选择器 < 元素选择器 < 类选择器/属性选择器 < ID选择器

2.元素选择器 - 定位当前页面的指定标签名

ID选择器 - 定位当前页面中指定ID属性值的标签(只能匹配一个标签，无法重复使用)

类(class)选择器 - 定位当前页面中指定class属性值的标签

通配符选择器 - 匹配当前页面所有内容

属性选择器 - [attr] - 匹配含有指定属性(属性名为attr)的标签(元素)。

3.优先级别：内联样式 > 外联样式。

4.!important

设置当前内容的选择器的级别为最高;

注意 - 打乱CSS选择器的默认优先级别顺序;

建议 - 尽量不要使用.

三、关系选择器

1.祖先与后代的关系 - 后代选择器 A B

2.父级与子级的关系 - 子选择器 A>B

3.相邻兄弟选择器 - 定位指定元素的下一个兄弟元素 A+B

4.后面兄弟选择器 - 定位指定元素的后面所有兄弟元素 A~B

四、组合选择器

1.组合选择器 - 选择器之间使用逗号隔开，之间为并集如：

h1, h2, h3 {font-size: 18px;}

其中：

标题一

标题二

标题三

2.组合选择器 - 选择器之间没有任何分隔，之间为交集

1) p#p1 { color: lightcoral; } 都选中

这是一个段落内容.

这是一个段落内容.

2) p.mini { font-size: 12px; } 只选中p元素。

标题二

这是一个段落内容.

五、颜色值

1.使用英文单词描述颜色

-常用的颜色使用比较方便

-问题

-比较特殊的颜色，表示比较麻烦

-不同浏览器对单词描述的颜色存在色差

-建议 - 开发中，尽量不要使用

2.颜色基本由三原色(红、绿、蓝)组成

-rgb(红, 绿, 蓝)

-每个颜色值的范围 - 0 ~ 255

- #红绿蓝

-每个颜色使用两位表示

-值的范围 00 ~ ff

-举例

-#000000

六、伪类

伪类 - 设定指定状态下的样式

标签链接 - 默认样式

未被访问的样式 - 字体颜色为蓝色

鼠标悬浮在链接元素时 - 鼠标样式变化

当鼠标点击链接元素时 - 字体颜色为红色

已被访问的样式 - 字体颜色变化

：hover ：active ：visited ：link ：focus

七、伪元素

：：before ：：after等

八、块级元素与内联元素

1.块级元素

独占一行(自动换行) - 所有的块级元素都是垂直排列的

2.内联元素

内联元素是水平方向排列的

内联元素 - 设置高度和宽度是无效的(高度和宽度由文字决定)

九、语义化

所谓的语义化

-每一个指定的HTML元素， 具有明确的指定含义。

HTML编写静态页面时

1. 使用常见的HTML元素 + CSS样式

-

、

等

2. 使用语义化的HTML元素 + CSS样式

-HTML5新增了很多语义化标签

3.若

与 元素 + CSS样式，这两个标签都是无语义化的表示

十、div与span

1.

标签是块级元素 - 独占一行

- 默认的宽度为父级元素宽度的100%

- 默认的高度为 0

作用：用于布局

2.元素是内联元素