css概述
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 文 档 的 某 一 部 分 。
基本语法
<!DOCTYPE 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选择器-->类选择器-->标签选择器-->统配选择器
-->
<!-- 行内样式表，只能对所在标签进行修饰，优先级最高 ，p1不能对其修饰-->
<a href="" class="p1" style="color: aqua;size: 70px;font-family: 楷体;">元神</a>
<a href="" class="p1">元神</a>
<!-- 使用外部样式表修饰标签，首先在头标签里面书写link标签 <link href="css文件地址" rel="stylesheet风格表格" />-->
<a href="" class="p2">元神</a>
<a>123</a><br />
<a id="pp">元神</a>
</body>
</html>伪类
C S S 伪 类 专 门 用 来 表 示 标 签 的 一 种 的 特 殊 的 状 态 ， 当 我 们 需 要 为 处 在 这 些 特 殊 状
态 的 标 签 设 置 样 式 时 ， 就 可 以 使 用 伪 类 。
<!DOCTYPE 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>块级，行级，行级块标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 块级标签 无论内容多少都独占一行 可以设置宽高 主要用来网页布局
div块级标签，没有任何附加样式
-->
<!-- 行级标签 只占内容的大小，由内容撑开，设置宽高没有用
span行级标签，没有任何附加内容
-->
<!-- 常用标签
div span 表格 表单 a
-->
<!-- 行级块标签
不占一行又可以设置宽高 例如：img input
-->
aaa
<img src="img/1.png" width="100" height="100" alt="" />
aaa <br />
<!-- display 可以修改标签样式 inline可以改变为行级标签 block 可以变为块级标签 none 可以取消标签 inline——block变为行级快标签 -->
<!-- 块级标签变行级标签 -->
<div style="width: 100px; height: 100px; background-color: purple;display: inline;">aaa</div>
<!-- 行级标签变块级标签 -->
<span style="width: 100px;height: 100px;background-color: purple;display: block;">aaa</span>
</body>
</html>
盒子模型
C S S 处 理 网 页 时 ， 它 认 为 每 个 标 签 都 包 含 在 一 个 不 可 见 的 盒 子 里 。
如 果 把 所 有 的 标 签 都 想 象 成 盒 子 ， 那 么 我 们 对 网 页 的 布 局 就 相 当 于 是 摆
放 盒 子 。
我 们 只 需 要 将 相 应 的 盒 子 摆 放 到 网 页 中 相 应 的 位 置 即 可 完 成 网 页 的 布 局 。
盒子模型我们分为四个区域，内容区，内边距，边框，外边距。
盒子模型-内边距
<!DOCTYPE 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>盒子模型-边框
<!DOCTYPE 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>
<!-- 边框 border：像素 颜色 样式 -->
<div>
<input type="text" class="p" />
</div>
</body>
</html>盒子模型-外边距
<!DOCTYPE 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>浮动
文档流
文 档 流 指 的 是 文 档 中 的 标 签 在 排 列 时 所 占 用 的 位 置 。 将 窗 体 自 上 而 下 分
成 一 行 行 ， 并 在 每 行 中 按 从 左 至 右 的 顺 序 排 放 标 签 ， 即 为 文 档 流 。
也 就 是 说 在 文 档 流 中 标 签 默 认 会 紧 贴 到 上 一 个 标 签 的 右 边 ， 如 果 右 边 不
足 以 放 下 标 签 ， 标 签 则 会 另 起 一 行 ， 在 新 的 一 行 中 继 续 从 左 至 右 摆 放 。
这 样 一 来 每 一 个 块 标 签 都 会 另 起 一 行 ， 那 么 我 们 如 果 想 在 文 档 流 中 进 行
布 局 就 会 变 得 比 较 麻 烦。
给标签添加浮动便可以摆脱文档流。
<!DOCTYPE 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>
<!-- 浮动： 浮动使原来的标签脱离文档流（二维平面），漂浮起来了
float：left
漂浮后会产生一个问题，浮动后的标签不会占用原来文档流的位置，下面的标签就会上移，影响布局
可以在浮动后的标签后面添加div设置风格为clear对应左浮动还是右浮动
-->
<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>www</div>
<div class="main">
<div class="main-box">left</div>
<div class="main-box">center</div>
<div class="main-box">right</div>
<div style="clear: left;"></div>
<div style="width: 300px; background-color: azure;">bottom</div>
</div>
</body>
</html>定位
相对定位
相对定位是一个非常容易掌握的概念. 相对于它
的起点进行移动，移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位，
left right top bottom四个属性来设置标签的偏移量。
相对定位的特点
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
<!DOCTYPE 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">div1</div>
<div class="div2">div2</div>
</body>
</html>绝对定位
绝对定位是不占空间的，运用了
绝对定位的标签会脱离原来的文档
流，浮动起来，因此视觉上会其他
的标签重叠。
可以通过position: absolute; 开启
绝对定位，
left right top bottom四个属性来
设置标签的偏移量
绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
<!DOCTYPE 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">div1</div>
</div>
<div class="div2">div2</div>
</body>
</html>
4952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
