web前端之 CSS
web前端之 CSS
CSS概述
CSS 指层叠样式表 (Cascading Style Sheets),说白了就是给html代码穿上好看的衣服，让页面变得好看
CSS存在形式
1、在标签的属性中设置，优先级较高
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 使用style属性给标签添加css样式 -->
<div style="background-color:red; color:white"> <!-- 给div添加红色背景，并且div里面的字体颜色为白色 -->
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>效果图如下
2、在style标签中设置 优先级低于标签选择器
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>效果图如下
3、在css文件中设置，然后在html的头部中引入该css文件
代码如下
- main.css代码
/*css样式表*/
div {
background-color: red;
color: white;
}- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>效果图如下
4、!important 强制优先级最高
代码入下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
在css中，如果样式发生冲突，默认是最下面的优先级最高，但是给样式指定!important之后，该样式则优先级为*，不管该样式放在那里，优先级都为最高优先级
*/
.c1{
background-color: yellow;
color: white !important; /* 强制优先级最高,这条生效 */
}
.c2{
background-color: red; /* 这条生效 */
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>效果图如下
5、绝对路径高于相对路径
代码入下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{
color: red;
}
/* 绝对位置样式优先级高于下面的.b相对位置样式 */
.a .b{
color: #00a2ca;
}
.c{
color: #0000aa;
}
.b{
color: #4e515e;
}
</style>
</head>
<body>
<div class="a">
aa
<div class="b">bb</div>
</div>
<div class="c">
<div class="b">cbb</div>
</div>
</body>
</html>效果图如下
CSS选择器 -- 找到标签
在我们给html代码添加样式之前，先要找到对应的标签才可以给标签添加相应的样式
1、标签选择器
使用标签进行定位，例如下面的代码，针对当前html文件中所有的div标签生效
div{background-color:red;}2、class选择器
使用class属性进行定位，例如下面的代码，针对所有标签中class属性等于top的标签生效
.top{
background-color: red;
}3、id选择器
使用id属性进行定位，例如下面的代码，针对所有标签中id属性等于s1的标签生效,在html代码中，id属性的值要唯一
#s1{
background-color: red;
}
4、层级选择器
比如我想对div标签下面的a标签进行设置
div a{
background-color: red;
}5、组合选择器
比如需要将div标签，p标签，input标签的背景颜色设置为红色
div,p,input{ background-color:red; }6、属性选择器
html代码：
<div>
<div class="c1" a="1">a</div>
<div class="c1" a="2">b</div>
<div class="c1">c</div>
<div class="c1">d</div>
<div class="c1" a="1">e</div>
</div>
css样式代码：
.c1[a='1']{
color: red;
}css样式
一些基本的css样式
color: red; /*字体颜色为红色*/
width: 40px; /*宽度40像素*/
height: 50px; /*高度50像素*/
backgroud /*设置背景*/
backgroud-color: red; /*背景颜色*/
background-image: url("xxx.jpg"); /*背景图片*/
background-repeat: (no-repeat;repeat-x;repeat-y); /*设置背景图片是否重复，以及如何重复*/
background-position: -105px -112px; /*显示大图中的某一小块，比如 background-image:url('image/5.png'); height: 80px;background-repeat:no-repeat; background-position:-105px -112px;*/
设置透明度：
opcity: 0.6;
backgroud:rgb(0, 0, 0, .6);
border /*设置边框*/
<div style="border:1px solid red; height: 10px;"></div> /*实线：solid 虚线：dotted dashed */
margin /*外边距*/
margin-top: 20px; /*上边距*/
margin-bottom: 20px; /*下边距*/
margin-right: 20px; /*右边距*/
margin-left: 20px; /*左边距*/
padding /*内边距*/
padding-top: 20px; /*上边距*/
padding-bottom: 20px; /*下边距*/
padding-right: 20px; /*右边距*/
padding-left: 20px; /*左边距*/
display /*元素显示方式*/
display: none; /*不显示，隐藏*/
display: block; /*将内联标签变为块级标签，具有占一整行的特性，块级标签的特性是：占一整行，可以设置宽度和高度*/
display: inline; /*将块级标签变为内联标签，变为自己有多少就占多少，内联标签的特性是：自己有多少占多少，设置宽度和高度无效*/
display: inline-block; /*让标签变为有多少占多少，但是可以设置宽度和高度，及内联标签和块级标签的特性为一体*/
cursor /*自定义光标图形*/
cursor: pointer; /*小手图标*/
cursor: help; /*帮助图标，鼠标图形带一个问号*/
cursor: wait; /*一直转的图标*/
cursor: move; /*移动的图标*/
cursor: crosshair; /*十字架的图标*/
float /*让标签浮动起来,脱离父标签*/
float: left; /*左浮动*/
float: right; /*右浮动*/
clear:both /*这个属性需要配合float来使用,当子标签漂浮起来之后,父标签就不会被撑起,在父标签内部的末尾标签添加该属性可以将漂浮起来的子标签拽回来,将父标签填充满，例如：*/
<div style="width: 500px; border: 1px solid red;">
<div style="width: 20%; background-color: aqua; float: left">f</div> ① 当子标签浮动起来之后，就会脱离父标签
<div style="width: 30%; background-color: hotpink; float: left">a</div>
<div style="clear: both"></div> ② 通过在父标签内部的末尾添加一行该代码可以将子标签拽回来，给父标签进行填充
</div>
position /*定位*/
position: fixed; /*绝对定位，固定在窗口的某个位置，例如返回顶部的按钮图标，拉动滚动条，返回顶部一直出现在窗口的固定位置*/
<body>
<div style="height: 1000px; background-color: #ddd;"></div>
<div style="position: fixed; right: 200px; bottom: 100px;">返回顶部</div>
</body>
position: absolute; /*绝对定位。针对页面定死，拉动浏览器右侧滚动条，该元素会消失*/
position: relative; /*相对定位，根据元素所在的位置进行移动*/
absolute + relative 例子：
<body>
<div style="height: 500px; width: 400px; border: 1px solid red; position: relative">
<div style="bottom: 0; right: 0; position: absolute">
111
</div>
</div>
</body>
z-index /*如果出现覆盖的情况，该值大的元素在最上面显示*/css样式-伪类
- hover 被选中
- before 在什么之前操作什么
- after 在什么之后操作什么
例子：利用伪类的特性在div中的文本之前和之后添加东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 当鼠标放到class="c1"的标签上时,改变该标签内文本的颜色 */
.c1:hover{
color: #0000aa;
}
/* 在class="c2"标签内文本的最前面添加下面的文本 */
.c2:before{
content: "ccc";
}
/* 在class="c2"标签内文本的最后面添加下面的文本 */
.c2:after{
content: "aaa";
}
</style>
</head>
<body>
<div class="c1">aaa</div>
<div class="c2">bbb</div>
</body>
</html>效果图
例子：利用伪类清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left{
float: left;
}
.clearfix:after{
content: '.'; /*在元素中添加文本.,用来使背景显示出来*/
clear: both; /*在左右两侧均不允许浮动元素*/
display: block;
visibility: hidden; /*设置元素不可见,但是所占位置还在*/
height: 0;
}
</style>
</head>
<body>
<div class="clearfix" style="background-color: red">
<div class="left" style="height: 100px; background-color: green;">1</div>
<div class="left">2</div>
</div>
</body>
</html>效果图
使用css作出的效果图
利用css样式做出上下左右三角形
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon-down{
display: inline-block;
border-right: solid 5px transparent;
border-left: solid 5px transparent;
border-top: solid 5px red;
border-bottom: solid 5px transparent;
}
.icon-up{
display: inline-block;
border-right: solid 5px transparent;
border-left: solid 5px transparent;
border-top: solid 5px transparent;
border-bottom: solid 5px red;
}
.icon-left{
display: inline-block;
border-right: solid 5px red;
border-left: solid 5px transparent;
border-top: solid 5px transparent;
border-bottom: solid 5px transparent;
}
.icon-right{
display: inline-block;
border-right: solid 5px transparent;
border-left: solid 5px red;
border-top: solid 5px transparent;
border-bottom: solid 5px transparent;
}
</style>
</head>
<body>
<!--向下三角-->
<div class="icon-down"></div>
<!--向上三角-->
<div class="icon-up"></div>
<!--向左三角-->
<div class="icon-left"></div>
<!--向右三角-->
<div class="icon-right"></div>
</body>
</html>-
效果图
后台界面框架
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.pg-header{
height: 70px; /*高度70像素*/
border: solid red 1px; /*1像素的红色实线边框*/
}
.pg-body .body-menu{
border: solid red 1px; /*1像素的红色实线边框*/
width: 200px; /*宽200像素*/
position: absolute; /*绝对定位,针对页面定位*/
top: 80px; /*距离顶部80像素*/
left: 0; /*靠左*/
bottom: 0; /*靠下*/
}
.pg-body .body-content{
height: 2000px; /*高度2000像素*/
border: solid red 1px; /*1像素的红色实线边框*/
position: absolute; /*绝对定位,针对页面定位*/
top: 80px; /*距离顶部80像素*/
left: 210px; /*距离左边210像素*/
right: 0; /*靠右*/
bottom: 0; /*靠下*/
overflow: auto; /*当元素内容超过元素设置的高度时,就出现滚动条*/
}
</style>
</head>
<body>
<!-- 顶部横条部分 -->
<div class="pg-header"></div>
<!-- 中间内容部分 -->
<div class="pg-body">
<!-- 左侧菜单栏部分 -->
<div class="body-menu"></div>
<!-- 右侧内容部分 -->
<div class="body-content">
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>-
效果图