CSS简单操作
1 、什么是CSS
Cascading Style Sheet 层叠样式表
css:美化网页
字体、颜色、高度、宽度、边距、背景、图片、网页浮动、网页定位……
1.2 发展史
css1.0
css2.0 DIV块+CSS、HTML与CSS结构分离的意思、网也变得简单,SEO
css2.1 浮动、定位
css3.0 圆角、阴影、动画…… 浏览器的兼容性
1.3 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--写CSS代码-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1 >标题1</h1>
</body>
</html>
建议使用下面这种方式
css的优势
1.内容和表现分离
2.网页结构表现统一,可以实现复用
3.样式丰富
4.建议使用独立于html的css文件
5.利用SEO,容易被搜索引擎收录
1.4 CSS的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
/*内部样式*/
<style>
h1{
color: red;
}
</style>
/*外部样式*/
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: green">这是标题</h1>
</body>
</html>
拓展:外部样式的两种写法
- 链接式
html
/*外部样式*/
<link rel="stylesheet" href="css/style.css">
- 导入式
@import是CSS2.1特有的
<!--导入式-->
<style>
@import url("css/style.css")
</style>
2、选择器
作用:选择页面某一个或某一类元素
2.1 基本选择器
1、标签选择器 :选择一类标签 标签{}
2、类选择器 class :选择所有class属性一致的标签,跨标签 .类名{}
3、id选择器: 全局唯一 #id名{}
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
h1{
color: red;
}
/*id选择器*/
#A{
color: green;
}
/*class选择器*/
.B{
color: black;
}
</style>
</head>
<body>
<h1 id="A">标题1</h1>
<h1 class="B">标题2</h1>
</body>
</html>
优先级: id > class >标签
2.2 层次选择器
1、后代选择器:在某个元素的后面 爷爷→ 爸爸→ 你
2、子选择器
3、相邻兄弟选择器
4、通用选择器
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器练习</title>
<style>
/*1.后代选择器*/
/* body p{*/
/* background: green;*/
/* }*/
/*2.子选择器*/
/* body>p{*/
/* background: #1818de;*/
/* }*/
/*3.相邻兄弟选择器 相邻是指向下(只一个)*/
/* .active + p{*/
/* background: red;*/
/* }*/
/*4.通用选择器 选中当前元素向下的所有兄弟元素*/
.active~p{
background: blueviolet;
}
</style>
</head>
<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>
<p class="active">p7</p>
<p>p8</p>
</ul>
</body>
</html>
2.3 结构伪类选择器
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选中ui第一个子元素*/
ul li:first-child{
background: #1818de;
}
/*选中ul最后一个子元素*/
ul li:last-child{
background: blueviolet;
}
/*选择当前p元素的父级元素,父级元素中的第一个元素,并且是当前元素*/
p:nth-child(1){
background:black ;
}
/*选择父元素下的 p元素的第二个*/
p:nth-of-type(2){
background: yellow;
}
</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>
2.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
/*
= 绝对等于
*= 包含这个属性的等于
^= 以...开头的
$= 以...结尾的
属性名 [属性名 = 属性值(正则)
a[属性名 = 属性值(正则)]{
}
*/
</head>
<body>
</body>
</html>
3、美化网页元素
3.1 字体样式
<!--
font-family:字体
font-size: 字体大小
font-weight: 字体粗细
color : 字体颜色
-->
3.2 文本样式
1、颜色 color rgb rgba
2、文本对齐方式 text-align=center
3、首行缩进 text-indent:2em
4、行高 line-height
5、装饰 text-decration
6、文本图片水平对齐: vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式练习</title>
<style>
.l1{
font-size: large;
font-size-adjust: inherit;
rgb: #00ff00;
text-align: center; /*排版 居中*/
text-indent: 2em; /*段落首行缩进*/
}
.l2{
text-indent: 2em;
font-size: medium;
line-height: normal;
}
.l3{
text-align: right;
}
</style>
</head>
<body>
<p class="l1">
项目复杂的时候一定要用到注释,这样方便自己或者他人理解
</p>
<p class="l2">
注释不会被执行
</p>
<p class="l3">
写注释是一个非常好的习惯
</p>
</body>
</html>
3.3 阴影
/*text-shadow 阴影颜色 水平偏移 垂直偏移 阴影半径*/
#p{
text-shadow:#3cc7f5 10px -10px 2px;
}
3.4 超链接伪类
正常情况下 a,a:hover
/*默认颜色*/
a{
text-decoration:none;
color:#000;
}
/*鼠标悬浮的状态*/
a:hover{
color:orange;
font-size:15px;
}
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: #1818de;
}
/*鼠标悬浮的状态*/
a:hover{
color: darkorange;
font-size: 20px;
}
/*鼠标按下未释放的状态*/
a:active{
color: red;
}
/*本文阴影*/
.A{
text-shadow: #1818de 5px -50px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/b.png" alt="">
</a>
<p><a href="#">码出高效:Java开发手册</a>
</p>
<p >
<a href="#">作者:孤尽老师</a>
</p>
<p class="A">¥99</p>
</body>
</html>
3.5 列表
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="nav">
<h2>商品列表</h2>
<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> <a href="#">手表</a></li>
<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> <a href="#">运动</a></li>
</ul>
</div>
</body>
</html>
.nav{
width: 400px;
font-size: large;
font-weight: bold;
text-indent: 1em;
background: red;
}
h2{
font-size: 25px;
font-weight: bold;
text-indent: 1em;
line-height: 25px;
}
ul{
background: gray;
}
ul li{
list-style: none;
text-indent: 1em;
line-height: 40px;
background: url("../images/a.png") 300px 5px no-repeat;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
background: coral;
}
4、盒子模型
4.1 模型
margin:外边距
padding:内边距
border:边框
4.2边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*border:样式 粗细 颜色*/
#box{
width: 300px;
border: 1px solid red;
}
form{
background: lime;
}
div:nth-of-type(1) input{
border: 1px solid black;
}
div:nth-of-type(2) input {
border: 1px solid red;
}
h2{
background: blue;
margin: 0;
}
</style>
</head>
<body>
<div id="box">
<h2>用户登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
4.3圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角练习</title>
/*顺时针,左上 右上 右下 左下*/
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
border-radius: 50px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5、浮动
块级元素:独占一行
h1~h6 p div 列表……
行内元素:不独占一行
span a img strong....
行内元素可以被包含在块级元素,反之,不可以。
5.1 display
<!--
block 块元素
inline 行内元素
inline-block 块元素,但是可以内联,在一行
none 把元素隐藏,物理位置也不在了
-->
<style>
div{
width:100px;
height:100px;
display:none;
}
span{
width:100px;
height:100px;
display:inline-block;
}
</style>
5.2 float
左右浮动
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px red solid;
width: 200px;
height: 100px;
overflow: hidden;
}
.layer1{
border: 1px green dashed;
display: inline-block;
float: left;
}
.layer2{
border: 1px gray dashed;
display: inline-block;
float: right;
}
.layer3{
border: 1px blue dashed;
display: inline-block;
float: right;
}
/*clear left 左侧不能有浮动元素
clear right 右侧不能有浮动元素
clear both 两侧都不能有浮动元素
*/
.layer4{
border: 1px yellow dashed;
font-size: 12px;
line-height: 22px;
display: inline-block;
float: left;
clear: both;
}
5.3 对比
- display方向不可控制
- float 浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题
6、定位
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
border: 1px solid black;
}
div{
margin: 1px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
background: #d48e8e;
border: 1px dashed #5f3f3f;
font-size: 20px;
position: relative;
top: -20px;
}
#second{
background: #1818de;
border: 1px dashed blue;
font-size: 20px;
position: relative;
bottom: -10px;
}
#third{
background: #636304;
border: 1px dashed yellow;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位:position:relative
相对于原来的位置,进行指定的偏移
top:10px;
right:10px;
bottom:10px;
left:10px;
方块定位练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
border: 1px solid red;
padding: 10px;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
text-align: center;
line-height: 100px;
background: pink;
display: block;
}
a:hover{
background: #7070f5;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="a">链接1</a>
<a class="a2" href="a">链接2</a>
<a class="a3" href="a">链接3</a>
<a class="a4" href="a">链接4</a>
<a class="a5" href="a">链接5</a>
</div>
</body>
</html>
6.2 绝对定位
<!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: red;
position: absolute; /* absolute 绝对定位*/
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
position: fixed; /* fixed 固定定位*/
right: 0;
bottom: 0;
/*背景透明度*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.3 z-index
z-index 默认是0,最高无限
<head>
<meta charset="UTF-8">
<title>A</title>
<link rel="stylesheet" href="css/style.css"
</head>
<body>
<div id="content">
<ul>
<li><ima src="images/bg.jpg" alt=""</li>
<li class="tipText">XXXXX</li>
<li class="tipBg"></li>
</ul>
</div>
</body>
透明度设置
/*背景透明度*/
opacity: 0.5;
filter: alpha(opacity=50);
#content{
width:300px;
padding:0px;
margin:0px;
overflow:hidden;
font-size:12px;
line-height:25px;
border:1px #000 solid;
}
ul,li{
padding:0px;
margin:opx;
list-style:none;
}
/*父级元素相对定位*/
#content ul{
position:relative;
}
.tipText,.tipBg{
postion: absolute;
width:300px;
height:25px;
top:216px;
}
.tipText{
color:red;
/*z-index:0;*/
}
.tipBg{
background:#000;
opacity: 0.5; /*背景透明度*/
}
最高无限
<head>
<meta charset="UTF-8">
<title>A</title>
<link rel="stylesheet" href="css/style.css"
</head>
<body>
<div id="content">
<ul>
<li><ima src="images/bg.jpg" alt=""</li>
<li class="tipText">XXXXX</li>
<li class="tipBg"></li>
</ul>
</div>
</body>
透明度设置
/*背景透明度*/
opacity: 0.5;
filter: alpha(opacity=50);
#content{
width:300px;
padding:0px;
margin:0px;
overflow:hidden;
font-size:12px;
line-height:25px;
border:1px #000 solid;
}
ul,li{
padding:0px;
margin:opx;
list-style:none;
}
/*父级元素相对定位*/
#content ul{
position:relative;
}
.tipText,.tipBg{
postion: absolute;
width:300px;
height:25px;
top:216px;
}
.tipText{
color:red;
/*z-index:0;*/
}
.tipBg{
background:#000;
opacity: 0.5; /*背景透明度*/
}