css控制器

发布时间：2023-09-06 01:56责任编辑：郭大石关键词：暂无标签

一.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;

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;

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 >大多数人的帅，都是浮在表面的，是外表的帅</p>

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

<p >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 {

}

.p3 {

text-decoration: underline;

}

</style>

</head>

<body>

<p >第一行内容</p>

<p >第二行内容</p>

<p >第三行内容</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 {

}

div ul li a {

color: green;

}

</style>

</head>

<body>

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

<div >

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

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

<ul>

<li >

<p >我是ul>li下的段落1</p>

<p >我是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 {

}

div>ul>li>.ddd {

color: blue;

}

</style>

</head>

<body>

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

<div >

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

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

<ul>

<li >

<p >我是ul>li下的段落1</p>

<p >我是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>

<h1>我是标题</h1&

css控制器

知识推荐