25 May 18 HTML-Tabel标签 CSS介绍 CSS选择器 / 憋错料

25 May 18

一.table标签（标记一段数据为表格）

#1、作用：表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的

#2、格式

<table>

<tr>

</tr>

</table>

tr代表表格的一行数据

td表一行中的一个单元格

#3、注意点：

表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框

#4表格属性

a、宽度和高度

可以给table和td设置width和height属性

1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高

1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度

b、水平对齐和垂直对齐

水平对齐align可以给table、tr、td标签设置

垂直对齐valign只能给tr、td标签设置

========水平对齐===========

取值

align=“left”

align=“center”

align=“right”

2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐

强调：table只能设置水平方向

2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐

2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准

========垂直对齐===========

取值

valign=“top”

valign=“center”

valign=“bottom”

2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐

2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐

c、外边距和内边距

只能给table设置

3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px

3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"

#5 细线表格

细线表格的制作方式：

1、给table标签设置bgcolor

2、给tr标签设置bgcolor

3、给table标签设置cellspacing="1px"

注意：

table、tr、td标签都支持bgcolor属性

</tr>

</tr>

</tr>

<td>female</td>

</tr>

</table>

#6 表格结构

为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：

a、表格的标题:caption

特点:相对于表格宽度自动居中对齐

注意:

1.1 该标签一定要写在table标签里，否则无效

1.2 caption一定要紧跟在table标签内的第一个

b、表格的表头信息:thead

特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字

c、表格的主体信息:tbody

注意：

3.1 如果没有添加tbody，浏览器会自动添加

3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着

表格的高度变化而变化

d、表尾信息:tfoot

<html>

<head>

</head>

<body>

<caption>学员信息统计</caption>

<thead>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tr>

</tbody>

<tfoot>

</tr>

</tfoot>

</table>

</body>

</html>

#6 单元格合并

a、水平向上的单元格colspan

可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待

b、垂直向上的单元格rowspan

可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待

#注意注意注意:

1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格

2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并

二.CSS介绍：Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式

#1 好处：代码量少；代码解耦合度高；扩展性好

<!DOCTYPE html>

<html>

<head>

<style>

h1,p {

color: pink;

font-size: 24px;

text-align: center;

}

</style>

</head>

<body>

<p>锦瑟无端五十弦，一弦一柱思华年。</p>

<p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>

<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>

<p>此情可待成追忆，只是当时已惘然。</p>

</body>

</html>

#2 CSS语法

#3 CSS的四种引入方式

a、行内式（不推荐使用，没有体现CSS的优势）

<p >Egon是一个非常了不起的人</p>

b、嵌入式

<head>

<style>

p {

color: red;

font-size: 50px;

text-align: center

}

</style>

</head>

c、外部样式表之导入式（不推荐使用，网络差的情况，效果会延迟，导致用户体验不好；先加载html，再导入css）

<head>

<style>

/*形式一：*/

/*@import "css/mystyle.css";*/

/*形式二：*/

@import url("css/mystyle.css");

</style>

</head>

d、外部样式表之链接式（推荐使用；企业开发中使用这种方式；直接将文件拖进html）

<head>

</head>

#4 CSS注释

/*这是注释*/

三.CSS选择器之id选择器

#1、作用：根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性

#2、格式

id名称 {

属性：值;

}

#3、注意点：

a、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的

b、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复

c、引用id一定要加#

d、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等

<!DOCTYPE html>

<html>

<head>

<title>id选择器</title>

<style>

#p1 {

color: red;

}

#p2 {

color: green;

}

#p3 {

color: blue;

}

</style>

</head>

<body>

<p id="p1">大多数人的帅，都是浮在表面的，是外表的帅</p>

<p id="p2">而EGON，不仅具备外表帅，内心更是帅了一逼</p>

<p id="p3">EGON就是我，我就是EGON</p>

</body>

</html>

四.CSS选择器之类选择器

#1、作用：根据指定的类名称，在当前界面中找到对应的标签，然后设置属性

