首页 前端知识 初识CSS3

初识CSS3

2024-11-04 09:11:32 前端知识 前端哥 239 99 我要收藏

引入样式

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可以是123),关键字为evenodd

E:first-of-type

选择父元素内具有指定类型的第一个E元素

E:last-of-type

选择父元素内具有指定类型的最后一个E元素

E F:nth-of-type(n)

选择父元素内具有指定类型的第nF元素

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]

选择匹配具有属性attrE元素

E[attr=val]

选择匹配具有属性attrE元素,并且属性值为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 ;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19850.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!