外部链接样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接外部样式表</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>曾经的你</h1>
<p>曾梦想仗剑走天涯</p>
<p>看一看世界的繁华</p>
<p>年少的心总有些轻狂</p>
<p>如今你四海为家</p>
<p>曾让你心痛的姑娘.....</p>
</body>
</html>
导入外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入外部样式表</title>
<style>
@import url("css/common.css");
</style>
</head>
<!--
作者：offline
时间：2018-05-16
描述：链接式与导入式的区别 网速慢的时候会先显示没有没有css统一布局的html网页
导入式会给用户不好的感觉
-->
<body>
<h1>曾经的你</h1>
<p>曾梦想仗剑走天涯</p>
<p>看一看世界的繁华</p>
<p>年少的心总有些轻狂</p>
<p>如今你四海为家</p>
<p>曾让你心痛的姑娘.....</p>
</body>
</html>
行内样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式引入优先级问题</title>
<!--内部样式表-->
<style>
h1{
color: green;
}
<!--外部样式表-->
<link rel="stylesheet" href="css/style.css" />
</style>
</head>
<body>
<h1 style="color: red;">曾经的你</h1><!--行内样式-->
<p>曾梦想仗剑走天涯</p>
<p>看一看世界的繁华</p>
<p>年少的心总有些轻狂</p>
<p>如今你四海为家</p>
<p>曾让你心痛的姑娘.....</p><p>北京欢迎你,有梦想谁都</p>
</body>
</html>
样式优先级:内样式>内部样式表>外部样式表
选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*标签选择器*/
p{
background-color: blue;
font-size: 30px;
font-weight: bolder; /*加粗*/
}
/*类选择器*/
.cc{
/*background-color: #FF0000 ;*/
font-size: 18px;
color: deeppink;
}
/*ID选择器*/
#hit{
text-decoration: none; /*去掉下划线*/
}
</style>
</head>
<body>
<p>听说今天想睡觉?</p><!--标签选择器-->
<span class="cc"> <!--类选择器-->
打瞌睡！
</span>
<br />
<a href="caidan.html" id="hit">一起学习css</a>
<!--
作者：offline
时间：2018-05-16
描述：行内样式,优先级最高,但是如果其他的样式表对此标签处理后,background-color,
font-size以行内样式为主,然后才是其它样式表中的样式
-->
<p style="background-color: red; font-size: 50px;">
听说今天乘客被袭击
</p>
</body>
</html>
选择器的优先级:ID选择器>class类选择器>标签选择器 (注意:id标识符，在一个网页中,id不可重复，必须唯一)
层次选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*#mydiv span { /*后代选择器 选择匹配的span元素,且匹配的所有span元素被包含在匹配的mydiv元素内*/
/*font-size: 26px;
}
#mydiv>span>span{ /*子选择器 选择匹配的span元素,且匹配的第二个span元素是匹配span元素的子元素*/
/*color: red;
}
/*#mydiv .aa+span{
color: green;
}
/*#mydiv+.ccdiv{
font-size: 30px;
color: green;
}*/
/*#mydiv+div+div{ /*相邻兄弟选择器 选择匹配的div元素,且匹配的div元素紧位于匹配的第二个div元素后面*/
/*font-size: 30px;
}*/
#mydiv~div{ /*通用兄弟选择器 选择匹配的div元素,且位于匹配的mydiv元素之后的所有的匹配的所有div元素*/
font-size: 33px;
color:red
}
</style>
</head>
<body>
<div id="mydiv">
<span class="aa">天气很热,我很想睡觉</span><br />
<span>明明</span>在哪里<br />
<span>静静在<span>等着<span>他!</span></span>你!</span>
</div>
<div class="ccdiv">
AAAAAAAAAAA<br />
BBBBBBBBB
</div>
<div>
FFFF<br />
GGGG
</div>
</body>
</html>
结构伪类选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*ul li:first-child{
background-color: #0000FF;
}*/
ul li:last-child{
background-color: #FF0000; /*ul下的最后一个元素变色*/
}
ul li:nth-child(odd){
background-color: #4169E1;/* 子元素 隔行变色 奇数行变色 */
}
ul li:nth-child(even){
background-color: aqua; /*隔行变色 偶数行变色*/
}
ul li:first-of-type{ /*指定类型*/
background-color: yellow;
}
ul li:nth-of-type(even){ /*指定类型 偶数行*/
background-color: green;
}
a:hover{ /*隐藏a标记 当鼠标移至a标记*/
font-size: 30px;
color: #FF0000;
text-decoration: none;/*去掉下划线*/
}
</style>
</head>
<body>
<div id="mydiv">
<ul>
<li>AAAAAAAA</li>
<li>BBBBBBBB</li>
<li>CCCCCCCC</li>
<li>小明和小红</li>
<li>jack和rose</li>
</ul>
</div>
<a href="#">你来!</a>
</body>
</html>
属性选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li[id='dd1']{
background-color: yellow;
}
li[id^='dd']{ /*找属性 以dd开头的*/
background-color: yellow;
}
li[name$='aa']{ /*找属性name aa结尾的*/
background-color: darkblue;
}
li[class*='c']{ /* 模糊查询 找属性 class 包含c元素的*/
background-color: aqua;
}
</style>
</head>
<body>
<div id="mydiv">
<ul>
<li class="cc">您好</li>
<li id="dd1">明天又要放假</li>
<li id="dd2">明天又要写代码</li>
<li class="abcaa">明天又要睡觉</li>
<li name="efaa">没办法</li>
</ul>
</div>
<div id="dd">
<ol>
<li><a>1</a></li><br />
<li><a>2</a></li>
</ol>
</div>
</body>
</html>
6367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