#2、格式：

.类名称 {

属性：值;

}

#3、注意点：

1、类名就是专门用来给某个特定的标签设置样式的

2、每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复

3、引用class一定要加点.

4、类名的命名规则与id的命名规则相同

<!DOCTYPE html>

<html>

<head>

<title>id选择器</title>

<style>

.p1 {

color: red;

}

.p2 {

font-size: 50px;

}

.p3 {

text-decoration: underline;

}

</style>

</head>

<body>

<p class="p1 p2">第一行内容</p>

<p class="p2 p3">第二行内容</p>

<p class="p1 p3">第三行内容</p>

</body>

</html>

小tip：输入‘#000’ --> 左侧点击选择颜色

五.CSS选择器之标签选择器

#1、作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性

#2、格式：

标签名称 {

属性：值;

}

#3、注意点：

1、只要是HTML的标签都能当做标签选择器

2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签

3、标签选择器，无论嵌套多少层都能选中

<!DOCTYPE html>

<head>

<title>标签选择器</title>

p {

color: red;

}

</style>

</head>

<body>

<p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>

<ul>

<li>

<ul>

<li>

<ul>

<li>

<p>这颗心叫做七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

六.CSS选择器之通配符选择器

#1、作用：选择所有标签

#2、格式：

* {

属性：值；

}

#3、注意点：

1、在企业开发中一般不会使用通配符选择器：由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差。

<!DOCTYPE html>

<head>

<title>通配符选择器</title>

* {

color: red;

}

</style>

</head>

<body>

<a href="#">我是超链接</a>

</body>

</html>

七.CSS选择器之后代选择器

#1、作用：找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性

#2、格式：

标签名1 xxx {

属性：值;

}

#3、注意：

a、后代选择器必须用空格隔开

b、后代不仅仅是儿子，也包括孙子、重孙子

c、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class

d、后代选择器可以通过空格一直延续下去

<!DOCTYPE html>

<head>

<title>后代选择器</title>

div p {

color: red;

}

#id1 li p {

font-size: 50px;

}

div ul li a {

font-size: 100px;

color: green;

}

</style>

</head>

<body>

<p>我是body下的段落1</p>

<p>我是div下的段落1</p>

<p>我是div下的段落2</p>

<ul>

<p class="ccc">我是ul>li下的段落1</p>

<p class="ddd">我是ul>li下的段落</p>

</li>

<li>

</li>

</ul>

</div>

<p>我是body下的段落2</p>

</body>

</html>

八.CSS选择器之子元素选择器

#1、作用：找到制定标签的所有特定的直接子元素，然后设置属性

#2、格式：

标签名1>标签名2 {

属性：值;

}

先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

#3、注意：

a、子元素选择器之间需要用>符号链接，并且不能有空格

比如div >p会找div标签的所有后代标签，标签名为">p"

b、子元素选择器只会查找儿子，不会查找其他嵌套的标签

c、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class

d、子元素选择器可以通过>符号一直延续下去

<!DOCTYPE html>

<head>

<title>后代选择器</title>

body>p {

color: green;

}

div>p {

color: red;

}

.aaa>a {

font-size: 100px;

}

div>ul>li>.ddd {

color: blue;

}

</style>

</head>

<body>

<p>我是body下的段落1</p>

<p>我是div下的段落1</p>

<p>我是div下的段落2</p>

<ul>

<p class="ccc">我是ul>li下的段落1</p>

<p class="ddd">我是ul>li下的段落2</p>

</li>

<li>

</li>

</ul>

</div>

<p>我是body下的段落2</p>

</body>

</html>

九.CSS选择器之并集选择器

#1、作用：给所有满足条件的标签设置属性

#2、格式：

选择器1,选择器2 {

属性：值;

}

#3、注意：

1、选择器与选择器之间必须用逗号来链接

2、选择器可以使用标签名称、id、class

<!DOCTYPE html>

<head>

<title>后代选择器</title>

