博客列表 >第三课 CSS基础

第三课 CSS基础

遗忘了寂寞
遗忘了寂寞原创
2019年10月31日 10:58:42620浏览

1>元素按显示方式分为哪几种, 并举例, 正确描述它们

    元素按显示方式分为块级元素和行内元素


块级元素

    遵循: 最大化原则
总是独占一行显示, 自动充满父级元素的内容区
块级元素二边不允许有任何其它元素,也就是它总是自带换行的
块级元素在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在
例如:<div>, <ul+li>, <table>,<p>, <h1-h6>...



行内元素

    遵循: 最小化原则
总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以设置
例如: <span>,<input>, <em>,<strong>,<a>...



2>CSS是什么? 它的主要作用是什么?

CSS是层叠样式表(Cascading Style Sheets)

CSS是用来设置页面中的元素样式和布局的


3>什么是CSS选择器,它的样式声明是哪二部分组成?

选择器,说白了就是用一种方式把你想要的那一个标签选中!把它选中了,你才能操作这个标签的CSS样式。

声明由一个属性和一个值组成


4> 举例演示CSS简单选择器

    常用的简单选择器有5种:  * 元素选择器: `div {...}`
 * 属性选择器: `tag[property...]`
 * 类/class选择器: `.active {...}`
 * ID选择器: `#main {...}`
 * 群组选择器: `p, .active, div {...}`
 * 通配符选择器: `*`, 表示全部元素, 通常用在上下文选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器</title>
		<style>
			/* 元素选择器 */
			h1{color: red;}
			/* 属性选择器 */
			input[type="email"]{background-color: blue;}
			/* 类/class选择器 */
			.cl{color: brown;}
			/* ID选择器 */
			#item{color: #ccc;}
			/* 群组选择器 */
			h2,p,.q{background-color: #CCC;}
			/* 通配符选择器 */
			*{font-size: 18px;}
		</style>
	</head>
	<body>
		<h1>这是一个H1标签</h1>
		<div class="cl">PHP中文网</div>
		<div id="item">phpStudy V8</div>
		<input type="email" id="email" name="email">
		<h2>群组选择器</h2>
		<p>选择器的不同,在于它选择方式不同</p>
		<div class="q">样式表极大地提高了工作效率</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


5>举例演示CSS上下文选择器

所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器

    后代选择器: `空格`, 如 `div p`, `body *`
父子选择器: `>`, 如 `div + h2`
同级相邻选择器: `+`, 如 `li.red + li`
同级所有选择器: `~`, 如 `li.red ~ li`

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上下文选择器</title>
		<style>
			/* 后代选择器 */
			#a h3{color: red;}
			/* 父子选择器 */
			#a > h3{background-color: #ccc;}
			/* 同级相邻选择器 */
			#b + h3 {background-color:lightcyan;}
			/* 同级所有选择器 */
			#b ~ h3 {color:blue;}
		</style>
	</head>
	<body>
		<div id="a">
			<h3 id="b">上下文选择器1</h3>
			<h3>上下文选择器2</h3>
			<h3>上下文选择器3</h3>
				<div>
					<h3>上下文选择器4_1</h3>
					<h3>上下文选择器4_2</h3>
					<h3>上下文选择器4_3</h3>
				</div>
		</div>
		<h3>上下文选择器5</h3>
		<h3>上下文选择器6</h3>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


6>举例演示常用CSS结构伪类选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类选择器</title>
		<style>
			/*选中页面所有的ul下面的第二个子元素*/
			ul > :nth-child(2) {background-color: lightblue;}
			/*只选中第一个ul中的第二个子元素*/
			ul:first-child > :nth-child(2) {background-color: lightgreen;}
			/*选中最后一个*/
			ul:first-child > :last-child {background-color: lightpink;}
			/*选中最后一个子元素中,类型为<p>的元素*/
			/*参数是表达式时, n从0开始, n+1, 表示的索引是: 1,2,3,4...*/
			ul:first-child > :last-child > p:nth-child(n+1) {background-color: yellow;}
			/*选中最后一个子元素中,类型为<li>的后代元素*/
			ul:first-child > :last-child li:nth-child(n+1) {background-color: lightgray;}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<h3>结构伪类选择器1</h3>
				<ul>
					<li>结构伪类选择器1_1</li>
					<li>结构伪类选择器1_2</li>
					<li>结构伪类选择器1_3</li>
				</ul>
			</li>
			<li>
				<h3>结构伪类选择器2</h3>
				<ul>
					<li>结构伪类选择器2_1</li>
					<li>结构伪类选择器2_2</li>
					<li>结构伪类选择器2_3</li>
				</ul>
			</li>
			<li>
				<h3>结构伪类选择器3</h3>
				<p>结构伪类选择器3_p1</p>
				<ul>
					<li>结构伪类选择器3_1</li>
					<li>结构伪类选择器3_2</li>
					<li>结构伪类选择器3_3</li>
				</ul>
				<p>结构伪类选择器3_p2</p>
			</li>
		</ul>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


7>举例演示常用CSS表单伪类选择器

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单伪类选择器</title>
		<style>
			/*选中有效的表单元素*/
			input:enabled {background-color: lightblue;}
			/*选中禁用的表单元素*/
			input:disabled {background-color: lightgreen;}
			/*选中必填的表单元素*/
			input:required {background-color: lightpink;}
			
		</style>
	</head>
	<body>
		<h1>新用户注册</h1>
		<form action="" method="">
			<p>
				<label>用户:</label>
				<input type="text" name="usename" id="usename" value="" required="required" />
			</p>
			<p>
				<label>密码:</label>
				<input type="password" name="password" id="password" value="" />
			</p>
			<p>
				<label>禁用:</label>
				<input type="text" name="jy" id="jy" value="禁用" disabled="disabled" />
			</p>
			
		</form>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码:


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议