web前端中css的基本用法，详解以及示例
css基本使用
1.写在哪里
直接写在标签内
写在 style 标签内
使用外部 .css 文件
2.行间样式：优先度最高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="background: #0040ff;height: 200px">
div>
body>
html>
效果如下:
如果你不指定宽度，他会实行自适应，你拉多长就显示多长，如果不写高度的话就什么都没有。
3.内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/**/
div{
background:pink;
height:100px;
}
style>
head>
<body>
<!-- 行间样式-->
<div style="background: #0040ff;height: 200px">
div>
body>
html>
可以发现颜色没有变化，所以优先级：行间样式 > 内嵌样式
4.外链样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<!-- 外链样式-->
<link rel="stylesheet" href="web--02-css.css">
<style>
/**/
/*div{*/
/* background:pink;*/
/* height:100px;*/
/*}*/
style>
head>
<body>
<!-- 行间样式-->
<div style="background: #0040ff;height: 200px">
div>
body>
html>
可以看到颜色并没有改变，但是如果把外链样式挪到内嵌样式下面就变成外链样式的颜色了，但是一般是内嵌在外链的上面，所以是一般是行间>内嵌>外链
选择器
1.元素选择器
Title
?
1
2
3
4
四个元素都会改变颜色，只要是div的标签都会变色
2.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*元素选择器*/
div{
height: 30px;
width: 200px;
background: #0040ff;
}
/*id选择器*/
#qaz{
background: aqua;
}
style>
head>
<body>
<div class="qqq">1div>
<div id="qaz">2div>
<div>3div>
<div class="asd">4div>
body>
html>
所以优先级：id选择器 > 元素选择器，范围越小，优先度越高，像python中的异常捕获也是，id是唯一的
3.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*元素选择器*/
div{
height: 30px;
width: 200px;
background: #0040ff;
}
/*id选择器*/
#qaz{
background: aqua;
}
/*类选择器*/
.qqq{
background: blueviolet;
}
style>
head>
<body>
<div class="qqq">1div>
<div id="qaz" class="qqq">2div>
<div>3div>
<div class="asd">4div>
body>
html>
由上图可知，优先级：id选择器 > 类选择器
所以：id选择器 > 类选择器 > 元素选择器
4.复杂选择器
①群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div,p {
height: 50px;
background: #0040ff;
}
style>
head>
<body>
<div>div>
<p>p>
<div>div>
body>
html>
如果好多标签的样式一样，可以用逗号连接起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div,p,a {
height: 50px;
background: #0040ff;
}
style>
head>
<body>
<div>div>
<p>p>
<a href="">cgwecqgcreqerfcrewa>
body>
html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box,p{
height: 50px;
background: #0040ff;
}
style>
head>
<body>
?
<div class="box">div>
<p>p>
?
body>
html>
效果和上面一样
②兄弟选择器（~）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div~p{
height: 50px;
background: #0040ff;
}
style>
head>
<body>
<div>0div>
<p>1p>
<p>2p>
<p>3p>
<div>
<p>4p>
<p>5p>
div>
<p>6p>
<p>7p>
body>
html>
找与div为兄弟关系的p标签，也就是平级关系，只要是平级就行，不用管是否挨住，但自己不变
Title
0
1
2
3
4
5
6
7
效果同上
③相邻选择器（+）
Title
0
1
2
3
4
5
6
7
只改变div下面紧紧相邻的第一个p，也可以用类选择器（.box），注意顺序，如果变成p+div的话，就是p下面紧紧相邻的第一个div变
④子代选择器（>）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box>li{
list-style: none; /*把前面的排序圆圈去掉*/
height: 50px;
background: #0040ff;
}
style>
head>
<body>
<ul class="box">0
<li>1
<ul>
<li>ali>
<li>bli>
<li>cli>
ul>
li>
ul>
body>
html>
只能改变儿子，不能改变孙子及以后，连自己也不能改变，定位标签时可以用id，类选择器，比如有多个儿子，可以使用id，类选择器去定位改变具体的哪个儿子
⑤后代选择器（空格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div li{
list-style: none; /*把前面的排序圆圈去掉*/
height: 20px;
background: #0040ff;
}
style>
head>
<body>
<div>
<ul>
<li>我是孙子li>
ul>
div>
<ul>
<li>我是儿子li>
ul>
body>
html>
只要是div的后代，且为li的都会改变
⑥另外:div.box(中间没有空格，不是后代选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div.box{
height: 50px;
background: #0040ff;
}
style>
head>
<body>
<div class="box">qqqdiv>
<div class="qwe">llldiv>
<p class="box">xxxp>
body>
html>
首先是一个div，其次是class="box"，才会改变，定位的更详细了。
最详细：（效果和上面的一样）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body div#qqq{
height: 50px;
background: #0040ff;
}
style>
head>
<body>
<div class="box" id="qqq">qqqdiv>
<div class="qwe">llldiv>
<p class="box">xxxp>
body>
html>
5.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{ /* '*'是通配符，是指所有，因此它的优先级是最低的*/
padding: 0; /*边距，默认为零*/
margin: 0; /*边距，默认为零*/
}
/*未被鼠标点击*/
a:link{
color: #0040ff;
}
/*已被鼠标点击*/
a:visited{
color: olive;
}
/*鼠标悬停(放在上面但是不点)*/
a:hover{
color: chartreuse;
}
/*鼠标点击未释放(鼠标点击后不松手)*/
a:active{
color: deeppink;
}
style>
head>
<body>
<a href="https://www.baidu.com">12345a>
body>
html>
每种都是不同的颜色，其他标签也能产生这样的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{ /* '*'是通配符，是指所有，因此它的优先级是最低的*/
padding: 0; /*边距，默认为零*/
margin: 0; /*边距，默认为零*/
}
/*未被鼠标点击*/
a:link{
color: #0040ff;
}
/*已被鼠标点击*/
a:visited{
color: olive;
}
/*鼠标悬停(放在上面但是不点)*/
a:hover{
color: chartreuse;
}
/*鼠标点击未释放(鼠标点击后不松手)*/
a:active{
color: deeppink;
}
div:hover{
background: #0040ff;
}
div{
width: 200px;
height: 200px;
background: deeppink;
}
style>
head>
<body>
<a href="https://www.baidu.com">12345a>
<div>qqqqqdiv>
body>
html>
把div里面的span也变了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{ /* '*'是通配符，是指所有，因此它的优先级是最低的*/
padding: 0; /*边距，默认为零*/
margin: 0; /*边距，默认为零*/
}
/*未被鼠标点击*/
a:link{
color: #0040ff;
}
/*已被鼠标点击*/
a:visited{
color: olive;
}
/*鼠标悬停(放在上面但是不点)*/
a:hover{
color: chartreuse;
}
/*鼠标点击未释放(鼠标点击后不松手)*/
a:active{
color: deeppink;
}
div:hover span{
background: yellow;
color: #0040ff;
}
div{
width: 200px;
height: 200px;
background: deeppink;
}
style>
head>
<body>
<a href="https://www.baidu.com">12345a>
<div>
<span>
qqqqq
span>
div>
body>
html>
鼠标放入前后：
字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box1{
font-family: 'Constantia Black',"Gill Sans MT Ext Condensed Bold";
}
/*几种常用的大小单位:px，%，rem，em，em是父级字体，几em就是几倍父级大小，最常用是像素*/
.box2{
font-size: 200%;
}
.box4 span{
font-size: 2rem; /*谷歌浏览器默认字体是微软雅黑，大小是16，2rem就是2*16*/
}
/*粗细的四个关键词:normal(默认),lighter(细),bold(粗),bolder(特粗)
也能用数字去规定粗细，100-900，正常是400，尽量取整百
*/
.box5{
font-weight: bolder;
}
/*斜体:italic对于不能斜体的字体，将应用oblique，oblique就是倾斜的字体*/
.box6{
font-style: oblique;
}
/*rgb:三原色，rgb()里面写数字,rgba()里面除了三原色数字以外后面还得写透明度，透明度范围:0-1*/
/*还有一种十六进制也能选择颜色:#666666;如果六个数字一样的话可以简写为#666，#ff66ff可以简写为#ff66ff可以简写为#f6f*/
/*也可以直接写颜色名字，eg:red*/
.box7{
color: rgba(255,188,255,0.5);
}
style>
head>
<body>
<div class="box1">hello world1div>
<div class="box2">hello world2div>
<div class="box3">hello world3div>
<div class="box4">
<span>hello world4span>
div>
<div class="box5">hello world5div>
<div class="box6">hello world6div>
<div class="box7">hello world7div>
body>
html>
文本
1.宽度限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box{
width: 300px;
background: #0040ff;
}
style>
head>
<body>
<div class="box">
天地寂静，一道道目光，泛着各种情绪，呆呆的望着那站立在雕像顶部的那一道黑色身影，轻风吹动，黑衫飘荡，一头黑色头发披散而开，仅仅只是这么一道平淡无奇的背影，但在那种人的注视中，那道身影，却是仿若山岳般的浩瀚沉稳…
“萧炎…”
苏千等人的视线，也是极端错愕的停留在那道黑衫身影上，片刻后，原本绝望的心中，顿时涌现激动，今日，有救了？
“真的是他…”
萧玉玉手掩着红唇，虽然已是有着十数年不见，然而那熟悉的背影，却依然是不陌生，只不过，比起当年，似乎更加的沉稳。
div>
body>
html>
2.当一行显示不完时剩下的内容变成省略号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box{
width: 300px;
background: #0040ff;
white-space: nowrap; /*只显示一行,此时只有宽度内有颜色，剩下的所有文字一字排开*/
overflow: hidden; /*超出隐藏，超出宽度的部分消失了，只能隐藏，css不能查看*/
text-overflow:ellipsis; /*加省略号*/
}
style>
head>
<body>
<div class="box">
天地寂静，一道道目光，泛着各种情绪，呆呆的望着那站立在雕像顶部的那一道黑色身影，轻风吹动，黑衫飘荡，一头黑色头发披散而开，仅仅只是这么一道平淡无奇的背影，但在那种人的注视中，那道身影，却是仿若山岳般的浩瀚沉稳…
“萧炎…”
苏千等人的视线，也是极端错愕的停留在那道黑衫身影上，片刻后，原本绝望的心中，顿时涌现激动，今日，有救了？
“真的是他…”
萧玉玉手掩着红唇，虽然已是有着十数年不见，然而那熟悉的背影，却依然是不陌生，只不过，比起当年，似乎更加的沉稳。
div>
?
body>
html>
3.上划线，下划线，删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.box{
width: 300px;
background: #0040ff;
white-space: nowrap; /*只显示一行,此时只有宽度内有颜色，剩下的所有文字一字排开*/
overflow: hidden; /*超出隐藏，超出宽度的部分消失了*/
text-overflow:ellipsis; /*加省略号*/
}
p{
text-indent:2em; /*首行字缩进*/
line-height:30px; /*行高*/
letter-spacing:2px /*字间距*/
}
.wrap{
background: yellow;
width: 600px;
height: 100px;
line-height: 100px; /*上下居中，数值等于height*/
text-align: center; /*左右居中*/
}
style>
head>
<body>
<div class="box">
天地寂静，一道道目光，泛着各种情绪，呆呆的望着那站立在雕像顶部的那一道黑色身影，轻风吹动，黑衫飘荡，一头黑色头发披散而开，仅仅只是这么一道平淡无奇的背影，但在那种人的注视中，那道身影，却是仿若山岳般的浩瀚沉稳…
“萧炎…”
苏千等人的视线，也是极端错愕的停留在那道黑衫身影上，片刻后，原本绝望的心中，顿时涌现激动，今日，有救了？
“真的是他…”
萧玉玉手掩着红唇，虽然已是有着十数年不见，然而那熟悉的背影，却依然是不陌生，只不过，比起当年，似乎更加的沉稳。
div>
<p>
“既然来了，何必急匆匆的走？魂殿都被我毁了，你们这些残余，留着又有什么意思？”望着天空上分散而逃的魂殿强者，雕像头顶的黑衫青年，却是微微一笑，旋即其脚步轻抬，然后徐徐落下。
“砰砰砰！”
伴随着萧炎脚步的落下，一股恐怖的无形波动，顿时闪电般的蔓延而出，直接将那些逃窜的家伙追上，紧接着，天空上，那一道道黑影突然凭空爆成一团团血雾…
不论是斗宗或者是斗尊，都是毫无征兆的爆成血雾，甚至，连他们的灵魂，都是在那一霎被生生震爆。
p>
<p>
<span style="text-decoration: line-through">一道道目光，愣愣的望着天空上扩散而开的血雾，这一幕，诡异而华丽…span>
<!--line-through:删除线，underline:下划线，overline:上划线-->
在很多学员的眼中，这些魂殿的强者，仿佛就是自己突然爆炸一般，而这之中，那雕像上的人，连身形都是未曾有所移动。
“这实力…”
苏千与不远处的千百二老对视了一眼，眼中有着浓浓的骇然，杀斗尊就跟杀鸡一样，这实力，得多么的恐怖？
“萧炎，你保不了他们的！等我魂族大军开到，你们必死无疑！”
p>
<div class="wrap">
闻言，天空上的萧炎倒是无奈的摇了摇头，带着薰儿以及那几位联军中的斗圣强者在那众目睽睽下落下身来，冲着苏千一抱拳，笑道：“大长老，多年不见，别来无恙啊。”
div>
body>
html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
height: 500px;
width: 700px;
background-color: #0040ff;
background-image: url("dunhuang.jpg"); /*可以填网址*/
/*background-image后只能看到图片的某一个角落，所以要调整大小*/
background-size: cover; /*铺满背景大小(不论背景和图片尺寸是否一致)*/
}
style>
head>
<body>
<div>
div>
body>
html>
铺满一边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
height: 500px;
width: 700px;
background-color: #0040ff;
background-image: url("dunhuang.jpg"); /*可以填网址*/
background-size: contain; /*铺满一边*/
}
style>
head>
<body>
<div>
div>
body>
html>
移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
height: 500px;
width: 700px;
background-color: #0040ff;
background-image: url("dunhuang.jpg"); /*可以填网址*/
/*background-image后只能看到图片的某一个角落，所以要调整大小*/
background-size: cover; /*铺满背景大小(不论背景和图片尺寸是否一致)*/
background-position: 50px; /*移动，左移加负号，右移不用写符号*/
}
style>
head>
<body>
<div>
div>
body>
html>
上图移动后空出来的部分会自动用图片再补齐，如果移动后的的地方不想用图片补齐，则：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
height: 500px;
width: 700px;
background-color: #0040ff;
background-repeat: no-repeat; /*图片只显示一次*/
background-image: url("dunhuang.jpg"); /*可以填网址*/
/*background-image后只能看到图片的某一个角落，所以要调整大小*/
background-size: cover; /*铺满背景大小(不论背景和图片尺寸是否一致)*/
background-position: 50px; /*移动，左移加负号，右移不用写符号*/
}
style>
head>
<body>
<div>
div>
body>
html>
上下左右都移动则：
background-position: 50px 100px; (中间是空格)
如果只想一个方向上移动，则另一方向上写0即可