1.CSS样式的层叠性
层叠性就是说对同一个文本进行设置的时候最后设置的样式会覆盖掉前面设置的样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式的层叠性</title>
<style>
.demo {
width: 200px;
height: 200px;
background-color: red;
}
.desc {
background-color: green;
}
.demo {
background-color: black;
}
</style>
</head>
<body>
<div class="demo desc">
</div>
</body>
</html>
效果如下
层叠性
2.CSS的复合样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的复合样式的设置方法</title>
<style>
.demo {
height: 200px;
width: 200px;
/*进行复合样式的设置*/
background: 20px 20px url("../imageSource/eg_bulbon.gif") gray no-repeat;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
3.CSS中的display
在CSS中可以用display将一个行内标签变成块级标签，简单的说块级标签就是独占一行的标签。行内标签可以和其他标签公用一行。
在这里要注意行内标签和块级标签有以下区别:
区别
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display对标签进行设置</title>
<style>
/*用display可以将块级标签变成行内标签*/
span {
background-color: aquamarine;
display: block; /*将行内标签变成块级标签*/
display: none;/*讲一个标签的display标记为none代表的是将这个标签移除掉*/
}
.strong {
background-color: #ff558a;
display: block;
visibility: hidden;/*将这个标签的可见性设置为隐藏,但是还会占用界面的空间!*/
}
strong {
height: 200px;/*行内标签无法设置宽高,只能靠行内标签的文本中的内容的多少来撑开它的宽高*/
background-color: darkgrey;
}
/*行内块和块级标签是可以设置宽和高*/
div {
background-color: darkgreen;
height: 400px;
}
/*div本身是一个块级标签但是用display将它设置为行内块标签*/
.demo {
display: inline-block;
background-color: chartreuse;
height: 800px;
}
</style>
</head>
<body>
<!--行内标签--可以和其它标签共用一行-->
<strong class="strong">这是一个strong标签</strong>
<strong>这是第二个strong标签</strong>
<span>这是一个span标签</span>
<!--块级标签---独占一行的标签-->
<div>这是一个div标签</div>
<div class="demo">
这是一个行内块标签
</div>
</body>
</html>
4.颜色的设置的几种方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色设置的几种方式</title>
<style>
div {
background-color: red;/*直接设置颜色的样式 缺点:有些颜色无法用这种方式设置*/
}
span {
background-color: rgb(30,99,178);/*rgb三原色组合的颜色设置方式*/
}
p {
background-color: #3099B2;/*16进制颜色设置方式,r=30 , g=99, b=b2(超过100的数用16进制数表示),这种方法基于rgb设置法*/
}
</style>
</head>
<body>
<div>
第一种颜色的设置方式
</div>
<span>第二种颜色的设置方式</span>
<p>第三种颜色的设置方式</p>
</body>
</html>
5.字体的格式设置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的格式设置</title>
<style>
p {
font-family: "微软雅黑";
}
span {
font-family: "黑体","Apple Color Emoji";
font-family: "Arial";
}
</style>
</head>
<body>
<p>这是第一个段落标签</p>
<span>这是第二个段落标签</span>
<div>这是第三个段落标签</div>
<strong>这是第四个段落标签</strong>
</body>
</html>
6.字体样式的设置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式的设置</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<p>
这是一段用来演示的demo
</p>
</body>
</html>
7.设置字间距
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置字间距</title>
<style>
.demoOne {
/*对中文和英文都有影响*/
letter-spacing: 10px;
}
.demoTwo {
/*只会对英文的字间距产生影响*/
/*注意如果中文之间有空格的话那么这个空格的间距会变成30px*/
word-spacing: 30px;
}
</style>
</head>
<body>
<p class="demoOne">
这是一段测试文本,百度网址是:http://www.baidu.com
</p>
<p class="demoTwo">
这是第二段 测试文本, I am iron man
</p>
</body>
</html>
