初识CSS3

最新推荐文章于 2024-09-10 11:04:07 发布

快乐就好ya

最新推荐文章于 2024-09-10 11:04:07 发布

阅读量511

点赞数 8

分类专栏： HTML 文章标签： css3 前端 css html

本文链接：https://blog.csdn.net/m0_63233901/article/details/142074536

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

引入样式

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="#">网易公司版权所有&copy;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 ;
}