C S S 是 C a s c a d i n g S t y l e S h e e t s ( 级 联 样 式 表 ) 。
C S S 是 一 种 样 式 表 语 言 , 用 于 为 H T M L 文 档 控 制 外 观 , 定 义 布 局 。 例 如 ,
C S S 涉 及 字 体 、 颜 色 、 边 距 、 高 度 、 宽 度 、 背 景 图 像 、 高 级 定 位 等 方 面 。
可 将 页 面 的 内 容 与 表 现 形 式 分 离 , 页 面 内 容 存 放 在 H T M L 文 档 中 , 而 用
于 定 义 表 现 形 式 的 C S S 在 一 个 . c s s 文 件 中 或 H T M L 文 档 的 某 一 部 分 。
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- /* 外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通
- 过link标签将外部样式表文件链接到HTML文档中. */
- <link href="css/index.css" rel="stylesheet" />
- <style>
-
- /* css注释 */
- /* 内嵌样式表,也可以叫类选择器 */
- .p1{
- color: black;
- }
- /* 标签选择器,这个html文件里面所有的a标签,优先级小于前面三种 */
- a{
- color: bisque;
- size: 800px;
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
- }
- /* 统配选择器 给所有标签修饰 优先级最低*/
- *{
- color: brown;
- }
- /* id选择器 唯一的*/
- #pp{
- color: crimson;
- }
-
- style>
-
- head>
- <body>
- id选择器-->类选择器-->标签选择器-->统配选择器
- -->
-
- <a href="" class="p1" style="color: aqua;size: 70px;font-family: 楷体;">元神a>
- <a href="" class="p1">元神a>
-
-
- <a href="" class="p2">元神a>
- <a>123a><br />
- <a id="pp">元神a>
- body>
- html>
C S S 伪 类 专 门 用 来 表 示 标 签 的 一 种 的 特 殊 的 状 态 , 当 我 们 需 要 为 处 在 这 些 特 殊 状
态 的 标 签 设 置 样 式 时 , 就 可 以 使 用 伪 类 。
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- a{
- color: aqua;
- }
- /* 鼠标移入切换样式 */
- a:hover{
- color: purple;
- }
- /* 鼠标点击标签时自动切换样式 */
- a:active{
- color: black;
- }
- /* :focus鼠标聚集到这个标签,标签的样式切换到这个样式 */
- input:focus{
- background-color: purple;
- }
- img:hover{
- /* opacity透明度,1不透明,0.5半透明,0透明 */
- opacity: 0.5;
- }
- img:active{
- opacity: 0;
- }
-
- style>
-
- head>
- <body>
- <a href="">百度a>
- <input type="button" class="p" value="保存"/><br />
- <input type="text" /><br />
- <input type="text" /><br />
- <img src="img/1.png" alt="" />
-
- body>
- html>
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- head>
- <body>
-
-
-
-
-
- aaa
- <img src="img/1.png" width="100" height="100" alt="" />
- aaa <br />
-
-
- <div style="width: 100px; height: 100px; background-color: purple;display: inline;">aaadiv>
-
- <span style="width: 100px;height: 100px;background-color: purple;display: block;">aaaspan>
-
-
- body>
- html>
-
C S S 处 理 网 页 时 , 它 认 为 每 个 标 签 都 包 含 在 一 个 不 可 见 的 盒 子 里 。
如 果 把 所 有 的 标 签 都 想 象 成 盒 子 , 那 么 我 们 对 网 页 的 布 局 就 相 当 于 是 摆
放 盒 子 。
我 们 只 需 要 将 相 应 的 盒 子 摆 放 到 网 页 中 相 应 的 位 置 即 可 完 成 网 页 的 布 局 。
盒子模型我们分为四个区域,内容区,内边距,边框,外边距。
盒子模型-内边距
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- .p{
- width: 100px;
- height: 100px;
- background-color: purple;
- /* 设置内边距 */
- padding: 10px;
- }
- style>
- head>
- <body>
-
-
- <div class="p">盒子模型div>
-
-
-
-
- body>
- html>
盒子模型-边框
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- div{
- background-color: purple;
- height: 100px;
- padding: 20px 304px;
- border: 1px gray solid;
- /* 盒子模型边框设计 */
- border-radius: 50px;
- /* 边框原型 */
-
- }
- input{
- width: 600px;
- height: 30px;
-
-
- }
- style>
- head>
- <body>
-
- <div>
- <input type="text" class="p" />
- div>
-
-
-
-
-
-
-
- body>
- html>
盒子模型-外边距
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- div{
- width: 100px;
- height: 100px;background-color: purple;
- margin-left: auto;
- margin-right: auto;
- /* 设置div居中 ,注意高度不可以这样设置,会默认为0*/
-
-
-
- }
- .p{
- width: 100px;
- height: 100px;background-color: gray;
- margin: 10px;
-
- }
- style>
- head>
- <body>
-
- <div class="p">
-
- div>
- <div>
-
- div>
-
-
-
- body>
- html>
文档流
文 档 流 指 的 是 文 档 中 的 标 签 在 排 列 时 所 占 用 的 位 置 。 将 窗 体 自 上 而 下 分
成 一 行 行 , 并 在 每 行 中 按 从 左 至 右 的 顺 序 排 放 标 签 , 即 为 文 档 流 。
也 就 是 说 在 文 档 流 中 标 签 默 认 会 紧 贴 到 上 一 个 标 签 的 右 边 , 如 果 右 边 不
足 以 放 下 标 签 , 标 签 则 会 另 起 一 行 , 在 新 的 一 行 中 继 续 从 左 至 右 摆 放 。
这 样 一 来 每 一 个 块 标 签 都 会 另 起 一 行 , 那 么 我 们 如 果 想 在 文 档 流 中 进 行
布 局 就 会 变 得 比 较 麻 烦。
给标签添加浮动便可以摆脱文档流。
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- .p{
- padding: 10px 30px;
- background-color: purple;
- float: left;
- }
- .p:hover{
- background-color: aliceblue;
- }
- .p1{
- width: 368px;
- margin: auto;
- }
-
- .main{
- width: 300px;
- margin: auto;
- }
- .main-box{
- float: left;
- width: 100px;
- background-color: papayawhip;
- }
- style>
- head>
- <body>
-
- <div class="p1">
- <div class="p">新闻div>
- <div class="p">体育div>
- <div class="p">娱乐div>
- <div class="p">游戏div>
-
- <div style="clear: left;">div>
- div>
-
-
-
-
- <div>wwwdiv>
- <div class="main">
- <div class="main-box">leftdiv>
- <div class="main-box">centerdiv>
- <div class="main-box">rightdiv>
- <div style="clear: left;">div>
- <div style="width: 300px; background-color: azure;">bottomdiv>
- div>
-
- body>
- html>
相对定位是一个非常容易掌握的概念. 相对于它
的起点进行移动,移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位,
left right top bottom四个属性来设置标签的偏移量。
相对定位的特点
当标签的position属性设置为relative时,则开启了标签的相对定位
1.当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- .div1{
- background-color: aliceblue;
- width: 100px;
- height: 100px;
- position: relative;
- /* 相对定位 */
- left: 100px;
- /* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
- }
- .div2{
- background-color: gray;
- width: 100px;
- height: 100px;
- position: relative;
- /* 相对定位 */
- top: 50px;
- /* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
- }
-
- style>
- head>
- <body>
- <div class="div1">div1div>
-
- <div class="div2">div2div>
-
-
- body>
- html>
绝对定位是不占空间的,运用了
绝对定位的标签会脱离原来的文档
流,浮动起来,因此视觉上会其他
的标签重叠。
可以通过position: absolute; 开启
绝对定位,
left right top bottom四个属性来
设置标签的偏移量
绝对定位的特点
1.开启绝对定位,会使标签脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签
的绝对定位都会同时开启父标签的相对定位)
如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位
- html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>title>
- <style>
- .div1{
- background-color: aliceblue;
- width: 100px;
- height: 100px;
- position: absolute;
- /* 开启绝对定位标签立即脱离文档流 */
- left: 50px;
- /*
- 绝对定位的参照物,离他最近的开启了定位的父级标签,一般父级开相对定位
- */
- }
- .div2{
- background-color: gray;
- width: 100px;
- height: 100px;
- position: relative;
- /* 相对定位 */
- top: 50px;
- /* 相对定位以自身位置为定位参照,不会让标签脱离文档流(二维平面) */
- }
- .div3{
- background-color: aqua;
- width: 300px;
- height: 300px;
- position: relative;
- }
-
- style>
- head>
- <body>
- <div class="div3">
- div3
- <div class="div1">div1div>
- div>
-
- <div class="div2">div2div>
-
-
- body>
- html>