HTML和使用CSS，CSS选择器

最新推荐文章于 2022-05-09 16:25:53 发布

qq_53587164

最新推荐文章于 2022-05-09 16:25:53 发布

阅读量168

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_53587164/article/details/123128028

版权

1.表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

案例：

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

2.表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

1.border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。

1.1cellspacing：单元格与边框间距。

cellspacimg单元格衬距。指该单元格里的内容与边框的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。

2.width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。

3.height：表格的高度，取值方法同width。提

4.bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。

5.background：表格的背景图。

6.bordercolor：表格的边框颜色。

7.align：表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）

3. 表格表头

表格的表头使用 <th> 标签进行定义。

案例：

<table border="1">

 <tr>

<th>Header 1</th> 

</tr> 

<tr>

 <td>row 1, cell 1</td> 

<td>row 1, cell 2</td> 

</tr> 

</table>

4.表格标题

表格标题：caption

案例：

<table>

<caption>我是表格标题</caption>

</table>

5.合并单元格

rowspan 合并行

colspan 合并列

案例：

 <table style="text-align: center;" border="1" cellspacing="0" cellpadding="0">

  <tr>

  <th>姓名</th>

  <th>年龄</th>

  <th>性别</th>

  </tr>

  <tr>

  <td>张三</td>

  <td  colspan=2>18</td>

  <td>男</td>

  </tr>

  <tr>

  <td>李四</td>

  <td>19</td>

  <td>女</td>

  </tr>

  <tr>

  <td>王五</td>

  <td>20</td>

  <td>男</td>

  </tr>

 </table>

操作方法：1.。确认跨行/列 2.先上后下，先左后右 3.删除个数

6.表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

6.文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

案例：

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

1.密码字段

密码字段通过标签<input type="password"> 来定义:

<form action="www.baidu.com" method="post">

账号：<input type="text" name="" value="" />

密码：<input type="password" name="" value="" />

<input type="submit" value="提交"/>

</form>

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项案例：al

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

2.复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

案例：

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

3.提交按钮(Submit Button)

<input type="file"> 文件

定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

label标签的使用
1.用label标签直接包裹input标签就可以了
2.如果label标签里面有许多个表单，想定位到某个，可以通过for...id的格式来进行

文本域控件：<textarea>...</textarea>双标签

作用：可以实现文本的多行输入

留言板：<textarea>请输入留言</textarea>

1

7.下拉菜单：

代码结构：

 <select>

      <option>选项1</option>

      <option>选项2</option>

      <option>选项3</option>

      ...

    </select>

3.表单域

常用属性：

1. Action

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

2. method

用于设置表单数据的提交方式，其取值为get或post。

3. name

用于指定表单的名称，以区分同一个页面中的多个表单。

2.如何使用CSS

有以下几种方式：

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件

1.内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

2.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head>

3.外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

4.设置背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

实例：

<body style="background-color:yellow;">

<h2 style="background-color:red;">这是一个标题</h2>

 <p style="background-color:green;">这是一个段落。</p>

</body>

5.设置，字体, 字体颜色，字体大小

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

实例：

<h1 style="font-family:verdana;">一个标题</h1>  

<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

6. 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

实例：

<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>

3. CSS 组合选择符

	组合选择符说明了两个选择器之间的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

1.后代选择器

后代选择器用于选取某元素的后代元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div p
{
    background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

效果如下：

2.子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

以下实例选择了<div>元素中所有直接子元素 <p> ：

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div>p
{
    background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

效果如下：

3.相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div+p
{
    background-color:yellow;
}
</style>
</head>
<body>

<h1>文章标题</h1>

<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>

<p>DIV 之后的第一个 P 元素。</p>

<p>DIV 之后的第二个 P 元素。</p>

</body>
</html>

效果如下：

4.后续兄弟选择器（普通兄弟选择器）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div~p
{
    background-color:yellow;
}
</style>
</head>
<body>
    
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

效果如下：