CSS
CSS语法
选择器{
声明1;
声明2;
声明3;
}
CSS的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入样式</title>
<!--内部样式-->
<style>
h1{
color: antiquewhite;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式-->
<h1 style="color: blue">标签</h1>
</body>
</html>
拓展:外部样式两种写法
- 链接式
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
- 链接式
<!--内部样式-->
<style>
h1{
@import url("style.css")
}
</style>
选择器
作用:选择页面上的某一个或者某一类元素
基本选择器
不遵循就近原则:id选择器 > class选择器 > 标签选择器
- 标签选择器 :选择一类标签 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
/*标签选择器,会选择到页面上所有的这个标签元素*/
h1{
color: #fc1111;
}
p{
font-size: 80px;/*字体大小*/
color: #fc1111;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1>hello</h1>
<p>hi</p>
</body>
</html>
- class选择器: 选择所有class 属性一致的标签,跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class选择器</title>
<style>
/*类选择器的格式 .class的名称{}
好处: 可以多个标签归类,是同一个class 可以复用 */
.hi{
color: #ff30c8;
}
.hello{
color: #62e0ff;
}
</style>
</head>
<body>
<h1 class="hi">标题1</h1>
<h1 class="hello">标题2</h1>
<h1>标题3</h1>
</body>
</html>
- id选择器:全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
/*id选择器: id必须保证全局唯一!
#id名称{}
*/
<style>
#hello{
color: #62e0ff;
}
#ni{
color: #ff30c8;
}
</style>
</head>
<body>
<h1 id="ni">标题1</h1>
<h1 id="hello"> 标题1 </h1>
<h1> 标题1 </h1>
</body>
</html>
层次选择器
- 后代选择器
body p{ }
- 子选择器
body>p{ }
- 相邻选择器 : 只有一个 相邻(向下)
.active + p{ }
- 通用选择器:当前选中的元素的向下的所有相邻元素
.active~p{ }
结构伪类选择器
/*ul的第一个子元素*/
ul li:frist-child{
background: green;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/* 选中 p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!,顺序*/
p:nth-child(1){
background: yellow;
}
/*选中父类元素,下的p元素的第二个,类型*/
P:nth-of-type(2){
background: pink;
}
例题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #fc1111;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #62e0ff;
}
/* 选中 p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!,顺序*/
p:nth-child(1){
background: blue;
}
/*选中父类元素,下的p元素的第二个,类型*/
p:nth-of-type(2){
background: antiquewhite;
}
</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>
属性选择器
- 格式:a[]{}
- 属性名 属性名=属性值(正则)
= 绝对等于
*= 包含
^= 以…这个开头
$= 以…结尾 - 例题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #62e0ff;
text-align: center;
color: bisque;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名 属性名=属性值(正则)
= 绝对等于
*= 包含
^= 以..这个开头
$= 以..结尾
*/
/*存在id属性的元素
a[id]{
background: #fc1111;
}*/
a[id=first]{
background: #fc1111;
}
/*class 中含有 links的元素 */
a[class*=links]{
background: yellow;
}
/*选中含有href中http开头的元素*/
a[href^=http]{
background: #62e0ff;
}
/*选中含有href中doc结尾的元素*/
a[href$=doc]{
background: #ff30c8;
}
</style>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank"title="test">2</a>
<a href="index/123.html" class="links item">3</a>
<a href="index/123.png" class="links item">4</a>
<a href="index/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.doc" class="links item">8</a>
<a href="/abc.pdf" class="links item">9</a>
<a href="abcd.doc" class="links item">10</a>
</p>
</body>
</html>
美化网页元素
spean标签:重点要突出的字,使用span套起来
<span>重点要突出的字</span>
字体样式
font-family: <!--字体 -->
color: <!--color: 字体颜色 -->
font-size: <!-- 字体大小 -->
font-weight: <!-- 字体粗细 -->
文本样式
color: <!--颜色 -->
text-align: <!--文本对齐方式 -->
text-indent: 2em; <!--段落首行缩进 -->
line-height: <!--行高 -->
text-decoration: underline; <!--下划线 -->
text-decoration: overline; <!--上划线 -->
text-decoration: line-through; <!--中划线 -->
text-decoration: none; <!--超链接去下划线 -->
超链接伪类 阴影
超链接伪类
a{ } <!--默认的颜色 -->
a:hover{ } <!--鼠标悬浮的状态 (只需要记住:hover) -->
a:active{ } <!--鼠标按住未释放的状态 -->
阴影
text-shadow:red 10px 10px -9px; <!--阴影颜色 水平偏移 垂直偏移 阴影半径 -->
列表
/* ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{
background: antiquewhite;
}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
背景
背景颜色
background:
背景图片
background-image:url("图片路径");
background-repeat: ;/*图片默认全部平铺 repeat;*/
渐变
background-color: ;
background-image:linear-gradient();
盒子模型
margin: 外边距 padding:内边距 border:边框
边框
boder: 粗细(width) 样式(style) 颜色(color);
/*注意:
body总是有一个默认的外边距margin: 0;*/
/*常见操作:
h1,a,ui,li,body{
marrgin:0;
padding: 0;
text-decoration: none;
}
*/
内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边距</title>
<!--居中元素 margin: 0 auto;-->
<style>
#box{
width: 300px;
border: 1px solid red;
}
/*顺时针
margin:0; 边距为0
margin:0 1px; 上下 左右
margin:0 1px 2px 3px; 上下左右
*/
h2{
font-size: 16px;
background-color: #62e0ff;
line-height: 25px;
color: white;
margin: 1px 2px 3px;
}
form{
background: #62e0ff;
}
input{
border: 1px solid black;
}
div{
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<spean>用户名:</spean>
<input type="text">
</div>
<div>
<spean>密码:</spean>
<input type="text">
</div>
<div>
<spean>邮箱:</spean>
<input type="text">
</div>
</form>
</div>
</body>
</html>
圆角边框
<style>
div{
width: ;
height: ;
border: ;
border-shadow: ; /*圆角 左上和右下 右上和坐下*/
}
</style>
盒子阴影
<style>
div{
box-shadow: ;
}
</style>
浮动
标准文档流
- 块元素 独占一行
h1~h6 p div 列表...
- 行内元素 不独占一行
spean a img strong...
dispaly 这个也是一种实现行内元素排列的方式,但是很多情况下使用float
<!--block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
none 块元素消失-->
dispaly: block ;
float
<!--left 左浮动 right 右浮动-->
float: ;
父级边框塌陷的问题
- clear
/*clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; */
- 解决方案
- 增加父级元素高度
# father{
border:1px #000 solid;
height: 800px;
}
- 增加一个空的div标签,清除浮动
<div class="clear"></div>
.class{
clear: both;
margin: 0;
padding: 0;
}
- overflow
在父级元素中增加一个 overflow: hidden;
- 父类添加一个 :after
#fater:after{
content:'';
dispaly: block;
clean: both;
}
小结
1.浮动元素后面增加空div (代码中尽量避免空div)
2.设置父类元素的高度 (元素假设有了高度,就会被限制)
3.overflow (下拉的一些场景避免使用)
4.父类添加一个伪类 :after (常使用)
定位
相对定位
/*相对于原来的位置,进行指定偏移,相对应的位置仍在标准文档流中!原来的位置会被保留*/
position: relative;/*相对定位 上下左右*/
top: -20px;
bottom: -10px;
left: 20px;
right: 20px;
练习:方块定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方块定位</title>
<style>
#box{
width: 300px;
height: 300px;
border: 2px solid red;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #e12142;
}
.a2,.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
绝对定位
/*注意:
1.没有父级元素定位大的前提下,相对于浏览器定位
2.假设父级元素存在定位,我们通常相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置,进行指定偏移,绝对定位后,不在标准文档中!原来的位置不会被保留
*/
position: absolute;/*绝对定位*/
top: -20px;
bottom: -10px;
left: 20px;
right: 20px;
固定定位
position: fixed;/*固定定位*/
z-index
z-index:0; /*层级 默认为0 最高无线*/
opacity: 1; /*背景透明度*/