.part1,h1,a {

color: red;

}

</style>

</head>

<body>

</body>

</html>

十.CSS选择器之交集选择器

#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性

#2、格式：

选择器1选择器2 {

属性：值;

}

#3、注意：

1、选择器与选择器之间没有任何链接符号

2、选择器可以使用标签名称、id、class

3、交集选择器在企业开发中并不多见，了解即可，因为：p.part1 完全可以用.part1取代

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

a.part2 {

color: red;

}

</style>

</head>

<body>

</body>

</html>

十一.CSS选择器之序列选择器之同级别

# 同级别

:first-child p:first-child 同级别的第一个

:last-child p:last-child 同级别的最后一个

:nth-child(n) 同级别的第n个

:nth-last-child(n) 同级别的倒数第n个

#1、同级别的第一个

#1.1 示范一

p:first-child {

color: red;

}

代表：同级别的第一个，并且第一个要求是一个p标签

<div>

</div>

这样的话第一个p和div中的第一个p都变成红色，

#1.2 示范二

p:first-child {

color: red;

}

代表：同级别的第一个，并且第一个要求是一个p标签

<h1>w我是标题</h1>

<div>

</div>

这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p

注意点：

:fist-child就是第一个孩子，不区分类型

#2、同级别的最后一个

p:last-child {

color: red;

}

代表：同级别的最后一个，并且最后一个要求是一个p标签

<div>

</div>

这样的话只有6跟7都变红

#3、同级别的第n个

p:nth-child(3) {

color: red;

}

代表：同级别的第3个，并且第3个要求是一个p标签

<div>

</div>

这样的话只有“我是段落2”变红

#4、同级别的倒数第n个

p:nth-last-child(3) {

color: red;

}

代表：同级别的倒数第3个，并且第3个要求是一个p标签

<div>

</div>

这样的话只有“我是段落6.1”和“我是段落5”被选中

十二.CSS选择器之序列选择器之同级别之同类型

:first-of-type 同级别同类型的第一个

:last-of-type 同级别同类型的最后一个

:nth-of-type(n) 同级别同类型的第n个

:nth-last-of-type(n) 同级别同类型的倒数第n个

<div>

</div>

#1、同级别同类型的第一个

p:first-of-type {

color: red;

}

“我是段落1”和“我是段落6.1”被选中

#2、同级别同类型的最后一个

p:last-of-type {

color: red;

}

“我是段落7”和“我是段落6.2”被选中

#3、同级别同类型的第n个

p:nth-of-type(2) {

color: red;

}

“我是段落2”和“我是段落6.2”被选中

#4、同级别同类型的倒数第n个

p:nth-last-of-type(2) {

color: red;

}

“我是段落5”和“我是段落6.1”被选中

十三.CSS选择器之序列选择器之其他

:only-of-type 同类型的唯一一个

:only-child 同级别的唯一一个

#1、同类型的唯一一个

p:only-of-type {

color: red;

}

<div>

</div>

“我是段落7“被选中

#2、同级别的唯一一个

p:only-child {

color: red;

}

<div>

</div>

“我是段落6.1”被选中

十四.CSS选择器之相邻兄弟选择器

#1、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

#2、格式

选择器1+选择器2 {

属性：值;

}

#3、注意点：

1、相邻兄弟选择器必须通过+号链接

2、相邻兄弟选择器只能选中你紧跟其后的那个标签，不能选中被隔开的标签

<!DOCTYPE html>

<head>

<title>后代选择器</title>

/*相邻兄弟选择器*/

h1+p {

color: red;

}

</style>

</head>

<body>

<a href="">有了这个标签，p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>

</body>

</html>

十五.CSS选择器之通用兄弟选择器

#1、作用：给指定选择器后面的所有选择器中的所有标签设置属性

#2、格式：

选择器1~选择器2 {

属性：值;

}

#3、注意点：

1、通用兄弟选择器必须用~来链接

2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签

无论有没有被隔开，都可以被选中

<!DOCTYPE html>

