HtmL5 和CSS一些常见总结
前端(通常指的是用户能够看到)网页通常是由三部分组成：
1.html:也是前端网页基本框架结构，类似于骨架一样的作用
2.CSS: 也叫层叠样式表，就是为美化界面而存在
3.Javascript: 使页面具有动态的效果(包括与用户的一个交互)
一&二.Html
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。
所谓超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。
所谓标记Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。
- HTML发展简史【了解】
- HTML 1.0在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML5 —— 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML5的支持。
1.1.2 HTML的组成
HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。
1）标签
一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。 例如：
<h1>今天是个好日子</h1>
在HTML中，<h1>标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。
2）属性
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value’。例如：
<h1 align="center">今天是个好日子!!!</h1>
在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示 居中 。
属性也可当做是html原始一种修饰界面的方式之一
1.2Html界面构造
-
<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。 -
<html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。 -
<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。关于<head>元素的内容。目前主要了解两个标签：-
<meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字,避免页面乱码问题。 -
<title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
-
-
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。body也是代码主体部分，也是希望显示的界面内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个HTML页面</title>
</head>
<body>
</body>
</html>
整个html界面包含head和body两部分组成,学习html时主要学习的东西便是body中一些标签的使用，以及标签中附带的一些属性。
1.3 一些常见标签
标签的构成：
<标签名 属性名=属性值>文本内容</标签名>
- P标签 ：段落标签,其前后都会被空出
- :注释标签
- b标签: 强调标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个HTML页面</title>
</head>
<body>
<p>这是一个段落标签！</p>
<p>这是第二段标签</p>
<br> <!--注释部分，br表示换行标签-->
这是其他内容
</body>
</html>
1.3.1 文本标签
使用文本内容标签设置文字基本样式。
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低 |
| hr | 表示段落级元素之间的主题转换，一般显示为水平线 |
| li | 表示列表里的条目。 |
| ul | 表示一个无序列表，可含多个元素，无编号显示。 |
| ol | 表示一个有序列表，通常渲染为有带编号的列表 |
| em | 表示文本着重，一般用斜体显示 |
| strong | 表示文本重要，一般用粗体显示 |
| font | 表示字体，可以设置样式（已过时） |
| i | 表示斜体 |
| b | 表示加粗文本 |
1.3.2标签嵌套：
<p><b>这是第三段，也是强调内容！</b></p>
顾名思义就是在一个标签中去镶嵌另一个标签，这种在html中用得也是蛮多的
1.4两种重要标签:块级和行内
-
块级元素：
前后独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如
<p>，<hr>，<li>，<div>等。
<li>这是一个标签</li>
<li>这还是一个块级标签</li>
<li>这也是一个块级标签</li>
效果
-
行内元素
不用换行,行内元素通常会出现在块级元素中，进行一些文本的显示。
<span>这是一个行内</span>
<span>这是第二个行内元素！</span>
两个常用的块级和行内标签:
- 块级: div标签，一种通用容器标签，通常用于文本中的一些个性的一些设置
- 行内:span标签,是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。
div和span标签在布局中有着举足轻重的作用
1.5 标签属性
属性是html中一大重要的组成，强调属性的格式和作用
**概述:**标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。
-
属性名：同一个标签中，属性名不得重复。
-
大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
-
引号：双引号是最常用的，不过使用单引号也没有问题。
-
常用属性：
| 属性名 | 作用 |
|---|---|
| class | 定义元素类名，用来选择和访问特定的元素 |
| id | 定义元素唯一标识符，在整个文档中必须是唯一的 |
| name | 定义元素名称，可以用于提交服务器的表单字段 |
| value | 定义在元素内显示的默认值 |
| style | 定义CSS样式，这些样式会覆盖之前设置的样式 |
1.6新闻案例分析
实现效果：
基本布局分析：
1.6.2 实现方法
div样式布局
文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。
在head标签中，通过style标签加入样式。
基本格式：
格式:
<style>
标签名{
属性名:属性值;
}
</style>
多个属性名格式：
<style>
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
</style>
div的多样式：
一个属性名可以含有多个值，同时设置多样式。
格式:
<style>
标签名{
属性名:属性值1 属性值2 属性值3;
}
</style>
tips:
为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面,也就是通常会把显示的基本骨架描绘出来，再慢慢去增添内容。
1.先把基本布局框调出
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新闻案列</title>
<style>
li{
display: inline; //内联样式无宽高
display: inline-block; //内联样式，有宽高
}
div{
border: 1px solid blue;
}
</style>
</head>
<body>
<div>left</div>
<div>center</div>
<div>right</div>
</body>
</html>
发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？
使用class(类)的值，格式：
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。
2.浮动布局和清除
主体部分分为三部分，但每个div又独占一行，想要使用div布局，就还需要加入浮动属性
- 定义
float: 指定一个元素可沿其左侧或右侧放置，使用了该属性的元素(通常放在左侧或右侧),允许文本环绕该属性流动，且该元素移除，其他部分元素依然正常使用。
当超出返回时，其浮动在其周围的块级元素会进行自动换行操作。在设计整体框架浮动时，需要把边框线所占的比例也考虑进行才能成功浮动。
.left{
font-family: 楷体;
font-size: 20px;
width: 20%;
float: left;
height: 600px;
}
.center{
font-family: 楷体;
font-size: 20px;
width: 60%;
float: left;
height: 600px;
}
.right{
font-family: 楷体;
font-size: 20px;
width: 19%;
float: left;
height: 600px;
}
注意style中进行注释时需要前后进行双向闭合
li{ display: inline; /*内联样式无宽高*/ display: inline-block; /*内联样式，有宽高*/ }
1.7.3 图片标签&&超链接标签
使用图片标签时路径尽量选用相对路径，避免造成不显示问题
| 标签名 | 作用 | 备注 |
|---|---|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
其他属性：
| 属性名 | 作用 | 备注 |
|---|---|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 |
| 标签名 | 作用 | 备注 |
|---|---|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。 |
| 属性名 | 作用 |
|---|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
去掉下划线
根据某些样式的布局需求，去除下划线更为美观。
a {
text-decoration:none; // none 表示不显示
}
<a href="demo01.html">跳转</a>
a:hover{ /*鼠标悬浮时的样式控制*/
color: red;
}
<a href="demo01.html" target="_blank">跳转
<img src="../Code_images/ad1.jpg" alt="图片找不到了" title="可点击">
</a>
使用图片img标签的src属性时，尽量采用相对路径，避免无法显示问题。还有就是使用时反斜线的朝向(向右)!
hr下滑线标签属于块级div内部的一个标签
具体实现
1.8 顶部实现
1.8.1 使用标签
- 使用div标签，设置布局，背景和浮动等。
- 基本文本标签
- 图片标签
- 超链接标签
1.8.2 实现步骤
- 创建初始页面，拷贝图片等素材。
- 整体布局。
- 实现顶部条（图片）。
- 实现导航条（图片）。
- 实现左侧分享区域（图片）。
- 实现中间正文区域（文本+图片）。
- 实现右侧广告区域（图片）。
- 实现底部页脚（链接）。
1.8.3 实现顶部条
HTML代码
<div class="top_bar">
<img src="../img/j1.png">
</div>
样式代码
img{
width: 100%;
}
效果如下：
1.8.4 实现导航条
HTML代码
<div class="nav_bar">
<img src="../img/j2.png" width="100%">
</div>
<!-- 加入分割线 -->
<hr size="1"/>
样式代码
hr {
color: lightgrey;
size: 1px;
}
效果如下：
1.8.5 实现左部分享
HTML代码
<div class="left">
<img src="../img/j3.png" />
</div>
效果如下
其余部分便是也类似
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新闻案列</title>
<style>
/* div{
border: 1px solid blue;
}*/
/*左侧分享*/
.left{
font-family: 楷体;
font-size: 20px;
width: 20%;
float: left;
height: 600px;
}
/*中间文本*/
.center{
font-family: 楷体;
font-size: 20px;
width: 60%;
float: left;
/*height: 600px;*/
}
/*右侧广告*/
.right{
font-family: 楷体;
font-size: 20px;
width: 19%;
float: left;
height: 600px;
}
.footer{
font-family: 楷体;
font-size: 20px;
/*border: blue solid 5px;*/
clear: both;/*清除浮动避免受之前元素影响*/
text-align: center;
background-color: cornflowerblue;
}
a{
text-decoration: none;
color: black;
}
a:hover{ /*鼠标悬浮时的样式控制*/
color: red;
}
hr{
color: black;
size: 1px;
}
</style>
</head>
<body>
<div class="top">
<img src="../Code_images/j1.png" alt="图片未找到" width="100%">
</div>
<hr size="1">
<div class="nvibar">
<img src="../Code_images/j2.png" alt="图片未找到" width="100%" title="导航栏">
<hr>
</div>
<div class="left">
<img src="../Code_images/j3.png" alt="" title="左侧导航">
</div>
<div class="center">
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
<hr>
<div>
<font color="gray" size="3">
<em>作者 2019-11-11 11:11:11</em>
</font>
</div>
<div>
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
</div>
<p>
<strong> 三、芝麻分600以上福利之国际驾照。</strong>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
</p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
</p>
<img src="../Code_images/1.jpg" width="80%" alt="芝麻信用">
</div>
<div class="right">
<img src="../Code_images/ad1.jpg" alt="美女" width="75%">
<img src="../Code_images/ad2.jpg" alt="" width="75%">
</div>
<div class="footer">
<hr>
<a href="demo01.html" target="_blank">跳转
<a href="#">关于黑马 </a>
<a href="#">帮助中心 </a>
<a href="#">开放平台 </a>
<a href="#">诚聘英才 </a>
<a href="#">联系我们 </a>
<a href="#">法律声明 </a>
<a href="#">隐私政策 </a>
<a href="#">知识产权 </a>
<a href="#">廉正举报 </a><!--#号表示原地跳转-->
</a>
</div>
</body>
</html>
hr下滑线标签属于块级div内部的一个标签
总结： 写一个前端页面，就像修房子一样。想把基本框架搭建出来，再在框架的基础上继续搭建，而网页基本框架就是布局区域。
二.表单及盒子模型
2.1 表单
之所以把表单单独列出来，是因为后续进行数据交互时经常使用表单相关的
form标签
| 属性名 | 作用 | 备注 |
|---|---|---|
| action | 处理此表单信息的Web服务器的URL地址 | |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全之前input中写过的一些内容 | HTML5 |
<form action="#" method="post" autocomplete="on">
用户名：<input type="text" name="username">
<button type="submit" >提交</button>
</form>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eccK4RDh-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\9.产生效果.png)]
2.2 表单元素入门
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
| 标签名 | 作用 | 备注 |
|---|---|---|
| **label ** | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素的id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型 |
1）简单的文本输入框
-
label标签：表单的说明。
-
input标签：输入控件。
-
type属性：表示输入类型，text值为普通文本框
-
text：普通文本
-
password：密码框
-
email: 以@结尾的邮箱框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FJlIIMI-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\10.邮箱效果.png)]
-
radio：单选框
-
checkbox：复选框
-
HTML5新增的type值
属性值 作用 备注 date HTML5 用于输入日期的控件 年，月，日，不包括时间 time HTML5 用于输入时间的控件 不含时区 datetime-local HTML5 用于输入日期时间的控件 不包含时区 number HTML5 用于输入浮点数的控件 range HTML5 用于输入不精确值控件 max-规定最大值
min-规定最小值
step-规定步进值
value-规定默认值search HTML5 用于输入搜索字符串的单行文本字段 可以点击 x清除内容tel HTML5 用于输入电话号码的控件 url HTML5 用于编辑URL的字段 可以校验URL地址格式
-
-
id属性：表示标签唯一标识
-
name属性：表示标签名称
-
value属性：表示标签数据值
-
placeholder：默认提示信息
-
required: 加上此属性则需要必填
-
代码实现：
<label for="username">用户名：</label>
：<input type="text" name="username" id="username">
<button type="submit" >提交</button>
label在于说明元素，实际作用并不大，且要与后续input标签id对应才行。
HTML5新增属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| placeholder | 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 | 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。 |
| required | 这个属性指定用户在提交表单之前必须为该元素填充值 | 1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用 |
| autocomplete | 自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 | 1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全 |
2.3 更多表单元素
| 标签名 | 作用 | 备注 |
|---|---|---|
| select | 表单的控件，下拉选项菜单 | 与option配合实用 |
| optgroup | option的分组标签 | 与option配合实用 |
| option | select的子标签，表示一个选项 | |
| textarea | 表示多行纯文本编辑控件 | rows表示行高度， cols表示列宽度 |
| fieldset | 用来对表单中的控制元素进行分组(也包括 label 元素) | |
| legend | 用于表示它的fieldset内容的标题。 | fieldset 的子元素 |
fieldset+legend效果
<fieldset>
<legend>性别选择</legend>
<input type="radio" value="man" name="Sex">男
<input type="radio" value="woman" name="Sex">女
<select name="choice" id="2">
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
<button type="submit" >提交</button>
</fieldset>
textarea效果，col(行)近似相当于宽,row(行)近似相当于高(列宽行高)
<div>
<label for="Desc">个性宣言： </label>
<textarea name="Desc_self" id="Desc" cols="30" rows="5" placeholder="写下你的个性签名"></textarea>
</div>
总结： html标签的整体总结就是得多用，用多了自然便也就熟了。
二.CSS
概述： CSS也称作层叠样式表，其作用便是对于html的一个美观，算是对html的一种美观。
1.CSS的基本构成
Css的基本构成:选择器+声明
选择器{
属性名:属性值；
属性名2:属性值2;
}
之前的html页面中已经进行了常规的使用，这里就不做过多赘述。
2. 使用方法
2.1 内联样式
- 标签中内部(不推荐)
- 在head中内联
2.2 外联样式
在外面单独定义一个”.css“的文件，再在head标签中通过link标签指定路径进行连接应用。
<head>
<meta charset="UTF-8">
<title>Css基本教学</title>
<style>
h3{
background-color:orange;
}
</style>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<h1 style="color: blue; font-family: 楷体; background-color: yellow; border: 1px solid black;">
标签内联
</h1>
<textarea name="u2" id="u2" cols="20" rows="5">
这是外联样式！
</textarea>
<h3>
这是内联样式。
</h3>
</body>
2.3选择器(！！！)
作用概述： 选定html中指定元素进行修饰，而学习选择器的目的便是为了更好的选择想要修饰元素，然后告诉浏览器那些是自己选择的元素。
选择器的分类：
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
| 用得较多 | 类选择器 | . | 基于class属性值匹配元素 | .center{ } |
| ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
| 属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
| 伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果,通常用于动态效果展示 | a : hover{ } |
| 组合选择器 | 后代选择器 | 空格 | 使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 | .top li{ } |
| 子级选择器 | > | 使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素 | .top > li{ } | |
| 同级选择器 | ~ | 使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素 | .l1 ~ li{ } | |
| 相邻选择器 | + | 使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素 | .l1 + li{ } | |
| 通用选择器 | * | 匹配文档中的所有内容 | *{ } |
1）元素选择器
页面元素：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
选择器：
选择所有li标签,背景变成蓝色
li{
background-color: aqua;
}
2）类选择器
页面元素：
<div>
<ul>
<li class="ulist l1">List item 1</li>
<li class="l2">List item 2</li>
<li class="l3">List item 3</li>
</ul>
<ol>
<!--class 为两个值-->
<li class="olist l1">List item 1</li>
<li class="olist l2">List item 2</li>
<li class="olist l3">List item 3</li>
</ol>
</div>
选择器：
选择class属性值为l2的,背景变成蓝色
.l2{
background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
color: wheat;
}
3）ID选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
#tow{
background-color: aqua;
}
效果如图：
4）通用选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
所有标签
*{
background-color: aqua;
}
2.2.2 属性选择器
页面元素：
<ul class="l1">
<li >List item 1</li>
<li >List item 2</li>
<li >List item 3</li>
</ul>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
<p class="">
p item
</p>
选择器和效果图，示例1
[属性名]{ }
选择器和效果图，示例2
标签名[属性名]{ }
选择器和效果图，示例3
标签名[属性名='属性值']{ }
2.2.3 伪类选择器
伪类选择器指的是元素处于特定效果时，所要显示出效果。如:一些元素被鼠标悬停时所要显示的效果。
格式:
标签名:伪类名{}
伪类的顺序:
1.link
2.visited ：指的是当前已访问的界面。
3.hover
4.active:点开新界面后原始界面该元素的反应
一般按照这个顺序否则可能失效
HTML 代码 ：
CSS 代码 ：
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
color: red;
}
2.2.4 组合选择器
页面元素：
<div>
<ul class="l1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
</ul>
</div>
1）后代选择器
选择器：
.l1 li{
background-color: aqua;
}
2）子级选择器
选择器：
.l1 > li{
background-color: aqua;
}
3）同级选择器
选择器：
.l1 ~ li{
background-color: aqua;
}
4）相邻选择器
选择器：
.l1 + li{
background-color: aqua;
}
2.4 总结
- CSS的引入方式有三种，建议使用外部样式表。
- 注释类似于java多行注释。
- 选择器是CSS的重要部分：
- 基本选择器：可以通过元素，类，id来选择元素。
- 属性选择器：可以通过属性值选择元素
- 伪类选择器：可以指定元素的某种状态，比如链接
- 组合选择器：可以组合基本选择器，更加精细的划分如何选择
3.表格Table
由行和列组成的数据称之为表格。
实际进行设计时，当table标签镶嵌在块中时，宽度属性尽量调成100%，能够避免很多问题。
2）表格标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| table | 表示表格，是数据单元的行和列的两维表 | 容器，默认无样式 |
| tr | table row，表示表中单元的行 | |
| td | table data，表示表中一个单元格 | |
| th | table header，表格单元格的表头，通常字体样式加粗居中 |
通常tr与td搭配使用才能产出表格样式，不然不行
<table border="1px solid black;">
<tr>
<th rowspan="3">Group</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Jack</td>
<td>Joc</td>
</tr>
<tr>
<td>Mike</td>
<td>Chen</td>
</tr>
</table>
需要注意的便是关于跨行以及跨列的操作，即colspan和rowspan一般来说在设置th时采用。
4.盒子模型
盒子模型只针对块级元素起作用，像img这种非块级元素在使用盒子模型相关属性时需要转换为块级。
display:block
.top > img{ display: block; margin: 0px auto; border: 1px solid red; }
盒子模型算是元素的一种布局方式，由内边距 +外边距+元素+边框组成
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。
进行边距设置时，通常采用的方向为：上 右 下 左
外边距
单独设置边框的外边距，设置上、右、下、左方向：
margin-top
margin-right
margin-bottom
margin-left
值含义：
-
一个值时
/* 所有 4 个外边距都是 10px */ margin:10px; -
两个值时
/* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */ margin:10px 5px; margin:10px auto; auto 浏览器自动计算外边距，具有居中效果。 -
三个值时
/* 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px*/ margin:10px 5px 15px; -
四个值时
/*上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px*/ margin:10px 5px 15px 20px;
内边距
与外边距类似，单独设置边框的内边距，设置上、右、下、左方向：
padding-top
padding-right
padding-bottom
padding-left
9987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
