CSS学习
CSS快速入门
导入css的几种方式：
-
链接式（link标签）
<link rel="stylesheet" href="../css/Style.css"> -
内部样式（style标签）
<style> h1{ color:green; } </style> -
导入式- css2.1的方式（@import）---不推荐使用，了解即可
<style> @import url("../css/Style.css"); </style>导入的优先级：就近原则
三种选择器-重要
-
标签选择器
标签{}
<style> h1{ color:green; } </style> -
类选择器（可跨标签）
.类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器学习</title> <style> .phil01{ color:green; } .phil02{ color:red; } </style> </head> <body> <h1 class="phil01">选择器学习</h1> <h1 class="phil02">选择器学习</h1> <h1 class="phil03">选择器学习</h1> <h1 class="phil04">选择器学习</h1> </body> </html> -
id选择器
id名称{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器学习</title> <!-- id选择器--> <style> #phil{ color: red; } </style> </head> <body> <h1 id="phil">选择器学习</h1> </body> </html>
注意：不遵循就近原则
优先级：id选择器 > 类选择器 > 标签选择器
层次选择器
-
后代选择器
在某个元素的后面 祖爷爷 爷爷 爸爸 你
<style> body p{ background: red; } </style> -
子选择器
一代 儿子
<style> body>p{ background: green; } </style> -
相邻兄弟选择器
下方的某一个相同元素 同辈
<style> .aaa+p{ background: red; } </style> -
通用选择器
下方的所有相同元素 同辈
<style> .aaa~p{ background: yellow; } </style>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{
background: red;
}
</style>
<!-- 选择当前标签的父级，然后选择父级的第N个元素
注意：需要是当前元素才能生效！当第N个元素不是定义的标签时，无效
-->
<style>
p:nth-child(2){
background: blue;
}
</style>
<!-- 选择父级元素中该类型的第二个元素-->
<style>
p:nth-of-type(2){
background: yellow;
}
</style>
<!-- 鼠标移动上去后的效果-->
<style>
p:hover{
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<h1>ddd</h1>
<p class="aaa">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
效果图：
属性选择器
类似正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left;/*左对齐*/
display:block;/*设置块样式*/
background: blue;/*蓝色背景*/
width:50px;/*宽度*/
height:50px;/*高度*/
border-radius:10px;/*圆角*/
text-align:center;/*居中*/
color:gray;/*灰色字体*/
text-decoration:none;/*去掉下划线*/
margin-right: 5px;/*偏移量--间距*/
font: bold 20px/50px Arial;/*字体样式*/
}
.demo a[id]{
background: white;
}
.demo a[id="phil"]{
background: yellow;
}
.demo a[class*="this"]{
color:red;
}
.demo a[class$="this"]{
color: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="this is the first item" id="phil" title="I am title">1</a>
<a href="MyFirstCSS.html" class="this is the second item" title="I am title2">2</a>
<a href="Mysdfaljfql.png" class="my name is three" id="phil3">3</a>
<a href="aMysdfaljfql.jpg" class="my name is four this">4</a>
<a href="/a/b/c.jpg" class="five">5</a>
<a href="/a/b/e.png" class="six~">6</a>
<a href="image/123/13.jpg" class="seven---">7</a>
<a href="myd.doc" class="eight>>>">8</a>
<a href="mydiu.doc" class="nine<<<">9</a>
</p>
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!--
1. span标签：约定用span标签，想要重点突出的字
-->
<!-- span标签样式-->
<style>
h1{
/*对齐方式--居中*/
text-align: center;
}
span{
/*字体大小*/
font-size: 50px;
}
body{
/*字体样式：serif*/
font-family: serif;
}
.p1{
/*字体加粗*/
font-weight: bolder;
/*字体红色*/
color: red;
/*首行缩进2个字符*/
text-indent: 2em;
}
<!-- 字体风格-->
.p2{
/*字体 斜体 细 12px大小 emoji字体样式*/
font: oblique lighter 12px emoji;
}
</style>
</head>
<body>
<h1><span>无极</span>片段</h1>
<p class="p1">
一个小女孩在战场上横七竖八的尸体间寻找食物。一个身份尊贵的男孩说，如果她同意做他的奴隶，
那么他将给她一点吃的。小女孩接受了，但很快违背了承诺并带着食物逃跑，去寻找她的母亲。
跑到黑暗中时，小女孩遇到了一位漂亮的女巫。女巫问：“你想成为全世界男人都想要追求的公主吗？
但代价是你将永远无法体验到真爱和快乐。你接受吗？”“我愿意。”女孩回答。
</p>
<p class="p2">
其间，大将军穿上了他那闪亮的、绣满花纹的红色盔甲，正准备一场可能会成为有生以来第一次失败的壮烈战斗。
难以置信的是，刚纳入麾下的年轻奴隶对于战斗的结果具有决定作用。由于年轻奴隶超凡的才能——“超越风的速度”；
大将军再次体验了胜利的滋味。在部队庆功时，皇城中却传出了公爵叛乱的消息。光明大将军必须立刻班师回朝从敌方入侵者手中救出国王。
他命令年轻的奴隶随他一起，但在经过一片黑暗森林时，这两人却被神秘的分开了。这时女巫出现在大将军面前，打开命运之图，
图上显示一个穿着将军盔甲的人杀了国王。大将军不相信命运的力量，仰天长笑后他拔剑指向女巫，这时女巫不见了。
</p>
</body>
</html>
文本样式
- 颜色 color:red;
- 文本对齐方式 text-align:center;
- 首行缩进 text-indent:2em;
- 行高 line-height: 50px;
- 装饰 text-decoration: underline（下划线）、overline（上划线）、line-through（中划线）;
- 文本图片水平对齐 vertical-align: center
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1. 颜色
2. 文本对齐方式
3. 首行缩进
4. 行高
5. 装饰（上划线、中划线、下划线）
6. 文本图片水平对齐
-->
<style>
.p1{
/*1. 字体颜色*/
color: red;
/*2. 字体对齐*/
text-align: center;
}
.p2{
/*3. 首行缩进*/
text-indent: 2em;
background: blue;
height: 50px;
/*4. 行高*/
line-height: 20px;
}
.p3{
/*5. 下划线*/
text-decoration: underline;
}
.p4{
/*5. 中划线*/
text-decoration: line-through;
}
.p5{
/*5. 上划线*/
text-decoration: overline;
}
img,p6{
/*文本图片水平对齐*/
vertical-align:middle;
}
</style>
</head>
<body>
<p class="p1">
一个小女孩在战场上横七竖八的尸体间寻找食物。一个身份尊贵的男孩说，如果她同意做他的奴隶，
那么他将给她一点吃的。小女孩接受了，但很快违背了承诺并带着食物逃跑，去寻找她的母亲。
跑到黑暗中时，小女孩遇到了一位漂亮的女巫。女巫问：“你想成为全世界男人都想要追求的公主吗？
但代价是你将永远无法体验到真爱和快乐。你接受吗？”“我愿意。”女孩回答。
</p>
<p class="p2">
其间，大将军穿上了他那闪亮的、绣满花纹的红色盔甲，正准备一场可能会成为有生以来第一次失败的壮烈战斗。
难以置信的是，刚纳入麾下的年轻奴隶对于战斗的结果具有决定作用。由于年轻奴隶超凡的才能——“超越风的速度”；
大将军再次体验了胜利的滋味。在部队庆功时，皇城中却传出了公爵叛乱的消息。光明大将军必须立刻班师回朝从敌方入侵者手中救出国王。
他命令年轻的奴隶随他一起，但在经过一片黑暗森林时，这两人却被神秘的分开了。这时女巫出现在大将军面前，打开命运之图，
图上显示一个穿着将军盔甲的人杀了国王。大将军不相信命运的力量，仰天长笑后他拔剑指向女巫，这时女巫不见了。
</p>
<p class="p3">111111</p>
<p class="p4">222222</p>
<p class="p5">333333</p>
<p class="p6"><img src="../../../resources/image/mbg.png" alt="666" class="img">这是一段文字</p>
</body>
</html>
超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<style>
/* 设置样式 */
a{
text-decoration: none;
color: blue;
}
/*鼠标移动至区域的效果*/
a:hover{
color:yellow;
}
/*点击效果*/
a:active{
background:red;
}
/*阴影*/
#price{
text-shadow: orange 1px 1px 1px;
}
</style>
</head>
<body>
<a href="#">
<img src="../../../resources/image/qbs.png" alt="666">
</a>
<p>
<a href="">书名：乔布斯传</a>
</p>
<p>
<a href="">作者：沃尔特・艾萨克森</a>
</p>
<p>
<a href="" id="price">￥80</a>
</p>
</body>
</html>
阴影样式
text-shadow: 颜色 x偏移量 y偏移量 阴影圆角
样式练习
目标样式
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="../css/列表样式练习style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品类别</h2>
<ul>
<li><a href="#">图书1</a> <a href="#">音响1</a> <a href="#">数字商品1</a></li>
<li><a href="#">图书2</a> <a href="#">音响2</a> <a href="#">数字商品2</a></li>
<li><a href="#">图书3</a> <a href="#">音响3</a> <a href="#">数字商品3</a></li>
<li><a href="#">图书4</a> <a href="#">音响4</a> <a href="#">数字商品4</a></li>
<li><a href="#">图书5</a> <a href="#">音响5</a> <a href="#">数字商品5</a></li>
<li><a href="#">图书6</a> <a href="#">音响6</a> <a href="#">数字商品6</a></li>
<li><a href="#">图书7</a> <a href="#">音响7</a> <a href="#">数字商品7</a></li>
<li><a href="#">图书8</a> <a href="#">音响8</a> <a href="#">数字商品8</a></li>
</ul>
</div>
</body>
</html>
css代码
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 30px;
background: red;
}
ul li{
font-size: 20px;
font-weight: bold;
list-style: none;
text-indent: 1em;
line-height: 30px;
}
a{
color: black;
text-decoration: none;
}
a:hover{
background: yellow;
}
背景图片及渐变色
- 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图和渐变练习</title>
<style>
div{
width: 1000px;
height: 800px;
border: 1px solid green;
background-image: url("../../../resources/image/mbg.png")
}
.div1{
/*左右平铺*/
background-repeat: repeat-x;
}
.div2{
/*放一张原图*/
background-repeat: no-repeat;
/*设置位置*/
background-position: 200px 300px;
}
.div3{
/*上下平铺*/
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="div1">2222</div>
<div class="div2">2222</div>
<div class="div3">22222</div>
</body>
</html>
- 渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
</style>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号