目录
一、CSS入门
1.基本介绍 :
2.CSS的作用 :
3.CSS的语法 :
二、CSS样式
1.字体颜色：
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>color demo</title>
<style type="text/css">
div {
width:250px;
height: 75px;
color:cornflowerblue;
background-color: rgb(0,255,255);
}
</style>
</head>
<body>
<div>
Hello, my name's Cyan_RA9
</div>
<br/>
<div>
I like play basketball.
</div>
<br/>
<div>
What about you?
</div>
</body>
</html>运行效果 :
2.边框 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border demo</title>
<style type="text/css">
div {
width: 50%;
height: 100px;
border: 2px darkcyan solid
}
</style>
</head>
<body>
<div>
Everyone wants to succeed, but what would you do if you failed?
</div>
</body>
</html>运行效果 :
3.背景颜色 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background_color demo</title>
<style type="text/css">
div {
width:400px;
height:75px;
background-color: pink
}
</style>
</head>
<body>
<div>
When faced with a big challenge where potential failure lurk at every corner,
</div>
<div>
Maybe you've heard this advice before---be more confident, and this is
</div>
<div>
what you think when you hear it : if only it were that simple.
</div>
</body>
</html>运行效果 :
4.字体样式 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font-style demo</title>
<style type="text/css">
div {
border: 2px purple dashed;
width: 400px;
height:100px;
font-size: 30px;
font-weight: bolder;
font-family: consolas;
color:darkgreen
}
</style>
</head>
<body>
<div>
but,what is confidence?
</div>
</body>
</html>运行效果 :
5.div块居中 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div block center Demonstration</title>
<style type="text/css">
div {
border: 5px darkcyan solid;
width: 500px;
font-size: 20px;
font-weight: bold;
font-family: consolas;
color:hotpink;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<div>
Take the belief that you're valuable,worthwhile and capable,<br/>
also known as self-esteem, adding the optimism that comes when <br/>
you're certain of your abilities, and then empowered by these, <br/>
act courageously to face the challenge head on.
</div>
</body>
</html>运行效果 :
6.div文本居中 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div block center Demonstration</title>
<style type="text/css">
div {
border: 5px darkcyan solid;
width: 550px;
font-size: 20px;
font-weight: bold;
font-family: consolas;
color:hotpink;
margin-left: auto;
margin-right: auto;
text-align: center
}
</style>
</head>
<body>
<div>
this is confidence. It turns thoughts into action,<br/>
so where does confidence even come from?
</div>
</body>
</html>运行效果 :
7.超链接去下划线 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>href none decoration demo</title>
<style type="text/css">
a {
border: 2px black dashed;
text-decoration:none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">点我去百度捏</a>
</body>
</html>运行效果 :
8.表格细线 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table line demonstration</title>
<style type="text/css">
table, tr, th, td {
border: 2px pink solid;
width: 300px;
border-collapse:collapse;
text-align: center
}
table {
border: 5px cornflowerblue solid;
}
</style>
</head>
<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>Cyan</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>Five</td>
<td>20</td>
</tr>
</table>
</body>
</html>运行效果 :
9.无序列表去样式 :
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>unorderedList</title>
<style type="text/css">
ul {
width: 500px;
border: 3px solid cornflowerblue;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>持国天王</li>
<li>增长天王</li>
<li>广目天王</li>
<li>多闻天王</li>
</ul>
</body>
</html>运行效果 :
三、CSS引入方式
1.行内式：
1° 说明
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The way to introduce CSS No.1</title>
</head>
<body>
<div style="border: 2px darkcyan dashed; width:500px;text-align: center;font-family: consolas">
Two, how you're treated? This includes the social pressure of your environment.
</div>
<br/>
<div style="border: 2px darkcyan dashed; width:500px;text-align: center;">
And three, the part you have control over:the choice you make, the risk you take,<br>
and how you respond to challenges and setbacks.
</div>
<br/>
<div style="border: 2px darkcyan dashed; width:500px;text-align: center;">
It isn't possible to completely untangle these three factors, but the personal <br/>
choices we make certainly play a major role in confidence development.
</div>
</body>
</html>运行效果 :
3° 问题分析
2.写在head标签的style子标签中 :
1° 说明
2° 问题分析
3.以外部文件的形式引入 :
1° 说明
2° 演示
首先创建CSS文件，如下图所示 :
demo.css代码如下 :
div {
border: 3px plum solid;
width:450px;
background-color: cornflowerblue;
font-family: consolas;
font-weight:bold;
text-align:center
}
span {
font-size: 20px;
color: peru;
}HTML文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The way to introduce CSS No.3</title>
<link href="../../../css/demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div>
So,by keeping in mind some practical tips, we do actually have the power
to cultivate our own confidence.
</div>
<span>tip one---a quick fix</span>
</body>
</html>运行结果 :
四、CSS选择器
1.元素选择器 :
1° 介绍
2° 演示
上文中用到的选择器全部是元素选择器。
2.ID选择器 :
1° 介绍
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id selector</title>
<style type="text/css">
#div1 {
border:3px cornflowerblue dashed;
background-color: bisque;
width: 450px;
font-weight: bold;
font-family: consolas;
text-align: center;
}
#div2 {
border:3px hotpink dashed;
background-color: cornflowerblue;
width: 550px;
font-weight: bold;
font-family: consolas;
text-align: center;
}
#div3 {
border:3px darkblue dashed;
width: 300px;
font-weight: bold;
font-family: consolas;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
There are a few tricks that can give you immediate confidence boost in a short term,
picture your success when you beginning a difficult task,
</div>
<br/>
<div id="div2">
something as simple as listening to music with deep bass,it can promote
feelings of power, you can even strike a powerful pose or give yourself a pep talk.
</div>
<br/>
<div id="div3">
Tip two---believe in you ability to improve.
</div>
</body>
</html>运行效果 :
3.类选择器 :
1° 介绍
2° 演示
代码如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class selector demo</title>
<style type="text/css">
.c1 {
border: 2px palegreen solid;
background-color: bisque;
width: 450px;
font-family: consolas;
}
</style>
</head>
<body>
<div class="c1">
If you're looking for a long-term change,consider the way you think about
your abilities and talents.Do you think there fixed at birth? or that they
can be developed like a muscle.
</div>
<div>
There beliefs matter because they can influence how you react when you're
faced with setbacks.
</div>
<div class="c1">
If you have a fixed mindset,meaning that you think your talents are locked in place,
you might give up, assuming you've discovered something you're not very good at.
</div>
</body>
</html>运行效果 :
4.组合选择器 :
1° 介绍
2° 演示
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>combination of selector</title>
<style type="text/css">
p,#pDemo,.pDemo2 {
border:3px cornflowerblue solid;
background-color: palegreen;
width: 450px;
font-family: consolas;
font-weight: bold;
}
</style>
</head>
<body>
<p>
But if you have a growth mindset and think your abilities can improve,
a challenge is an opportunity to learn and growth.
</p>
<span id="pDemo">
Neuroscience supports the growth mindset.
</span>
<br/><br/>
<div class="pDemo2">
The connections in your brain do get stronger and grow with study and practice.
</div>
</body>
</html>运行效果 :
