前端CSS
基础语法
/*
CSS注释
*/
宽高的百分比是按照父级大小来计算的
CSS样式
CSS应用方式
内联式
在标签上写样式
<img src="..." style="height:100px" />
<div style="color:red;">中国联通</div>嵌入式
在head标签中写style标签
外联式
样式写到文件中，放到static目录下的css文件，class='c1'，c1是css文件中的变量名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>选择器
id选择器
id标准写法是id唯一性，所以不太常用
类选择器
标签选择器
所有的标签统一设置属性，同时设置多个标签h1,p,h2{color:gold}
属性选择器
后代选择器
找儿子 .类名>儿子标签名
找所有后代 .类名>标签名
背景颜色
背景图片
background-repeat属性 repeat-x：按照x轴平铺 repeat-x：按照y轴平铺 no-repeat：无平铺样式
background-repeat: no-repeat;
background-position: center; 这两个组合一起设置图片位置
background-position: center,top; 中间的顶部
background-attachment: fixed; 固定在一个位置
背景大小
样式覆盖逻辑
无重复全部应用。重复内容按照头部顺序覆盖，和标签内顺序无关。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<div class="c2 c1">中国联通</div>
</body>
</html>
声明不要覆盖样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red !important;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<div class="c2 c1">中国联通</div>
</body>
</html>
hover样式(伪类，冒号后边追加的)
hover正常应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
margin: 0 auto;
background-color: gold;
}
.c1:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>hover升级应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
color: red;
font-size: 18px;
}
.c1:hover {
color: green;
font-size: 50px;
}
.c2 {
height: 300px;
width: 500px;
border: 3px solid red;
}
.c2:hover {
border: 3px solid green;
}
.download {
display: none;
}
.app:hover .download {
display: block;
}
.app:hover .title{
color: red;
}
</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>
<div class="app">
<div class="title">下载APP</div>
<div class="download">
<img src="images/qcode.png" alt="">
</div>
</div>
</body>
</html>显示/隐藏
显示 display: none;
隐藏display: block;
after追加(伪类)
- 相当于后置处理追加内容
- 只对追加的内容设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content: '追加的内容';
font-size: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1">吴阳军</div>
<div class="c1">梁吉宁</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content: '追加的内容';
font-size: 50px;
background-color: green;
clear: both;
}
.c1{
float: right;
}
</style>
</head>
<body>
<div>
<div class="c1">吴阳军</div>
<div class="c1">梁吉宁</div>
<div class="c1">梁吉宁</div>
</div>
</body>
</html> 
块级标签和行内标签
宽高
宽高可以设置百分比
块级标签：默认有效（霸道，右侧区域空白，也不给你占用），div
行内标签：默认无效，span
综合块级行级属性
display: inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
display: inline-block;
height: 100px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<span class="c1">中国</span>
<span class="c1">联通</span>
<span class="c1">联通</span>
<span class="c1">联通</span>
</body>
</html>
5 文字设置
5.1 文字基本设置
- 大小 font-size: 58px;
- 颜色 color: #00FF7F;
- 字体 font-family: Microsoft Yahei;
- 加粗 font-weight: 50;
文字对齐方式
水平方向居中 text-align: center;
垂直方向居中 line-height: 59px; 文本框对应高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
text-align: center; /* 水平方向居中 */
line-height: 59px; /* 垂直方向居中 */
}
</style>
</head>
<body>
<div class="c1">智利</div>
</body>
</html>6 浮动模式
飘起来了，飞了，他飞了。没有浮动属性的在地面，会被盖住！
6.1 行内标签浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>左边</span>
<span style="float: right">右边</span>
</div>
</body>
</html>
6.2 块级标签浮动
脱离了父类，无法撑起来父类，需要增加
<div style="clear: both;"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: dodgerblue">
<div class="item">第一个</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div style="clear: both;"></div>
</div>
<div>你哦啊呀</div>
</body>
</html>
解决浮动元素对其他元素的影响
7 内边距
内边距，我自己内部设置一点距离。
上下左右为统一值，则为：padding: 20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer {
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>小朋友</div>
<span>行内</span>
</div>
</body>
</html>
8 外边距
外边距，我与别人加点距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
margin-top:20px;
background-color: gold;
height: 100px;
}
</style>
</head>
<body>
<div class="c1" ></div>
<div class="c1" ></div>
</body>
</html>
9 区域居中
margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
margin: 0 auto;
background-color: gold;
}
.c2{
height: 30px;
width: 50px;
border: 1px solid red;
margin: 0 auto;
background-color: green;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
10 透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1{
background-color: green;
opacity: 0.5;
}
.c1:hover{
opacity: 1;
}
</style>
</head>
<body>
<div class="c1">你好</div>
</body>
</html>
11 position 定位/位置
11.1 position: fixed;固定定位
11.1.1 永远在窗口的 右下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 150px;
height: 50px;
border: 1px solid red;
position: fixed;
right: 100px;
bottom:100px;
}
</style>
</head>
<body>
<div>
<div class="c1">吴阳军</div>
</div>
</body>
</html>11.1.2 居中设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 150px;
height: 50px;
border: 1px solid red;
position: fixed;
right: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div>
<div class="c1">吴阳军</div>
</div>
</body>
</html>
11.1.3 全屏覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: bisque;
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div>
<div class="c1"></div>
</div>
</body>
</html>11.2 位置定位
- position: relative 相当于参照物，相对定位。相对于自己添加相对属性前的位置，进行移动。
- absolute 相当于移动物，绝对定位，相对于已经定位的父级元素进行定位。
- 通常在使用绝对定位时，会将父级元素设置为相对定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
height: 100px;
border: 1px solid red;
position: relative;
}
.c1 .c2{
width: 110px;
height: 50px;
background-color: green;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>
<div class="c1">
<div class="c2">
</div>
</div>
</div>
</body>
</html>
12 border 边框
border: 1px solid red
- 1px 边框粗细
- solid 边框样式，实线。dotted 虚线
- red 边框颜色
13 鼠标放上去变为小手
cursor: pointer;
页面布局Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.title{
background: #0000FF;
height: 80px;
margin-bottom: 5px;
}
.content{
background: #FAEBD7;
height: 1000px;
}
.footer{
margin: 10px;
background: #9ACD32;
height: 100px;
}
.left{
width: 15%;
background: #00FFFF;
height: 100%;
float: left;
margin-right: 2px;
}
.right{
width: 80%;
background: #FF0000;
height: 100%;
float: right;
}
</style>
</head>
<body>
<!-- 顶部菜单栏 -->
<div class="title">
</div>
<!-- 中间的主题内容 -->
<div class="content">
<!-- 左边的菜单 -->
<div class="left"></div>
<!-- 右边的内容 -->
<div class="right"></div>
</div>
<!-- 底部的内容 -->
<div class="footer"></div>
</body>
</html>
上一篇： JavaWeb（1）
下一篇： ❤️创意网页：动态彩