<head>

<title>后代选择器</title>

/*通用兄弟选择器*/

h1~p {

color: red;

}

</style>

</head>

<body>

<a href="">有了这个标签，p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>

</body>

</html>

十六.CSS选择器之属性选择器

#1、作用：根据指定的属性名称找到对应的标签，然后设置属性

该选择器，最常用于input标签

#2、格式与具体用法：

[属性名]

其他选择器[属性名]

[属性名=值]

[属性名^=值]

[属性名$=值]

[属性名*=值]

例1：找到所有包含id属性的标签

[id]

例2：找到所有包含id属性的p标签

p[id]

例3：找到所有class属性值为part1的p标签

p[class="part1"]

例4：找到所有href属性值以https开头的a标签

a[href^="https"]

例5：找到所有src属性值以png结果的img标签

img[src$="png"]

例6：找到所有class属性值中包含part2的标签

[class*="part"]

<!DOCTYPE html>

<head>

<title>后代选择器</title>

[id] {

color: red;

}

p[id] {

font-size: 30px;

}

p[class="part1"] {

color: green;

}

a[href^="https"] {

font-size: 50px;

}

img[src$="png"] {

width: 100px;

}

[class*="part"] {

text-decoration: line-through;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">http://www.baidu.com</a>

<a href="https://www.baidu.com">https://www.baidu.com</a>

</body>

</html>

十七.CSS选择器之a标签伪类选择器

#1、作用：常用的几种伪类选择器。

#1.1 没有访问的超链接a标签样式：

a:link {

color: blue;

}

#1.2 访问过的超链接a标签样式：

a:visited {

color: gray;

}

#1.3 鼠标悬浮在元素上应用样式：

a:hover {

background-color: #eee;

}

#1.4 鼠标点击瞬间的样式：

a:active {

color: green;

}

#1.5 input输入框获取焦点时样式：

input:focus {

outline: none;

background-color: #eee;

}

#2 注意：

1 a标签的伪类选择器可以单独出现，也可以一起出现

2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效

link，visited，hover，active

3 hover是所有其他标签都可以使用的

4 focus只给input标签使用

<!DOCTYPE html>

<head>

<title>后代选择器</title>

a:link {

color: #cccccc;

}

a:visited {

color: #55BBBB;

}

a:hover {

color: green;

}

a:active {

color: red;

}

input:hover {

outline: none;

background-color: #cccccc;

}

</style>

</head>

<body>

</body>

</html>

十八.CSS选择器之伪元素选择器

#1、常用的伪元素。

#1.1 first-letter：杂志类文章首字母样式调整

例如：

p:first-letter {

font-size: 48px;

}

#1.2 before

用于在元素的内容前面插入新内容。

例如：

p:before {

content: "*";

color: red;

}

在所有p标签的内容前面加上一个红色的*。

#1.3 after

用于在元素的内容后面插入新内容。

例如：

p:after {

content: "?";

color: red;

}

在所有p标签的内容后面加上一个蓝色的?。

<!DOCTYPE html>

<head>

<title>后代选择器</title>

p:first-letter {

font-size: 50px;

}

/*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/

a::after {

content: "?";

color: red;

}

a:before {

content: "-";

color: green;

}

</style>

</head>

<body>

<p>英雄不问出处，流氓不论岁数</p>

<a href="#" class="help">老男孩是干什么的</a>

</body>

</html>

十九.CSS三大特性之继承性

#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性

#2、注意：

1、只有以color、font-、text-、line-开头的属性才可以继承

2、a标签的文字颜色和下划线是不能继承别人的

3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大

ps:打开浏览器审查元素可以看到一些inherited from。。。的属性

#3、应用场景：

通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

<!DOCTYPE html>

<head>

<title>后代选择器</title>

div {

color: red;

font-size: 50px;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

二十.CSS三大特性之层叠性

#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果

#2、注意：

1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，

才会发生层叠性

ps：通过谷歌浏览器可以查看到，一些属性被划掉了

<!DOCTYPE html>

<head>

<title>后代选择器</title>

p {

color: red;

}

.ppp {

color: green;

}

</style>

</head>

<body>

</body>

</html>

二十一.CSS三大特性之优先级

#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

#2、优先级

整体优先级从高到底：行内样式>嵌入样式>外部样式

行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级

1、大前提：直接选中 > 间接选中(即继承而来的)

#1、以下为直接选中

#id1 {

color: red;

}

.ppp {

color: green;

}

p {

color: blue;

}

</style>

#2、以下为间接选中

ul {

color: yellow;

}

</style>

<ul>

<li>

<p id="id1" class="ppp">我是span</p>

</li>

</ul>

2、如果都是间接选中，那么谁离目标标签比较近，就听谁的

<!DOCTYPE html>

<head>

<title>后代选择器</title>

/*离目标近*/

li {

color: red;

}

/*离目标远*/

ul {

color: yellow;

}

</style>

</head>

<body>

<ul>

<li>

<p id="id1" class="ppp">我是span</p>

</li>

</ul>

</body>

</html>

3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的

<!DOCTYPE html>

<head>

<title>后代选择器</title>

p {

color: red;

}

/*同样都是标签选择器，谁写在后面谁生效*/

p {

color: yellow;

}

</style>

</head>

<body>

<ul>

<li>

<p id="id1" class="ppp">我是span</p>

</li>

</ul>

</body>

</html>

4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠

id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

<!DOCTYPE html>

<head>

<title>后代选择器</title>

/*打开浏览器依次去掉优先级高的来进行验证*/

#id1 {

color: red;

}

