什么是css
Cascading Style Sheet 层叠级联样式表
css:表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页
css入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style>标签中写css代码
语法：
选择器{
声明；
}
-->
<!--通过link标签链接css文件-->
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<h1>标题</h1>
</body>
</html>
h1{
color:red;
}
css三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style>标签中写css代码
语法：
选择器{
声明；
}
-->
<!--通过link标签链接css文件-->
<!-- 内部样式 -->
<style>
h1{
color: aqua;
}
</style>
<!-- 外部样式 -->
<!-- 链接式 -->
<link rel="stylesheet" href="css/style1.css">
<!-- 导入式 -->
<style>
@import url("css/style1.css");
</style>
</head>
<body>
<!--行内样式-->
<h1 style="color: blue">标题</h1>
</body>
</html>
外部样式两种引入方式
<!-- 链接式 -->
<link rel="stylesheet" href="css/style1.css">
<!-- 导入式 -->
<style>
@import url("css/style1.css");
</style>
三种基本选择器
标签选择器
选中一种标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器：通过标签改变属性 -->
<style>
h1{
color: aqua;
}
p{
color: chartreuse;
font-size: 20px;
}
</style>
</head>
<body>
<h1>你好</h1>
<h1>我是</h1>
<p>陈旭</p>
</body>
</html>
类选择器
选中一类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 类选择器 通过.类名设置 class为此类的元素的属性 可以复用 -->
<style>
.aaa{
color: aqua;
}
.bbb{
color: chartreuse;
}
</style>
</head>
<body>
<h1 class="aaa">你好我是陈旭</h1>
<p class="bbb">hello i am korychan</p>
</body>
</html>
id选择器
选中一个id（id全局唯一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#bbb{
color: chartreuse;
}
#aaa{
color: #000;
}
#ccc{
color: blue;
}
</style>
</head>
<!--id是唯一的不能复用 class可以复用-->
<body>
<h1 id="aaa">你好</h1>
<h1 id="bbb">我是</h1>
<h1 id="ccc">陈旭</h1>
</body>
</html>
三种选择器比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: black;
}
.xxx{
color: blue;
}
#aaa{
color: aqua;
}
</style>
</head>
<body>
<h1 class="xxx" id="aaa">标题1</h1>
<h1 class="xxx">标题2</h1>
<h1 >标题3</h1>
</body>
</html>
层次选择器
-
后代选择器
选择下面所有代的所有指定标签
-
子选择器
选择下面第一代的所有指定标签
-
相邻选择器
选择同一代下方的第一个指定标签
-
通用选择器
选择同一代下方的所有指定标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 选择body下的所有的p标签*/
/*body p{
background: blue;
}*/
/*子选择器 选择body下的第一代的p标签*/
/*body>p{
background: chartreuse;
}*/
/*相邻兄弟选择器 只选择class为aaa的下面的第一个同代的p标签（不包括class为aaa的元素本身）*/
/*.aaa+p{
background: aqua;
}*/
/*通用兄弟选择器 选择class为aaa的下面的所有的同代的p标签（不包括class为aaa的元素本身）*/
.aaa~p{
background: cadetblue;
}
</style>
</head>
<body>
<p>p1</p>
<p class="aaa">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
<li>
<p>p7</p>
</li>
</ul>
<p>p8</p>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选中ul的第一个子元素（只有当第一个元素是指定的元素（此处为li）才生效）*/
ul li:first-child{
background: aqua;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
background: sienna;
}
/*选中body的第一个元素（只有当第一个元素是指定的元素（此处为p）才生效，如果第一个元素不是p元素则不生效）*/
body p:nth-child(1){
background: black;
}
/*选中body的第2个元素类型为p的元素*/
body p:nth-of-type(2){
background: cornflowerblue;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>x1</p>
<p>x2</p>
<p>x3</p>
<ul>
<li>
你好
</li>
<li>
我是
</li>
<li>
陈旭
</li>
<li>
hhh
</li>
</ul>
</body>
</html>
a%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200814210743939.png&pos_id=img-lRfgRU4w-1709098068445)
属性选择器
<!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: aqua;
text-align: center;
color: antiquewhite;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*选中存在id属性的元素*/
a[id]{
background: black;
}
/*选中id为111的元素*/
/* “=” 是绝对等于的意思*/
a[id="111"]{
background: blue;
}
/*选中class中含有first的元素*/
/* ”*=“ 是包含的意思*/
a[class*="first"]{
background: sienna;
}
/*选中href以gif结尾的元素*/
/* “$=” 是以什么结尾的意思*/
a[href$="gif"]{
background: crimson;
}
/*选中href以adc开头的元素*/
/* “^=” 是以什么开头的意思*/
a[href^="adc"]{
background: cornflowerblue;
}
/* “=” 是绝对等于的意思*/
/* ”*=“ 是包含的意思*/
/* “$=” 是以什么结尾的意思*/
/* “^=” 是以什么开头的意思*/
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" target="_blank" class="link item first">1</a>
<a href="../resources/image/1.gif" id="111" class="link item second" title="test">2</a>
<a href="../resources/image/1.jpg" class="link item second">3</a>
<a href="abc">4</a>
<a href="/ac.pdf">5</a>
<a href="/a.pdf">6</a>
<a href="adc.doc">7</a>
<a href="abcd.doc" id="222" class="link item last">8</a>
</p>
</body>
</html>
css字体美化
span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font: oblique bold 100px "楷体";
/*第一个参数斜体，第二个参数加粗，第三个参数字体大写，第四个参数字体类型*/
}
</style>
</head>
<body>
学习<span id="title1">新思想</span>
</body>
</html>
字体美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
color: aqua;
}
p[class^="p"]{
font-family: Calibri 楷体;/*可以设置两钟字体，一种字体用于英文，另一种字体用于中文*/
font-size: 30px;
font-weight: lighter;
}
/*
color:字体颜色
font-family:字体
font-size:字体大小
font-weight:字体粗细
*/
</style>
</head>
<body>
<p class="p1">
蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。
</p>
<p class="p2">
蒹葭萋萋，白露未晞。所谓伊人，在水之湄。溯洄从之，道阻且跻。溯游从之，宛在水中坻。
</p>
<p class="p3">
蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。
</p>
<p class="p4">
On a slow boat to china.
</p>
</body>
</html>
文本样式
- 颜色：color：rgb / rgba / #000000~#FFFFFF
- 文本对齐：text-align: center / right / left / …
- 文本缩进：text-indent: 2em (两个字符) /2px (两个像素)
- 行高：line-heigth:
- 装饰：text-decoration：
- 文本图片水平对齐：vertical-align: middle;
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
/*颜色 #000000~#FFFFFF (白~黑)*/
/*rgb(255,255,255)红色数值，绿色数值，蓝色数值 （0~255）*/
/*color: rgb(255,255,255);*/
/*rgba(0,0,255,0.3) 红色数值，绿色数值，蓝色数值（0~255）,透明度（0~1.0）*/
color: rgba(0,0,255,0.3);
/*文本居中*/
text-align: center;
}
.p0{
/*头部缩进两个字符*/
text-indent: 2em;
/*头部缩进两个像素*/
/*text-indent: 2px;*/
/*背景颜色*/
background: aqua;
/*背景高度*/
height: 300px;
/*每一行都是一个块 行块的高度*/
line-height: 300px;
}
.p1{
/*下划线*/
text-decoration: underline blue;
/*去除下划线*/
/*text-decoration: none;*/
}
.p2{
/*中划线*/
text-decoration: line-through red;
}
.p3{
/*上划线*/
text-decoration: overline;
}
</style>
</head>
<body>
<h1>蒹葭</h1>
<p class="p1">
蒹葭苍苍，白露为霜。所谓伊人，在水一方。溯洄从之，道阻且长。溯游从之，宛在水中央。
</p>
<p class="p2">
蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。
</p>
<p class="p3">
蒹葭采采，白露未已。所谓伊人，在水之涘。溯洄从之，道阻且右。溯游从之，宛在水中沚。
</p>
<p class="p4">
On a slow boat to china.
</p>
<h1>大哥歇歇吧</h1>
<p class="p0">
这次在老家，刚见到大哥（80岁）时，他恰从田地里归来，朴素的衣、裤、鞋上沾有泥土，一副农忙的景象。我劝大哥：“还是要轻闲下来，年纪大了日晒雨露，无论怎么说对身体多少有影响。而今不必太劳累，歇歇吧！”
大哥说：“干了一辈子农活，习惯成自然，闲不下来，不干真不自在。城里人呆着，活动少，还要专门找什么运动，我挖土种地也就是在运动。并且得到老天爷关照，基本上没什么病。”
老家人经常谈起，大哥辛劳地忙农活，有时严寒酷暑，刮风下雨也要去，甚至还干些重活，我就油然而生一点酸楚滋味，触动思绪纷飞。
我的大哥一直在老家九龙山居住，尽管身体很硬朗，但难免毛病逐渐出现。大家极力劝他不要再种庄稼，他总是一意孤行。
这些年，农村的年轻人全部外出务工，很多的土地闲置，大哥却舍不得那一亩三分地，时光荏苒，情怀依旧，非得要留住庄稼地，保证常年的粮食蔬菜自足。还时常高兴地把自种的土豆、萝卜和玉米、大米等无污染的绿色食品，让我们带回家吃。
大哥出生穷困的久远时代，从小没读书，缺少知识，他仿佛一辈子只能与土地打交道，如今仍一心一意投身耕田种地。田地本是农民的命根子，若以前做不到这点，必定面临饥饿直至生存的挑战。
大哥的后人们在外挣钱，城里买了房，请他长期一起生活，他就是不习惯。特别是去年不小心把臂膀摔坏，手术治疗出院，大家以为从此可能歇息，然而他还是不想歇下来，拒阻挡要回农村，不久，他继续坚守原有的劳作。
大哥对土地的那份深沉、执著，与之结下的情缘，根深蒂固，明证他已离不开那片土地。我似乎才恍然大悟到他的闪光形象，这正彰显着中国农民典型的朴实、善良、勤劳、乐观的本质。
</p>
</body>
</html>
图片与文字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置span标签相对于img标签的位置，后面一个span是要设置的标签 前面一个img是参照的坐标*/
img,span{
/*middle 上下居中*/
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="../resources/image/1.gif" alt="">
<span>字在图片的中间哦！</span>
</p>
</body>
</html>
文本阴影和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
color: black;
}
/*设置鼠标悬停时的状态*/
a:hover{
color: red;
}
/*设置鼠标按住未释放的状态*/
a:active{
color: aqua;
}
/*设置阴影：四个参数分别为：阴影颜色 阴影横坐标 阴影纵坐标 阴影半径*/
.price{
text-shadow: aqua 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="../resources/image/java.jpg" alt="">
</a>
<p>
<a href="#">作者：Cay S. Horstmann</a>
</p>
<p>
<a href="#">简介：《JAVA核心技术(卷1):基础知识(原书第8版)》是《Java核心技术》的最新版。</a>
</p>
<p class="price">
价格：100￥
</p>
</body>
</html>
列表样式
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css+html/css/heros.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部英雄分类</h2>
<ul>
<li><a href="#">战士：</a> <a href="#">德玛西亚之力</a> <a href="#">诺克萨斯之手</a></li>
<li><a href="#">刺客：</a> <a href="#">影流之主</a> <a href="#">刀锋之影</a></li>
<li><a href="#">法师：</a> <a href="#">光辉女郎</a> <a href="#">邪恶小法师</a></li>
<li><a href="#">射手：</a> <a href="#">麦林炮手</a> <a href="#">瘟疫之源</a></li>
</ul>
</div>
</body>
</html>
css:
#nav{
background: rgba(122,122,122,0.55);
width: 350px;
}
.title{
text-indent: 1em;
font-family: "Calibri 楷体";
font-size: 40px;
background: crimson;
}
/*
列表样式：
list-style:
none 去掉圆点
circle 空心圆点
decimal 有序数字
square 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: crimson;
text-decoration: underline;
}
背景图片应用
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 800px;
border: 2px solid black;
background-image: url("../resources/image/2.jpg");
/*默认为x轴y轴全部平铺（repeat）*/
}
#div1{
/*只在水平x轴平铺*/
background-repeat: repeat-x;
}
#div2{
/*只在竖直y轴平铺*/
background-repeat: repeat-y;
}
#div3{
/*不平铺只显示一张图片*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
例2：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css+html/css/heros.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部英雄分类</h2>
<ul>
<li><a href="#">战士：</a> <a href="#">德玛西亚之力</a> <a href="#">诺克萨斯之手</a></li>
<li><a href="#">刺客：</a> <a href="#">影流之主</a> <a href="#">刀锋之影</a></li>
<li><a href="#">法师：</a> <a href="#">光辉女郎</a> <a href="#">邪恶小法师</a></li>
<li><a href="#">射手：</a> <a href="#">麦林炮手</a> <a href="#">瘟疫之源</a></li>
</ul>
</div>
</body>
</html>
css：
#nav{
background: rgba(122,122,122,0.55);
width: 350px;
}
.title{
text-indent: 1em;
font-family: "Calibri 楷体";
font-size: 40px;
/*background 四个参数为：背景颜色，背景图片 图片位置（x轴 y轴）图片铺开方式*/
background: crimson url("../../resources/image/d.jpg") 318px 19px no-repeat;
}
/*
列表样式：
list-style:
none 去掉圆点
circle 空心圆点
decimal 有序数字
square 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../../resources/image/r.jpg");
/*background-position 背景图片位置*/
background-position: 277px 1px;;
background-repeat: no-repeat;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: crimson;
text-decoration: underline;
}
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--镜像渐变/圆形渐变-->
<style>
body{
background-color: #0093E9;
/*渐变的三个参数：渐变的角度 ，渐变前的颜色 ， 渐变后的颜色*/
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
</style>
</head>
<body>
</body>
</html>
盒子模型和边框使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*外边距margin：*/
/*一个参数：四个方向边距一致*/
/*两个参数：上下边距 ， 左右边距*/
/*四个参数；上边距，右边距，下边距，左边距（顺时针）*/
/*内边距padding类似*/
body{
margin: 0;
}
.login{
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
height: 200px;
width: 250px;
border: black 1px solid;
margin: 0 auto;
}
h1{
font-size: 40px;
text-align: left;
margin: 0;
}
h2{
font-size: 20px;
text-align: center;
}
div:nth-of-type(1) input{
background: #80D0C7;
padding: 0;
}
div:nth-of-type(2) input{
background: #87d446;
padding: 0;
}
div:nth-of-type(3) input{
background: #e7c757;
padding: 0;
}
</style>
</head>
<body>
<div class="login">
<h2>会员登陆</h2>
<form action="#">
<div>
<p>用户名<input type="text"></p>
</div>
<div>
<p>密码<input type="password"></p>
</div>
<div>
<p>验证码<input type="text"></p>
</div>
</form>
</div>
</body>
</html>
margin: 0;
}
h2{
font-size: 20px;
text-align: center;
}
div:nth-of-type(1) input{
background: #80D0C7;
padding: 0;
}
div:nth-of-type(2) input{
background: #87d446;
padding: 0;
}
div:nth-of-type(3) input{
background: #e7c757;
padding: 0;
}
</style>
<div class="login">
<h2>会员登陆</h2>
<form action="#">
<div>
<p>用户名<input type="text"></p>
</div>
<div>
<p>密码<input type="password"></p>
</div>
<div>
<p>验证码<input type="text"></p>
</div>
</form>
</div>
[外链图片转存中…(img-KMwyePSk-1709098068451)]
扫一扫
1690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
