CSS入门
CSS
层次样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="css/style.css">
<!-- <style>-->
<!-- h1 {-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
</head>
<body>
<h1>css</h1>
</body>
</html>
1、CSS的三种导入方式
优先级：
- 就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color: green;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
链接式：HTML
<link rel="stylesheet" href="css/style.css">
导入式：CSS2.1
<!-- 导入式-->
<style>
@import "css/style.css";
</style>
2、基本选择器
1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1{
color: red;
border-radius: 24px;
background: #1dd7c6;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<h1>我是标题</h1>
<p>我是p标签</p>
</body>
</html>
2、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.java{
color: red;
}
</style>
</head>
<body>
<h1 class="java">你好</h1>
</body>
</html>
3、id选择器
- 只有唯一一个id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#java{
color: red;
}
</style>
</head>
<body>
<h1 id="java">我是id选择器</h1>
</body>
</html>
总结：
- 优先级：id选择器>类选择器>标签选择器
3、层次选择器
1、后代选择器
- 在某个标签中的选择的同一类标签
- 语法：父标签 选择后代标签{}
/*后代选择器*/
body p{
background: red;
}
2、子选择器
/* 子选择器*/
body>p{
background: green;
}
3、兄弟选择器
/* 兄弟选择器,向下相邻，只有一个*/
.active +p{
background: red;
}
4、通用选择器
/* 通用选择器，向下选择指定的标签*/
.active~p{
background: green;
}
4、结构伪类选择器
伪类选择器：
/*伪类选择器*/
a:hover{
background: yellow;
}
结构伪类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 选择ul中的第一个元素*/
ul il:first-child{
background: red;
}
/*选择ul中的最后一个元素*/
ul il:last-child{
background: green;
font-size: 100px;
}
/*选中当前元素的父元素的指定某位相同子元素*/
/*定位到body，选择第一个p元素*/
p:nth-child(2){
background: green;
}
/*选择父元素下第二个指定类型的p元素*/
p:nth-of-type(3){
background: blue;
}
/*伪类选择器*/
a:hover{
background: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我</a>
<p class="active">h1</p>
<p>h2</p>
<p>h3</p>
<ul>
<il>
li
</il>
<il>
l2
</il>
<il>
l3
</il>
</ul>
<p>h3</p>
</body>
</html>
5、属性选择器
<!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: red;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/* 属性选择器：a[]{}*/
/*属性值（正则表达式）
=绝对等于
*=包含等于
^=以什么开头
￥=以什么结尾
*/
a[id]{
background: yellow;
}
a[class*=links]{
background: blue;
}
a[href^="http"]{
background: fuchsia;
}
a[href$="jpg"]{
background: green;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">h1</a>
<a href="" class="links item">h2</a>
<a href="" class="links item">h3</a>
<a href="" class="links item">h4</a>
<a href="" class="links item">h5</a>
<a href="" class="links item">h6</a>
<a href="" class="links item">h7</a>
<a href=".jpg" class="links item">h8</a>
<a href="" class="links item last">h9</a>
</p>
</body>
</html>
=绝对等于
*=包含等于
^=以什么开头
￥=以什么结尾
6、美化网页
1.突出字体
- span标签，默认标签，可以更改名字
2.文本样式
- 颜色
- 文本对齐
- 首行缩进
- 行高
- 装饰
- 图片文字居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
text-align:文本排版
*/
h1{
/*rgba a:0~1*/
color: rgba(255,0,0,0.5);
text-align: center;
}
/*text-indent:缩进 单位em
*/
.p1{
text-indent: 2em;
}
/*快高和行高相同，则上下居中*/
.p3{
background: red;
height: 100px;
line-height: 100px;
}
/*下划线*/
.p2{
/*上、中、下划线*/
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
}
/*图片文字上下居中对齐*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>短句</h1>
<img src="images/1.png" >
<span>图片对齐</span>
<p class="p1">1、所谓成功，就是在平凡中做出不平凡的坚持。</p>
<p class="p2">2、瀑布对悬崖无可畏惧，所以唱出气势磅礴的生命之歌。</p>
<p class="p3">3、假如你从来未曾害怕受窘受伤害，好就是你从来没有冒过险。</p>
<p>4、坚持把简单的事情做好就是不简单，坚持把平凡的事情做好就是不平凡。</p>
<p>5、让珊瑚远离惊涛骇浪的侵蚀吗？那无异是将它们的美丽葬送。</p>
<p>x6、所有的胜利，与征服自己的胜利比起来，都是微不足道。</p>
<p>7、雄心壮志是茫茫黑夜中的北斗星。</p>
<p>8、盆景秀木正因为被人溺爱，才破灭了成为栋梁之材的梦。</p>
<p>9、人不能创造时机，但是它可以抓住那些已经出现的时机。</p>
<p>10、遇到困难时不要抱怨，既然改变不了过去，那么就努力改变未来。</p>
<p>11、不要抱怨自己所处的环境，如果改变不了环境，那么就改变自己的心态。</p>
</body>
</html>
7、超链接伪类
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
}
a:hover{
color: orange;
}
a:active{
color: green ;
}
a:visited{
color: red;
}
/*text-shadow:阴影颜色 水平偏移 垂直偏移 模糊半径*/
#price{
text-shadow: red 2px 2px 2px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">
<img src="../../source/01.jpg" alt="">
</a>
<p>
<a href="#">图片</a>
</p>
<p>
<a href="#">两仪式</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
8、背景
1、图片背景
background-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
/*默认是全部平铺*/
background-image: url("../1.png");
}
/*设置背景图片的重复方式*/
.div1{
background: red url("../1.png") 270px 10px repeat-x;
/*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>
</html>
2、渐变背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>、
<style>
/*grabient.com有专门的渐变背景*/
body{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
hahaha
</body>
</html>
9、盒子模型
margin：外边距
border：边框
padding：内边距
1、边框
设置边框的属性：颜色，粗细，样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,ul,li,a,body{
margin: 0;
padding: 0;
border: red 1px solid;
}
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 10px;
background: #FFCC70;
line-height: 30px;
}
form{
background: blueviolet;
}
div:nth-of-type(1)>input{
border: 3px solid green;
}
div:nth-of-type(2)>input{
border: 3px dashed yellow;
}
div:nth-of-type(3)>input{
border: 3px dashed blue;
}
</style>
</head>
<body>
<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="email">
</div>
</form>
</div>
</body>
</html>
2、内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1,ul,li,a,body{
margin: 0;
padding: 0;
border: red 1px solid;
}
#box{
width: 300px;
border: 1px solid red;
/*外边距 居中*/
margin: 0 auto;
}
h2{
font-size: 10px;
background: #FFCC70;
line-height: 30px;
margin-top: 0;
}
form{
background: blueviolet;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
/*内边距*/
padding: 10px;
}
</style>
</head>
<body>
<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="email">
</div>
</form>
</div>
</body>
</html>
3、盒子大小
margin+padding+border+context内容=事务大小
10、圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
margin: 30px;
border: 10px solid red;
/*1-100 可以设置四个角或者对角*/
border-radius: 100px;
}
img{
height: 50%;
border-radius: 100px;
}
</style>
</head>
<body>
<div>
</div>
<img src="../01.jpg" alt="">
</body>
</html>
11、浮动
标准文档流
1、display
设置元素为行内元素或者块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: red solid 1px;
display: inline;
}
span{
width: 100px;
height: 100px;
border: red solid 1px;
/*将行内元素设置为行块元素*/
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
2、浮动
float
- 使得元素浮动起来，不受原来父元素块大小的影响，会脱离标准文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="../../1.png" alt=""></div>
<div class="layer01"><img src="../../01.jpg" alt=""></div>
<div class="layer03">dasdqwdasdwadawdjhfoashfihewfpajfe</div>
</div>
</body>
</html
div{
margin: 10px;
padding:5px;
}
#father{
border: 1px solid red;
}
.layer01{
border: 1px red dashed;
display: inline-block;
float: right;
clear: both;
}
.layer02{
border: 1px red dashed;
display: inline-block;
float: right;
}
.layer03{
border: 1px red dashed;
display: inline-block;
float: right;
clear: both;
}
12、父级边框塌陷的问题
clear
- 使某处的浮动效果消失
1、增加父级元素的高度
#father{
border: 1px solid red;
height: 800px;
}
缺点：高度被限定
2、增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear: both;
}
在元素中添加了空div
3、overflow
/*父级元素中增加overflow的*/
#father{
border: 1px solid red;
overflow: hidden;
}
在下拉的场景下不适合使用
4、父类中添加一个伪类
#father:after{
content: '';
display: block;
clear: both;
}
推荐使用，只增加了父类的伪类，而没有修改原来代码
13、定位
1、相对定位
position: relative;
top: -50px;/*距离父类上边框-50px*/
right: 40px;
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
width: 300px;
height: 300px;
border: solid 1px red;
padding: 15px;
margin: 10px;
}
a{
background: #C850C0;
text-decoration: none;
display: inline-block;
width: 100px;
height: 100px;
color: white;
line-height: 100px;
text-align: center;
}
a:hover{
background: #2672e3;
}
#a2{
position: relative;
right: -100px;
}
#a3{
position: relative;
bottom: -100px;
}
#a5{
position: relative;
top: -100px;
right: -100px;
}
#a4{
position: relative;
top: 100px;
right: -100px;
}
</style>
</head>
<body>
<div id="father">
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
</div>
</body>
</html>
2、绝对定位
开启绝对定位后，会脱离文档流
- 当所有祖先元素没有定位时，则相当于浏览器定位
- 当最近的父级元素存在定位时，会相对于父级元素进行偏移
position: absolute;
right: 30px;
3、固定定位
无论窗口如何移动，元素始终保持窗口位置固定
position: fixed;
4、z-index
类似层级一样，数值越大，相应元素就位于上方，它只对定位元素有用
z-index:999;
opacity:0.5/*不透明度0-1*/
14、伪元素
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
::first-letter
- 伪元素的样式将应用于元素文本的第一个字（母）。
::first-line
- 伪元素的样式将应用于元素文本的第一行。
::before
- 在元素内容的最前面添加新内容。
::after
- 在元素内容的最后面添加新内容。
浙公网安备 33010602011771号