span标签style的优先级_html--css的引入方式 ,选择器 选择器的优先级 和伪类选择器...

CSS的引入方式

CSS的选择器

CSS选择器进阶

CSS选择器的优先级

CSS的伪类选择器

## 内容回顾:

1.h1~h6:加粗,数字越大级别越小,自动换行

2.br:换行; hr:分割线; & nbsp ;(特殊符号,空格)

3.p:与前边和后边内容之间有间距

4.a标签的href:本地文件连接;网络连接;锚链接

​ target:_blank另期页面,默认是自己页面

​ name:主要为了设置锚链接的锚点

5. img图片,src:本地文件地址和网络地址

- alt:图片损坏时给的提示

- align:图片的对齐方式

- title:鼠标悬浮时提示的文字

- width:宽度

- hight:高度

6.ul:无序列表,内部能包裹li,type更改显示的样式,默认是实心圆,还可以更改为空心圆(circle)和正方块(square)

7.有序列表,内部能包裹li,type类型,默认是阿拉伯数字,可更改为大小写字母,还可以更改为罗马文字

​ start,序号起始位置

8.dl定义列表,dt,dd*5 tab一下就出来了,pycharm帮我做的.

9table表格标签,border:边框类型;bordercolor:边框颜色;bgcolor:背景颜色;background:被禁图片,宽高,align:对齐方式;style="border-collapse:collapse"让表格的线条变成实心线.

​ tr代表一行

​ td代表一行内的一个单元格;rowspan:纵向合并;colspan:横向合并.

10.form表单;action:对应要提交的网络地址;method:get和post两个方法,默认是get.

​ input的类型们

- text普通文本输入框

- password,密文文本输入框

- checkbox,多选框,多用来服务条款点那个对号

- radio,单选,多用于选择性别,name得统一才能实现单选

- file,文件上传按钮

- date,日期选择框

- submit:form表单提交数据时候用它

- button:普通按钮

- image:一个图片,自带submit,src(王瑞东)=图片地址.

- select:下拉菜单,更改下拉菜单的多选multiple,size

- option下拉的每一个选项,默认选中此选项用selected

- textarea:文本输入框,可改变大小.

## 内容详细

1.div

​ 是块儿级标签,是嫖老师的最爱,因为他灰常单纯,什么都没有,想捏成什么样就捏成什么样

​ 块级标签内的文本,超过了块的宽度则会自动换行,但是如果是长英文没分割的字符串,不会换行,会溢出

2.span

​ 是行级标签,嫖老师设置的样式特别是宽高,不显示了,并不是你想怎么样就怎样

​ 一个行内的宽高和背景大小由填充的内容决定.不管内容多少,都不会溢出.

3.行内块

​ 可以设置宽高,不自动换行.

​ 在一行内显示,而且可以设置宽高

​ 一个底边对齐的现象

​ img图片标签

​ input输入框

​ textarea文本输入区域

4.都在一行内的标签--简称为行内标签

​ 不能设置宽高,不自动换行,同时具备

​ a标签

​ span标签

​ b标签 strong标签

​ em标签,i标签

​ u标签,del标签

5.不在一行内的标签-- 块级标签

​ 可以设置宽高,可以自动换行同时具备才叫做块级标签

​ p

​ h1~h6

​ table

​ 列表:ol;ul;dl

​ div

其他:不在上边三类里的.

​ form标签 不算,它是一个容器,容器内放了很多标签,他自己有自己的属性.

​ br

​ hr

==================================================================

## CSS的简介

cascdaing style sheet 层叠样式表,简称CSS

层叠:通过CSS的属性等把页面层叠起来

样式:设置页面每一块的样式

表:页面排版

## CSS的书写方式

方式一:行内式,在标签中直接书写

​ 优点:肯定不会选错标签

​ 缺点:代码冗余,且修改不方便

方式二:一个页面内接入的,称为内接式

​ 书写在head里的style标签里

​ 优点:修改方便,直观.

​ 缺点:关联性太强.如果写错变量名可能会酿成大祸.

方式三:外接式

​ 导入方式:利用link标签导入

​ 优点:协同开发,不同类型的代码分文件存放

​ 缺点,文件出问题或者丢了,页面就塌了.

## CSS基本选择器

基本选择器中的标签选择器

​ 通过标签名直接就可以选择到标签,页面中所有符合选择条件的标签都会被选择.

id选择器:常涛

​ 通过#号找到id

​ id不能以数字开头

​ 指哪打哪,因为id是唯一的

类选择器

​ 通过.找到类名

​ 类名可以重复

​ 类一般值的同一群相同属性的统称.

通配符选择器

​ 用*号操作所有标签

​ 使用场景:删除边框

```css

* {

width: 100px;

height: 100px;

margin: 0;

padding: 0;

}

```

CSS的优先级

- 标签选择器层级一致的时候,从上往下,以下边的为准

- 类的选择器的优先级大于标签选择器

- 通过id找到的具有唯一性,优先级最高

- 行内样式的设置优先级最高

- 继承的样式优先级是最低的s


## CSS的高级选择器

后代选择器

```

/* 后代选择器 */

body li {

color: red;

}

```

子代选择器

```

/*!* 子代选择器 *!*/

body ul > p {

color: green;

}

```

弟弟选择器

```

/*!* 弟弟选择器 *!*/

h1 ~ h2 {

color: pink;

}

```

毗邻选择器

```

/*!* 毗邻选择器 *!*/

h1 + h2 {

color: #cc6600;

}

```

组合选择器

```

/* 组合选择器 */

h1 ~ h2, li, h1 {

color:darkviolet ;

color: green;

}

```

伪类选择器

a标签的四个形态:爱恨准则 LoVe HAte

```html

/* 爱恨准则LoVe HAte */

a:link {

color: green;

}

a:visited {

color: blueviolet;

}

a:hover {

color: yellow;

}

a:active {

color: red;

}

a标签未被点击时的形态link

a标签被点击时的形态

a标签点击完毕时的形态

a标签悬浮时的形态

```

伪元素选择器

```HTML

/* 在文本之前添加内容 */

div:before {

content: "SB";

}

/* 在文本之后添加内容 */

div:after {

content: "翔";

}

/* 文本的第一个字母发生变化 */

div:first-letter {

color: green;

}

/* 文本的首行发生变化 */

div:first-line {

color: #cc6600;

}

alex吃...

```

注意:伪元素选择器,仅仅适用于块级标签.