CSS
1.CSS是什么
Cascading Style Sheet 层叠级联样式表
1.1发展史
- CSS1.0
- CSS2.0
- DIV(块) + CSS，HTML与CSS结构相分离的思想
- CSS2.1
- 浮动，定位
- CSS3.0
- 圆角边框，阴影，动画
1.2快速入门
html和css不分离
<style>
h1{
color:red;
}
</style>
<h1>标题</h1>
<!-- 也可以采用行内样式 -->
<h1 style="color:red">标题</h1>
html和css分离
<link rel="stylesheet" href="css/style.css">
/* style.css中 */
h1{
color: red;
}
优先级
- 就近原则
2.CSS选择器（重点难点）
- 作用：选择页面上的某一个或某一类元素
2.1 基本选择器
-
标签选择器
<style> h1{ color:red; } </style> <h1>标题</h1> -
类选择器
<style> .myClass{ color:red; } </style> <h1 class="myClass">标题</h1> -
Id选择器
<style> #myId{ color:red; } </style> <h1 id="myId">标题</h1> Id选择器 > 类选择器 > 标签选择器
2.2层次选择器
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
-
后代选择器：某个元素的后代 ，爷爷爸爸儿子
选择了所有的p标签
<style> body p{ background:red; } </style> -
子选择器：一代，儿子
选择了p0、p1、p2和p3
<style> body > p{ background:red; } </style> -
相邻兄弟选择器：只能选择在它下面的一个同辈
<style> .active + p{ background:red; } </style> -
通用选择器：选择它下面的所有同辈
<style> .active ~ p{ background:red; } </style>
2.3结构伪类选择器
<head>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background:red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background:red;
}
/*悬浮*/
a:hover{
color:orange;
}
/*点击*/
a:active{
color:orange;
}
</style>
</head>
<body>
<a>链接</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
2.4属性选择器
<head>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 存在id属性的元素 */
a[id]{
background: yellow;
}
/* 属性名=属性值（正则） */
a[id=first]{
background: yellow;
}
/* class中包含links的，包含*= */
a[class*="links"]{
background: yellow;
}
/* 选中href中以http开头的 开头^= */
a[href^=http]{
background: yellow;
}
/* 选中href中以pdf结尾的 结尾$= */
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="" class="links item first" id="first">1</a>
<a href="images/123.html" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.png" class="links item">3</a>
<a href="images/123.jpg" class="links item">4</a>
<a href="http://www.baidu.com" class="links item">5</a>
<a href="/a.pdf" class="links item">6</a>
</p>
</body>
</html>
3.美化网页
3.1字体样式
<head>
<!--
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
-->
<style>
body{
/*一种英文，一种中文*/
font-family: "Arial Black",楷体;
color:#a13d30;
}
h1{
/*px是像素，em是一个字体的大小*/
font-size:50px;
}
.p1{
font-weight:bold;
}
</style>
</head>
<body>
<h1>
故事介绍
</h1>
<p class="p1">
107年前（743年），世界上突然出现了人类的天敌“巨人”。面临着生存危机而残存下来的人类逃到了一个地方，盖起了三重巨大的城墙。人们在这隔绝的环境里享受了一百多年的和平，直到艾伦·耶格尔十岁那年，60米高的“超大型巨人”突然出现，以压倒性的力量破坏城门，其后瞬间消失，凶残的巨人们成群的冲进墙内捕食人类。
</p>
<p>
艾伦亲眼看着人们以及自己的母亲被巨人吞食，怀着对巨人无法形容的憎恨和痛恨，誓言杀死所有巨人。城墙崩坏的两年后，艾伦加入104期训练兵团学习和巨人战斗的技术。在训练兵团的三年，艾伦在同期训练兵里有着其他人无法比拟的强悍精神力。即使亲眼见过地狱也依然勇敢地向巨人挑战的艾伦，如愿以偿加入了向往已久的调查兵团。
</p>
<p>
在他正做着到墙壁的外面去这个梦的时候，毁坏墙壁的超大巨人出现了。
</p>
</body>
3.2文本样式
-
颜色
-
文本对齐方式
<head> <style> h1{ text-align:center; } </style> </head> -
首行缩进
<head> <style> p{ text-indent:2em; } </style> </head> -
行高
<head> <style> /* 行高和块的高度一致，就可以上下居中 */ p{ height:300px; line-height:300px; } </style> </head> -
装饰
<head> <style> /* 下划线 */ .l1{ text-decoration: underline; } /* 中划线 */ .l2{ text-decoration: line-through; } /* 上划线 */ .l2{ text-decoration: overline; } </style> </head> -
图片和文字水平对齐
<head> <style> img,span{ vertical-align: middle; } </style> </head> <body> <img src="images/a.jpg"> <span>这是一张图片~~~</span> </body>
3.3阴影
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
3.4列表
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> </li>
<li><a href="#">家用电器</a> <a href="#">手机</a> </li>
<li><a href="#">家具</a> <a href="#">家装</a> </li>
<li><a href="#">食品</a> <a href="#">保健</a> </li>
<li><a href="#">彩票</a> <a href="#">旅行</a> </li>
</ul>
</div>
</body>
#nav{
width:300px;
background:#a0a0a0
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: red;
}
ul li{
height: 30px;
/*
none: 把表单项前的圆点去掉
circle: 空心圆
decimal: 数字
*/
list-style: none;
text-indent: 1em;
}
a{
/*超链接的下划线*/
text-decoration: none;
font-size:14px;
color:#000;
}
a:hover{
color:orange;
text-decoration: underline;
}
3.5背景图像应用及渐变
<head>
<style>
div{
width:1000px;
height:700px;
border:1px solid red;
/*默认全部平铺*/
background-image: url("images/cat.jpg");
}
.div1{
/*水平平铺*/
background-repeat: repeat-x;
}
.div2{
/*垂直平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
4.盒子模型
4.1什么是盒子
4.2边框
-
粗细
-
样式
-
颜色
<div id="box"> <h2> 登录 </h2> <form action="#"> <div> <span>用户名：</span> <input type="text"> </div> <div> <span>密码：</span> <input type="password"> </div> <div> <span>邮箱：</span> <input type="text"> </div> </form> </div><style> /*body有一个8px的外边距*/ body{ margin:0px; } #box{ width:300px; /*粗细、样式、颜色*/ border: 1px solid red; } form{ background:#3cbda6 } /*定位到用户名*/ div:nth-of-type(1)>input{ border: 3px solid black } </style>
4.3外边距
-
外边距分为上、下、左、右，分别为margin-top，margin-bottom，margin-left，margin-right
-
如果简单设置，顺序为，上、右、下、左，即顺时针
margin : 0 0 0 0;
4.4内边距
-
内边距分为上、下、左、右，分别为padding-top，padding-bottom，padding-left，padding-right
-
如果简单设置，顺序为，上、右、下、左，即顺时针
padding : 0,0,0,0; -
盒子的计算方式：margin + border + padding + 内容宽度
4.5圆角边框
<style>
div{
width:100px;
height:100px;
border:10px solid red;
/* 左上和右下是第一个，左下和右上是第二个 */
/* 如果是四个也是顺时针 */
border-radius:50px 20px;
}
</style>
4.6阴影
<style>
div{
width:100px;
height:100px;
border:10px solid red;
/* 向x轴偏移，向y轴偏移，模糊半径，颜色 */
box-shadow: 10px 10px 1px red;
}
</style>
5.浮动
5.1标准文档流
-
标准文档流：文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
-
行内元素和块状元素详解
5.2display转换行与块
-
行内元素和块状元素互转
<style> div{ width:100px; height:100px; border:1px solid red; /*转行内元素*/ display: inline; } span{ width:100px; height:100px; border:1px solid red; /*转块状元素*/ display: block; } /*此外，inline-block表示是块元素，但可以在一行显示*/ /* display:none 不显示 */ </style>
5.3float浮动
<style>
div{
width:100px;
height:100px;
border:1px solid red;
/*浮动，向左侧移动*/
float:left
}
</style>
因为浮动之后，会脱离标准文档流，当页面改变大小，排版会乱掉，因此解决父级边框塌陷的问题
<!--补充知识-->
<style>
/*
clear:right; 右侧不允许有浮动元素，如果有它就排到下面
clear:left; 左侧不允许有浮动元素，如果有它就排到下面
clear:both; 两侧不允许有浮动元素，如果有它就排到下面
*/
div{
width:100px;
height:100px;
border:1px solid red;
display: inline-block;
float:left;
clear:both;
}
</style>
如何解决父级边框塌陷的问题
-
增加父级元素的高度（太low）
-
在最下面加一个空的div，并进行设置
.lastdiv{ claer:both; margin:0; padding:0; } -
overflow解决溢出问题
<head> <style> #content{ width:200px; height:100px; /*加上了滚动条解决溢出问题*/ /* overflow:hidden就是隐藏掉 */ overflow:scroll; } </style> </head> <body> <div id="content"> <p> 艾伦亲眼看着人们以及自己的母亲被巨人吞食，怀着对巨人无法形容的憎恨和痛恨，誓言杀死所有巨人。城墙崩坏的两年后，艾伦加入104期训练兵团学习和巨人战斗的技术。在训练兵团的三年，艾伦在同期训练兵里有着其他人无法比拟的强悍精神力。即使亲眼见过地狱也依然勇敢地向巨人挑战的艾伦，如愿以偿加入了向往已久的调查兵团。 </p> </div> </body> 因此，在父级边框中设置overflow属性可解决坍塌问题
#father{ border:1px #000 solid; /*因为它没有设置宽高，因此是被内容所撑起来的*/ overflow: hidden; } -
父类添加一个伪类：after
最流行的/*本质与第二种方法无异，但不会再html中添加过多的代码*/ #father{ border:1px #000 solid; } #father:after{ content: ''; display: block; clear: both; }
6.定位
6.1相对定位
相对于自己原来的位置偏移，它仍在标准文档流中，原来的位置会被保留
<head>
<style>
body{
padding:20px;
}
div{
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father{
border:1px solid #666;
padding:0;
/*相对定位：上下左右*/
position: relative;
/*上移20*/
top:-20px;
/*向右移动20*/
left:20px;
}
#first{
border:1px dashed #666;
}
#second{
border:1px dashed #666;
}
#third{
border:1px dashed #666;
}
</style>
</head>
<body>
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</body>
6.2绝对定位
1.没有父级元素或父级元素没有定位的的情况下，相对于浏览器的边框进行定位
2.有父级元素，且父级元素有定位的的情况下，相对于父级元素进行偏移
3.原来的位置会被删除
<head>
<style>
body{
padding:20px;
}
div{
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father{
border:1px solid #666;
padding:0;
/*绝对定位：上下左右*/
position: absolute;
/*距离左边框100px*/
left:100px;
}
#first{
border:1px dashed #666;
}
#second{
border:1px dashed #666;
}
#third{
border:1px dashed #666;
}
</style>
</head>
<body>
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</body>
6.3固定定位
永远在浏览器窗口的固定位置
<head>
<style>
body{
height:1000px;
padding:20px;
}
#first{
width:100px;
height:100px;
/*固定定位*/
position:fixed;
right:0;
bottom:0;
}
</style>
</head>
<body>
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</body>
6.4z-index
图层
<div id="content">
<ul>
<li><img src="images/cat.jpg"/></li>
<li class=tipText>学习</li>
<li class=tipBg></li>
<li>时间</li>
<li>地点</li>
</ul>
</div>
#content{
width:380px;
padding:0px;
margin:0px;
overflow:hidden;
font-size:12px;
line-height:25px;
border:1px #000 solid;
}
ul,li{
padding:0px;
margin:0px;
list-style:none;
}
/*父级元素相对定位*/
#content ul{
position:relative;
}
.tipText,.tipBg{
position:absolute;
width:380px;
height:25px;
top:216px;
}
.tipText{
color:white;
/*层级，数值越高，层级越高*/
z-index:999;
}
.tipBg{
background:#000;
/*可以通过设置opacity来调整透明度*/
opacity:0.5;
}
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