.ppp {

color: green;

}

p {

color: blue;

}

* {

color: yellow;

}

li {

color: #7e1487;

}

</style>

</head>

<body>

<ul>

<li>

<p id="id1" class="ppp">我是span</p>

</li>

</ul>

</body>

</html>

5、优先级之!important

#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。

#2、注意：

1、!important只能用于直接选中，不能用于间接选中

2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升

3、!important必须写在属性值分号的前面

<!DOCTYPE html>

<head>

<title>后代选择器</title>

/*打开浏览器依次去掉优先级高的来进行验证*/

#id1 {

color: red;

}

.ppp {

color: green;

}

p {

color: blue;

}

* {

color: yellow !important;

}

li {

color: #7e1487;

}

</style>

</head>

<body>

<ul>

<li>

<p id="id1" class="ppp">我是span</p>

</li>

</ul>

</body>

</html>

6、优先级之权重计算

#1、强调

如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级

#2、计算方式

#1、id数多的优先级高

#2、id数相同，则判定类数多的优先级高

#3、id数、class数均相同，则判定标签数多的优先级高

#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高

<!DOCTYPE html>

<head>

<title>后代选择器</title>

#id1 #id2 #id3 .ppp{

color: red;

}

#id2 #id3.aaa p{

color: purple;

}

#id1.ccc>.bbb>.aaa>p {

color: pink;

}

#id1 .aaa .ppp {

color: green;

}

#id2 .aaa p {

color: yellow;

}

div ul li p {

color: blue;

}

div ul p {

color: cyan;

}

</style>

</head>

<body>

</li>

</ul>

</div>

</body>

</html>

原文地址：https://www.cnblogs.com/zhangyaqian/p/py20180525.html

时间： 2024-08-04 17:40:54

25 May 18 HTML-Tabel标签 CSS介绍 CSS选择器

25 May 18 HTML-Tabel标签 CSS介绍 CSS选择器的相关文章

CSS介绍、选择器

是HTML的注释标签js，css注释

10.23 linux任务计划cron10.24chkconfig工具10.25 systemd管理服务10.26 unit介绍 10.27 target介绍

前端之CSS介绍

HTML table、form表单标签的介绍

CSS介绍

7-[CSS]-css介绍，引入方式

html表单和css介绍

前端学习之路-CSS介绍，Html介绍，JavaScript介绍