CSS学习小结
一、CSS简介
1.CSS：cascading style sheet，层叠级联样式表。涉及字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等设计。样式通常保存在外部的 .css 文件中，只需编辑简单的 CSS 文档即可改变所有页面的布局和外观。
2.发展史
css1.0
css2.0：div css，html与css结构分离，SEO
css2.1：浮动、定位
css3.0：圆角、边框、阴影、动画…… 浏览器兼容性
3.css导入方式
行内样式
内部样式
外部样式
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: aqua;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签中，编写style属性-->
<h1 style="color: red">标题</h1>
</body>
</html>
style.css
/*外部样式*/
h1{
color: chartreuse;
}
/*优先级：采取就近原则，行内样式 \ 内部样式 \ 外部样式*/
二、CSS选择器
1.作用：选择页面上的某一个或者某一类元素
2.基本选择器
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择所有的该标签*/
h1{
color: #aa1133;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>二月</h1>
<h1>二月</h1>
<p>四日</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}*/
.june{
color: blueviolet;
}
.bw{
color: chartreuse;
}
</style>
</head>
<body>
<h1 class="june">one</h1>
<h1 class="bw">two</h1>
<h1 class="june">three</h1>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器的格式 #id名称{} id保证全局唯一*/
#bw{
color: blueviolet;
}
#june{
color: chartreuse;
}
h1{
color: darksalmon;
}
</style>
</head>
<body>
<h1 id="june">one</h1>
<h1 id="bw">two</h1>
<h1>three</h1>
<h1>four</h1>
</body>
</html>
3.高级选择器
层次选择器：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器:某个元素之后*/
ul p{
background: #aa1133;
}
/*子选择器：只有后面一代*/
body>p{
background: chartreuse;
}
/*相邻兄弟选择器:相邻向下的一个元素*/
.active p{
background: coral;
}
/*通用兄弟选择器:当前元素向下的所有元素*/
.active~p{
background: blueviolet;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用id、class选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: blueviolet;
}
/*ul的第一个子元素*/
ul li:last-child{
background: chartreuse;
}
/*选中P3:定位到父元素，选择当前第n个元素*/
p:nth-of-type(3){
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: grey;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id属性的元素 a[]{}*/
a[id]{
background: coral;
}
/*
=绝对等于 *=通配，包含该元素
^=以该元素开头，$=以该元素结尾
*/
a[class*="links"]{
background: aqua;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="text">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
三、字体样式
1.span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
<!--span:重点要突出的字，用span包裹起来-->
欢迎学习 <span id="title1">Java</span>
</body>
</html>
2.字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
/*
font-family:字体
font-size:大小
font-weight：粗细
color：颜色
*/
<style>
body{
font-family: 微软雅黑;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
color: #678000;
}
</style>
</head>
<body>
<h1>内容简介</h1>
<p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家，三次前往雪国的温泉旅馆，与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛：岛村是一个有着妻室儿女的中年男子，坐食遗产，无所事事，偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆，邂逅了艺妓驹子，并被她的清丽和单纯所吸引，甚至觉得她的“每个脚趾弯处都是很干净的”，后来又两度到雪国和驹子相会。</p>
<p>小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核，叶子陪同他从东京乘火车返回汤泽，正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景，却看到映现在车窗上的美丽的叶子，不禁喜欢上了这个美少女。因而在他和驹子、叶子之间，构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p>
</body>
</html>
3.文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
text-align:排版，一般选居中
text-indent:段落首行缩进
height:块高
line-height:行高
当行高和块高一致，就能上下居中
-->
<style>
h1{
color: #aa1133;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: #00ff45;
height: 300px;
line-height: 50px;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
/*a标签去除下划线*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>
<h1>内容简介</h1>
<p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家，三次前往雪国的温泉旅馆，与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛：岛村是一个有着妻室儿女的中年男子，坐食遗产，无所事事，偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆，邂逅了艺妓驹子，并被她的清丽和单纯所吸引，甚至觉得她的“每个脚趾弯处都是很干净的”，后来又两度到雪国和驹子相会。</p>
<p class="p2">小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核，叶子陪同他从东京乘火车返回汤泽，正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景，却看到映现在车窗上的美丽的叶子，不禁喜欢上了这个美少女。因而在他和驹子、叶子之间，构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p>
<a href="http://www.baidu.com"></a>
</body>
</html>
四、列表样式
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<h1 class="title">全部商品分类</h1>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
style.css
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #ff0000;
}
ul{
background: #a0a0a0;
}
/*
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color:#000000;
}
a.hover{
color: orange;
text-decoration: underline;
}
五、定位
默认情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666666;
padding: 0;
}
#first{
background-color: #ff0055;
border: 1px solid #ff0000;
}
#second{
background-color: #ff9955;
border: 1px solid #ff990e;
}
#third{
background-color: #f4fc55;
border: 1px solid #f4fc36;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位：相对于自己原来的位置进行偏移
移动之前的位置仍会保留下来
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666666;
padding: 0;
}
#first{
background-color: #ff0055;
border: 1px solid #ff0000;
position: relative;/*相对定位*/
top: -20px;
left: 20px;
}
#second{
background-color: #ff9955;
border: 1px solid #ff990e;
}
#third{
background-color: #f4fc55;
border: 1px solid #f4fc36;
position: relative;/*相对定位*/
right: 20px;
bottom: -20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--绝对定位：移动之前的位置不会被保留
1.没有父级元素的情况下，相对于浏览器行为
2.假设父级元素存在定位，则相对于父级元素进行偏移
3.在父级元素范围内移动
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666666;
padding: 0;
}
#first{
background-color: #ff0055;
border: 1px solid #ff0000;
}
#second{
background-color: #ff9955;
border: 1px solid #ff990e;
position: absolute;
}
#third{
background-color: #f4fc55;
border: 1px solid #f4fc36;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*固定定位*/
width: 50px;
height: 50px;
background-color: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
赞 (0)