1、css层叠性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css层叠性</title>
<style type="text/css">
p{
font-size: 12px;
font-family: "微软雅黑";
}
.special{
font-size: 24px;
}
#one{
color: red;
}
</style>
</head>
<body>
<p class="special" id="one">知识改变命运</p>
<p>知识改变命运</p>
<p>知识改变命运</p>
</body>
</html>
2、css优先性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css优先性</title>
<style type="text/css">
p{
color: green;
}
.blue{
color: blue;
}
#p1{
color: red;
}
</style>
</head>
<body>
<p id="p1" class="blue">我显示什么颜色呢？</p>
</body>
</html>
3、ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#p1{
color: red;
font-size:18px;
}
#p2{
color:green;
font-size:24px;
}
</style>
</head>
<body>
<p id="p1">有梦想谁都了不起</p>
<p id="p2">有勇气就会有奇迹</p>
</body>
</html>
4、text-overflow属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-overflow属性</title>
<style type="text/css">
p{
width: 400px; /*设置元素宽度*/
height: 100px; /*设置元素高度*/
border: 1px solid #000;/*设置元素边框*/
white-space: nowrap;/*设置元素文本不能换行*/
overflow: hidden;/*将溢出内容隐藏*/
text-overflow: ellipsis;/*用省略标记表示溢出文本*/
}
</style>
</head>
<body>
<p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿，
为绿茵重复单调的歌曲</p>
</body>
</html>
5、text-shadow属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-shadow属性</title>
<style type="text/css">
p{
font-family: "微软雅黑";
font-size: 24px;
}
.yy1{
text-shadow: 3px 3px 3px #666;/*给文字添加阴影，阴影在文字的右下方*/
}
.yy2{
text-shadow:-3px -3px 3px #666;/*给文字添加阴影，阴影在文字的左上方*/
}
</style>
</head>
<body>
<p class="yy1">昨夜星辰昨夜雨，画楼西畔桂堂东。</p>
<p class="yy2">身无彩凤双飞翼，心有灵犀一点通。</p>
</body>
</html>
6、并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
h1,h2,p{
font-size: 24px;
color:blue;
}
</style>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是段落文本</p>
<p>这是段落文本</p>
<p>这是段落文本</p>
</body>
</html>
7、服务器字体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@font-face{
font-family: FZJZJW; /*由开发者定义的服务器字体名称*/
src: url(font/FZJZJW.TTF); /*字体文件的来源*/
}
p{
font-family: FZJZJW; /*设置字体为服务器字体*/
font-size: 24px;
}
</style>
</head>
<body>
<p>如果你曾歌颂黎明，那么也请你拥抱黑暗。</p>
</body>
</html>
8、后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p strong{ /*后代选择器*/
font-size: 24px;
color: red;
}
strong{
color: blue;
}
</style>
</head>
<body>
<p>这是段落文本。段落文本包含<strong>红色的文字</strong></p>
<strong>这是其他文本</strong>
</body>
</html>
9、交集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
p{
color: red;
}
.special{
color: green;
}
p.special{ /*交集选择器*/
font-size:40px;
}
</style>
</head>
<body>
<p>这是段落文本</p>
<h2>这是二级标题</h2>
<p class="special">这是段落文本</p>
<h2 class="special">这是二级标题</h2>
</body>
</html>
10、类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.text{
font-size: 16px;
color:#00F;
font-family: "微软雅黑"; /*设置字体*/
font-weight: normal; /*设置文本不加粗*/
}
</style>
</head>
<body>
<h2 class="text">这是二级标题</h2>
<p class="text">这是段落标记</p>
<p>这是段落文本</p>
</body>
</html>
11、内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<style type="text/css">
h1{text-align: center;color:#F00;}
p{font-size: 16px;color:#333;}
</style>
</head>
<body>
<h1 style="text-align: center;color:#F00">学院简介</h1>
<p>学院是省人民政府批准设立、教育部备案的省属公办的全日志普通高中。学院秉持“以服务发展为宗旨
、以促进就业为导向”的办学方针，遵循“以人为本，德技双馨，产教融合，服务社会，以建设有特色高水平
的高职院校”为目标，建设了开放创新的强效模式，积累了优秀的教育资源，形成了良好的育人环境。学校
的管理水平教育质量、办学特色得到社会各界的广泛肯定。</p>
</body>
</html>
12、链接外部样式表
h1{
text-align: center;
color: #F00;
}
p{
font-size: 16px;
color: #333;
text-indent: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接外部样式表</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>学院简介</h1>
<p>学院是省人民政府批准设立、教育部备案的省属公办的全日志普通高中。学院秉持“以服务发展为宗旨
、以促进就业为导向”的办学方针，遵循“以人为本，德技双馨，产教融合，服务社会，以建设有特色高水平
的高职院校”为目标，建设了开放创新的强效模式，积累了优秀的教育资源，形成了良好的育人环境。学校
的管理水平教育质量、办学特色得到社会各界的广泛肯定。</p>
</body>
</html>
13、行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式</title>
</head>
<body>
<h1 style="text-align:center;color:#F00;">未来信息学院</h1>
</body>
</html>
