<!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>
<!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>
