HTML标签设计初衷为定义文档内容，通过使用标签来表达格式化信息。由于浏览器不断将新的html标签和属性添加到html规范中，而标签能实现的样式控制比较单一，导致程序员工作量增大，浪费了人力和时间成本。万维网联盟在html4外创造出样式（style）。CSS（层叠样式表）的出现解决了内容与表现分离的问题。
外部样式表存储在CSS文件中，可以同时控制多重页面的样式和布局。如果需要全局更新，只需简单的改变样式，网站中所有元素均会更新。
多个样式定义可以层叠为一个。样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
从CSS作用的区域分为行内样式、内嵌样式和外部样式。行内样式由HTML标签的style属性设置，行内样式作用于单个标签。内嵌样式作用于单个HTML文件。外部样式作用于所导入的任何HTML文档。
内嵌样式
内嵌样式置于head元素里，以<style type="text/css"></style>书写，<style>标签用于为HTML定义样式，type属性是必须的，其唯一值为text/css。style内包含选择器。
style元素的内容由CSS规则构成，CSS规则由两个主要的部分构成：选择器和样式声明
selector {declaration1; declaration2; ...}
选择器是需要改变样式的HTML元素，每个声明由一个属性和一个值组成。
例如：
p {color: green; font-size: 14px; }
<html>
<head>
<meta charset="utf-8" />
<title>登录界面</title>
<style type="text/css">
h1 {color :red; font-size:14px;}
</style>
</head>
<body>
<h1>Baiduu</h1>
</body>
</html>
颜色值
参考https://www.w3school.com.cn/tags/html_ref_colornames.asp
多单词值
若值为多单词值，要给值加引号
选择器分组
分组的选择器可以分享共同的声明，可以用逗号将选择器隔开
h1,h2,h3{color: red;}
1.子代选择器
父代名>子代名{属性名：属性值；}，父代名与子代名可以是各种类型的选择器
选择满足连续的父代与子代关系的子代改变声明的样式
<html>
<head>
<meta charset="utf-8" />
<title>登录界面</title>
<style type="text/css">
h1>strong{color :red; font-size:14px;}
</style>
</head>
<body>
<h1>
Bai
<strong>duu</strong>
</h1>
<p>
Bai
<strong>duu</strong>
</p>
</body>
</html>
2.后代选择器
父代名 子代名{属性名：属性值；}
选择满足相邻的父代与子代关系的子代改变声明样式
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul li{color :red; font-size:14px;}
</style>
</head>
<body>
<p>
<ul>
<li>
<ul>
<li>
套娃
<li>
</ul>
</li>
<li>hhhhh</li>
</ul>
</p>
</body>
</html>
3.标签选择器
标签{样式}
4.ID选择器
id选择器为标有特定id的HTML元素指定特定的样式。id选择器以“#”定义。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#exam {color:aqua;}
</style>
</head>
<body>
<p id="exam">考试加油</p>
</body>
</html>
5.类选择器
类选择器以一个点号显示。
.class_name{样式规则}或 html元素.class_name(此时只对html元素内的class_name改变样式)
HTML标签内使用class="class_name"属性来使用样式
<html>
<head>
<meta charset="utf-8" />
<title>登陆界面</title>
<style type="text/css">
.locate_center {text-align:center;}
</style>
</head>
<body>
<h1 class="locate_center">Baidu</h1>
<p class="locate_center">登录</p>
</body>
</html>
6.属性和值选择器
对带有指定属性的HTML元素设置样式
<html>
<head>
<meta charset="utf-8" />
<title>登陆界面</title>
<style type="text/css">
[style] {text-align:center;}
</style>
</head>
<body>
<h1 style="color:aquamarine">Baidu</h1>
<p>登录</p>
</body>
</html>
创建样式
上节以内嵌样式为例，介绍了样式的一些基础知识，这一节为如何创建插入样式表：外部样式表、内嵌样式、行内样式，以及样式之间的优先级。
1.外部样式表
当样式需要应用于很多页面时，选择使用外部样式表。当html文件使用一个外部样式表时，需要用<link>标签连接到外部样式表。如下
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
外部样式表文件只能包含样式选择器和规则，不能包含其他任何html标签和JavaScript程序，文件以.css为扩展名。
html文件如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<h1>Baidu</h1>
<p>登录</p>
</body>
</html>
外部样式表CSS文件如下
p {color:red;text-align:center}
h1 {text-align:center}
2.内嵌样式
单个文档需要特殊的样式时，使用内部样式表。使用<style>标签在文中定义，上一节中的举例全部为内嵌样式。
3.行内样式
即使用html标签和style属性。style属性可以包含任意的CSS属性。
4.多重样式（样式优先级）
当相同的属性被不同的样式表重复定义时，行内优先级最高、内嵌样式其次、外部样式优先级最低。
样式属性
样式表中可以将属性赋予不同的合法值来构建不同的样式
1.背景
background属性可定义图像滚动、背景颜色、背景图片、背景起始位置、背景图像重复
建议使用简写属性background，按顺序定义各属性值
https://www.w3school.com.cn/css/css_background.asp
2.文本
文本属性可定义颜色、字符间距、对齐、缩进等
https://www.w3school.com.cn/css/css_text.asp
3.字体
font为简写属性，可在一个声明中设置所有字体属性
https://www.w3school.com.cn/css/css_font.asp
4.链接
链接有不同的状态，可根据状态设置样式
https://www.w3school.com.cn/css/css_link.asp
5.列表
CSS列表可以设置列表项的标志
https://www.w3school.com.cn/css/css_list.asp
6.表格
https://www.w3school.com.cn/css/css_table.asp
7.轮廓
https://www.w3school.com.cn/css/css_outline.asp
盒子模型
基础知识
| 定义 | 说明 |
|---|---|
| 元素内容 | 元素框最内部分的实际内容 |
| 边框 | 元素框 |
| 填充 | 元素框中实际内容到框的区域 |
| 边界 | 盒子边框与其他盒子边框间的区域 |
| 内边距 | 包围实际内容的背景 |
| 外边距 | 透明不遮挡实际元素，可以是负值 |
1.内边距
padding属性定义内边距，简化规则如下
| 缺失 | 使用 |
|---|---|
| 左 | 右 |
| 下 | 上 |
| 右 | 上 |
h1 {padding:100px}
2.边框
元素的边框是围绕元素内容和内边距的一条或多条线。每个边框右三个方面：宽度、样式和颜色，每个边框也有这三个属性。border属性用于同时设置4个边框的属性。
h1 {padding:20px;text-align:center;border: 50px solid blue}
3.外边距
margin属性设置外边距，margin简化规则与内边距相同
h1 {padding:20px;text-align:center;border: 50px solid blue;margin:10px;}
4.外边框合并
当两个垂直框外边距相遇时，将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距中高度较大者。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
DIV标签
https://www.w3school.com.cn/tags/tag_div.asp
DIV标签定义文档中的分区和节，将文档分割成独立的、不同的部分，可用作严格的组织工具。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
Class属性用于元素组，可以标记一组div元素，ID用于标识为一个一个div标签。
html文件
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div class="green">
<h1>baidu</h1>
<p>登录</p>
</div>
<div class="green">
<h1>tecent</h1>
<p>登录</p>
</div>
<div id="flower">
<h1>bilibili</h1>
<p>登录</p>
</div>
</body>
</html>
css文件
.green {color:green}
#flower {color:red}
CSS定位与浮动
CSS定位属性允许对元素进行定位。CSS定位与浮动提供的属性可以建立列式布局。定位定义元素框相对于其他框或浏览器本身窗口的位置。
块级元素与行内元素
div、h1和p通常被称为块级元素，而span和strong被称为行内元素。display属性改变生成框的类型，将display属性设置为block可以让行内元素表现为块级元素，若设置为none，生成元素没有框。
在某些情况下，把一些文本添加到一个块级元素开头，即使没有定义这些块级元素，也会被当作段落对待，在这种情况下，这个框成为无名块框。一个包含三行文本的段落，每行文本也会形成一个无名块框。
定位机制
CSS有三种定位机制：普通流、浮动和绝对定位
position属性
1.static
元素框正常生成，行内元素会创建一个或多个行框，置于其父元素中
2.relative
相对定位中元素框相对于原位置偏移某个距离，仍保持其形状，原本所占的空间仍保留。元素可能会覆盖其他框。
#flower {position:relative;left:30px;}
3.absolute
绝对定位中元素框从文档流终完全删除，元素在原文档流中的空间会关闭。绝对定位使元素的位置与文档流无关。绝对定位的位置相对于最近的已定位祖先元素或包含块。此例使用了行内样式。
<div id="flower" style="position:relative;left:30px;">
<h1 style="position:absolute;left:30px;">bilibili</h1>
</div>
4.fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。其包含块为视窗本身。
浮动
浮动的框可以向左或右移动，直到框的边缘碰到另一个浮动框的边框为止。浮动框不在文档的普通流之中。通过float属性实现元素的浮动。
.green {color:green;float:left;padding:10px;}
clear属性与float属性结合可以高效的设计页面。
水平导航条
使用普通流可以很容易创建列式的导航条。创建水平导航栏有两种办法，使用行内或浮动列表项。浮动方法可以使链接拥有相同的尺寸。
行内方法
li{display:inline;}
a{display:block;width:60px}
浮动方法
li{float:left;}
a{display:block;width:60px}
网友评论