day03前端基础css
2018-04-02 本文已影响12人
AidenWang292
-<td>中可以嵌套任意标签，例如嵌套 <table>
- 基础选择器:类选择器/id选择器/通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="style.css">
<style type="text/css">
/*类选择器*/
.box{width:110px;
height:200px;
font-size:40px;
color:red;
}
/*一个id选择器只能在一个界面调用一次
类选择器可以被多次调用
*/
#nav{
font-size: 50px;
color:blue;
}
#main{width:200px;
height:300px;
background-color:pink;
}
/*通配符选择器，作用于页面全部标签，不推荐使用 降低页面加载速度*/
/*
*{font-size:100px;
}*/
</style>
</head>
<body>
<div class="box" >呵呵呵呵</div>
<!-- 一个标签只能调用一个id选择器
一个标签可同时调用id和类选择器-->
<!-- 优先id选择器，同时调用的时候 -->
<h2 id="nav" class="box">laalala</h2>
<p class="box" id="nav">好啊哈啊</p>
</body>
</html>
- 选择器复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器复习</title>
<style>
div{width:100px;
height:100px;
background-color:pink;
color:red;
}
.box{
font-size:50px;
color:blue;
}
#nav{background-color:gray;}
*{color:green;}
</style>
</head>
<body>
<div>喜洋洋</div>
<p class="box">美羊羊</p>
<h3 id="nav">懒洋洋</h3>
<span>沸羊羊</span>
</body>
</html>
- 字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style>
/*1em/2em:一个/两个汉字的大小*/
.box{font-size:2em;/*大小*/
/*可指定多个字体,中间用，隔开
多个字体优先先解析认识的*/
/*浏览器F12->console->escape("宋体"->，回车 %u换成\ font-family:arial,"宋体";*/
font-family:"5B8B\4F53";
font-family:""\5FAE\8F6F\96C5\9ED1";
/*文字粗细,默认为normal,其余bold,400,加粗700*/
font-weight:normal;
/*定义字体风格 normal/italic/oblique:浏览器倾斜*/
font-style:normal;
/*行高*/
line-height:5;
}
</style>
</head>
<body>
<div class="box">aaaaaaaaaaaa 哈哈的回复哈</div>
<h2>adsfdsafdasf</h2>
<em>维护任务</em>
</body>
</html>
- 字体连写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体综合</title>
<style>
.box{
/*文本属性连写，必须写的是大小和字体，其余根据需求，如果不写，则按照默认值 ，大小和行高中间加/，700为字体粗细 ，italic：设置字体是否倾斜*/
font:700 italic 30px/60px "宋体";
}
</style>
</head>
<body>
<div class="box">哈哈哈哈啦啦啦</div>
</body>
</html>
- 外观属性css
- 交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.box{
font-size:50px;
color:red;
}
/*.nav{
text-indent:2em;
}*/
/*交集选择器*/
div.box{
text-indent:2em;
}
p.box{
text-align: center;
backgound-color:yellow;
color: yellow;
}
</style>
</head>
<body>
<div class="box">hahahha
<p>123214</p>
</div>
<h3>啦啦啦</h3>
<p class="box">嘻嘻嘻</p>
<p></p>
</body>
</html>
- 并集选择器
1<0..0!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
/*.box{
font-size:50px;
color:red;
}
#content{
font-size:50px;
color:blue;
}
.nav{
font-size:50px;
color:green;
}*/
.box,#content,#nav{
font-size:50px;
color:red;
}
</style>
</head>
<!-- +并列选择器 -->
.box+#content+#nav
<div class="box">hahah</div>
<div id="content">adqwer</div>
<div id="nav">treyrte</div>
</body>
</html>
- 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
/*后代选择器发生的前提是嵌套关系，1父在前,子在后;2后代选择器可以无限隔代3*/
/*只要能代表父元素,后代选择器可以是任意选择器的组合*/
/*后代选择器重点中的重点*/
/*div.son.grandson 也可以*/
/*div p span{*/
.box .grandson{
font-size:100px;
color:red;
}.
#div #p #span{
font-size:10px;
color:yellow;
}
</style>
</head>
<body>
<!-- .box>p.xon>span.grandon -->
<div class="box">
<p class="son">
<span class="grandon">几个字
</span>
</p>
<span>qweqwer</span>
</div>
<span>11111111</span>
<div id="box">
<p id="son">
<span id="grandson">111
</span>
</p>
</div>
</body>
</html>
- 子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
/*作用就是选儿子*/
.father .grandon{
font-size:100px;
color:red;
}
</style>
</head>
<body>
<!-- .box>p.xon>span.grandon -->
<div class="father">
<p class="son">
<span class="grandon">
几个字
</span>
</p>
<span>qweqwer</span>
</div>
<span>11111111</span>
<div id="box">
<p id="son">
<span id="grandson">111
</span>
</p>
</div>
</body>
</html>
- 作业1
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 在不修改以上代码的前提下，完成以下任务：
链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为橙色 (简单)
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)
主导航栏里面的一级菜单链接文字颜色为绿色。（难)
伪类选择器 -->
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.site-r a{
color: red;
}
.nav a{
color:orange;
}
.nav a, .a ,.site-l{
font: "微软雅黑";
}
.nav > ul> li >a{
color:green;
}
</style>
</head>
<body>
<div class="nav"> <!-- 主导航栏 -->
<ul>
<li ><a >公司首页</a></li>
<li ><a >公司简介</a></li>
<li ><a >公司产品</a></li>
<li >
<a >联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>
- 作业2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style>
.nav{text-align:center;}
.span1{color:gray;}
.span2{color:#990000;}
input{color:red;}
.sou{color:green }
p{
text-indent: 2em;
}
p span{color:blue;}
</style>
</head>
<body>
<div class ="nav">
<div class="title"><h2>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2></div>
<span class="span1">2014年07月16日20:11></span>>
<span class="span2"> 新浪体育</span> <span class="span2">评论中大奖（11人参与）</span> <a href="">收藏文本</a>
<input type="text" value="请输入查询条件" ><button class="sou">搜索</button>
</div>
<hr>
<div class="content">
<p>新浪体育讯 7月16日是燕京啤酒<span>[微博]</span>2015中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
<p>据记者多方了解的情况，李虎[<span>微博</span>]</p>
<p>这样的情况并没有影响到丽江嘉云昊队[<span>微博</span>]的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
</div>
</body>
</html>
- 选择器总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器总结</title>
<style>
/*1.并集选择器 可同时为多个，不同类型选择器/标签，设置相同样式,不同选择器中间以英文,间隔，空格可以不加，也可以加但是,必须加*/
/*.b p, h1{
color:red;
}
*/
/*2.交集选择器
1:标签后接类选择器或者id选择器，标签与类选择器之间没有空格;
2：交集选择器可以扩充具有相同类名或者id名字的某一个标签的样式;
3:类选择器和交集选择器同时设置相同颜色等属性，以交集选择器设置的属性为准;
*/
.box{color:green;
text-decoration:none;
text-indent:1em;
}
span.box{
/*字体属性复习*/
text-decoration:underline;underline/line-through/overline
line-height:5; /*行高*/
font-family:宋体; /*字体类型*/
font-size: 30px;/* 字体大小*/
color:pink; /*字体颜色color:rgb(23,24,255);*/
font-weight:700; /*字体粗细*/
font-style:italic; /*字体倾斜*/
text-indent:20em; /*字体缩进*/
}
/*3.后代选择器
1：特别注意不同类型选择器，或者标签，中间务必用空格间隔开,否则样式不生效
2后代选择器应用广泛,既可以使用设置父代后某一代标签/类选择器/id选择器的样式，也可以设置后代所有具有相同标签/类选择器/id选择器的统一样式。
*/
/*.a span{
color:gray;
}
*/ /*此处也可写为*//*.a .b .box ul li span{
color:gray;
} */
/*4.父子选择器
不能跨代,用>链接，空格与否都可以
*/
/*.a>.b>.box> ul>li>span{
color:blue;
}*/
/*如果写成后代选择器，选择器与选择器之间要加空格*/
.a .b .box ul li span{
color:blue;
}
/*后代选择器同时选择出不同层级p
后设置属性覆盖先设置的属性
*/
.box p{
color:gray;
}
.a p{
color:red;
}
/*<h1>5.后代选择器可跨级</h1 >*/
.a .box p{
color:green;
}
/*伪类选择器*/
.box a:link{
text-decoration:line-through;
color:red;
}
.box a:visited{
color:pink;
}
.box a:hover{
color:yellow;
}
.box a:active{
color:green;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<p>小狗小狗小狗小狗小狗</p>
<h1 class="">小猫小猫小猫小猫
<p>测试同时选择多标签</p>
</h1>
<span class="box">小猪小猪小猪小猪小猪
<ul>
<li>
<div>猜猜我在哪里</div>
<span>我是哈哈哈</span>
<p>测试同时选择多标签</p>
<p>
测试同时选择多标签
<p><a href="#1">1234567</a></p>
</p>
</li>
</ul>
</span>
</div>
</div>
</body>
</html>
-并集选择器小练习
1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小练习</title>
<style>
.main{
text-align:center;
width: 500px;
height:100px;
background-color:pink;
margin:0 auto;
line-height:20px;
}
/*.main h4 ,.main .a2{
color: white;
}*/
span{
background-color: blue;
}
h4,#s1,.a2{
color: white;
}
#s2,.a1{
color: yellow;
}
</style>
</head>
<body>
<div class="main">
<h4>传智播客</h4>
<span id="s1">黑马</span> <span id="s2">程序员</span>
<p><a class="a1"href="">点击搜索</a> <a class="a2" href="">点击搜索</a> </p>
</div>
</body>
</html>
