引入样式
1.内部样式
<style>
h1{color: green; }
</style>
方便在一个页面进行修改,格式为用<style>标签包括选择器{(属性:属性值;)}
2.行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
此时style不是一个标签,而是一个属性
3.外部样式
<link href="style.css" rel="stylesheet" type="text/css" />
@import url("style.css");
常用的为link(链接式)导入式不常用
行内样式>内部样式表>外部样式表
遵循就近原则
基本选择器
1.标签选择器
p{
font-size: 14px;
color: green;
}
2.类选择器
.class { font-size:16px;}
3.ID选择器
#id { font-size:16px;}
层次选择器
选择器 | 类 型 | 功能描述 |
E F | 后代选择器 | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面 |
E~F | 通用兄弟选择器 | 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 |
后代选择器只要是比E小的都起作用
子选择器只作用下一代
相邻选择器只作用挨着的下一个
兄弟选择器作用下面的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="css/index02.css" rel="stylesheet"/>
<body>
<img src="img/game01.jpg" class="B"/>
<br />
<img src="img/game02.jpg" />
<p>开心餐厅,让你可以开心的烹饪美味佳肴,从一个简洁的小餐厅起步,逐步打造自己的餐饮大食代。
<br />
烹饪美食,雇佣好友帮忙,装修个性餐厅,获得顾客美誉。
<br />
步步精心经营,细心打理,我们都能成为餐饮大亨哦。</p>
<img src="img/game03.jpg" />
<br />
<h2 class=A>如何做菜?</h2>
<p>
1.点击餐厅中的炉灶,打开菜谱,选择自己要做的食物后,进行烹饪。不断点击炉灶,直到食物进入自动烹饪阶段;
<br />
2.每道菜所需要制作的步骤和烹饪的时间不一样,你可以根据自己的时间和偏好来进行选择,还会有各地特色食物供应哦;
<br />
3.烹饪完毕的食物要及时端到餐台上,否则过一段时间会腐坏;
<br />
4.食物放在餐台上后,服务员会自动端给顾客,顾客吃完后会付钱给你。
</p>
<h2>如何经营餐厅?</h2>
<p>
1.自己做老板,当大厨,雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少,工作的时间越短心情越好;好友间亲密度越高,可雇用的时间越长;
<br />
2.随着等级的升高,可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加;
<br />
3.餐桌椅的摆放位置也很有讲究,它会影响顾客和服务员行走路程。
</p>
</body>
</html>
p{
font-size: 14px;
}
.A{
color:red ;
}
body h2{
font-size:16px ;
}\
body>.B{
width:887px ;
height:439px ;
}
.A~h2{
color: blue;
}
结构伪类选择器
选择器 | 功能描述 |
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
E F:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
first-child与first-of-type的区别是
first-child是第一个子类元素
first-of-type是指定类型的第一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="css/index03.css"rel="stylesheet" />
<body>
<h2>热播</h2>
<table border="1"width="800"height="500"align="center">
<tr height="130">
<td><img src="img/img1.png"</td>
<td><img src="img/img2.png"</td>
<td><img src="img/img3.png"</td>
<td><img src="img/img4.png"</td>
</tr>
<tr>
<td>
<ul>
<li><h5>神武赵子龙</h5></li>
<li><p>怒,林更新不抱网红抱女神</p></li>
<li>点击次数:242445次</li>
</ul>
</td>
<td>
<ul>
<li><h5>旋风十一人</h5></li>
<li><p>胡歌变教练在撩前女友</p></li>
<li>点击次数:242445次</li>
</ul>
</td>
<td>
<ul>
<li><h5>太阳的后裔</h5></li>
<li><p>宋慧乔吃嫩草</p></li>
<li>点击次数:242445次</li>
</ul>
</td>
<td>
<ul>
<li><h5>山海经之赤影传说</h5></li>
<li><p>娜扎张翰再度联手</p></li>
<li>点击次数:242445次</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
li{
list-style: none;
}
li:first-child{
font-size:16px ;
color:#4D4D4D;
}
p:first-of-type{
font-size:14px ;
color: #640000;
}
li:nth-of-type(3){
font-size: 12px;
color: blue;
}
属性选择器
属性选择器 | 功能描述 |
E[attr] | 选择匹配具有属性attr的E元素 |
E[attr=val] | 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写) |
E[attr^=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串 |
E[attr$=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串 |
E[attr*=val] | 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="css/index04.css"rel="stylesheet" />
<body>
<form method="post" action="result.html">
<header>
<img src="img/163logo.gif" />
<p>
<a href="#">免费邮</a>
<a href="#">企业邮</a>
<a href="#">VIP邮箱</a>
<a href="#">帮助</a>
</p>
</header>
<section>
<img src="img/imap.jpg" />
<ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页,实现发送、阅读邮件</li>
</ul>
</section>
<p>
<a href="#">立即同步普通登录手机号登录</a>
</p>
<p><img src="img/loginIcon.gif"/><strong>普通登录</strong></p>
<p> 用户名:<input name="name" type="text" >@163.com </p>
<p> 密码:<input name="pass" type="password" > </p>
<p>版本:
<select name="列表" size="1">
<option value="moren" selected >非默认</option >
<option value="feimoren" selected>默认</option>
</select>
</p>
<p>
<input name="gen" type="radio" value="自动登录" />自动登录
<input name="gen" type="radio" value="SSL " checked />SSL
</p>
<footer>
<img src="img/netease_logo.gif">
<a href="#">关于网易</a>
<a href="#">免费邮</a>
<a href="#">官方博客</a>
<a href="#">客户服务</a>
<a href="#">隐私政策</a>
<a href="#">网易公司版权所有©2015-2018</a>
</footer>
</form>
</body>
</html>
header a{
color: #F4796F;
}
section li{
color:#6FCEFF ;
}
footer a{
color:#AB73F2 ;
}
section:first-child{
}
input[type=text]{
background-color:#FFFFED ;
font-size: 18px;
}
input[type*=pass]{
background-color:#AACBEE ;
}