CSS课程讲解(选择器)

本文详细介绍了CSS的基础知识,包括CSS的作用、三种引入方式、选择器的使用,以及文本设置、颜色表现、背景图片设置和表格样式的相关属性。特别强调了选择器的类型,如标签选择器、ID选择器、类选择器和层级选择器,并提到了伪类和伪元素选择器在创建动态效果中的应用。
摘要由CSDN通过智能技术生成

一.回顾内容
1.前端的三大组成(三大模块)
HTMl(超文本标记语言) 结构层
css(层叠样式表) 表现层:用来美化HTML结构
JS(Java script)(脚本语言) 行为层:提供用户和界面的交互
二.CSS(层叠样式表)
1. CSS的概念及其介绍
CSS 指层叠样式表 (Cascading Style Sheets)
作用:美化HTML结构,重点:css可以很好的将结构内容和表现进行分离.
2. css的三种表现形式(引入方法)
css的语法结构:选择器{属性:值;属性:值;…}
选择器:
选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一 个 或多个值.顾名思义就是用来
筛选元素的一种方式.
(1)行内样式(内联样式):通过style属性将样式写入标签中.
例:

	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
		</head>
		<body>
		//border-style:solid;设置边框样式为实线//     //margin:"auto";设置水平居中//
			<div style="width: 200px;height: 200px; border-color: red; border-style: solid; border-width: 5px; margin: auto;"></div>
			<div style="width: 1000px; height: 100px; background: red; border-color: green; border-width: 5px; border-style: solid;"></div>
			<br />
			<div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div>
			<div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div>
			<p style="background: yellow;">我比你帅</p>
		</body>
	</html>

(2)内嵌样式:通过style标签将样式写入head标签中.
例:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: url(img/r14.jpg);//插入背景图片//
				background-size: 100%,100%;//body要加逗号//
			 }
			a{
			 text-decoration: none;font-family: 阿美简体;font-weight: 900;font-size: 54px;color: red;
		     }
			p{
				width: 200px;	height: 50px;	background: red;text-align: center;line-height: 50px;
				}
			div{
				width: 400px;	height: 200px;	border: red solid 2px;
				background: url(img/img01.jpg);
				background-size: 100% 100%;
			   }	
		</style>
	</head>
	<body>
		<a href="#">我的超链接</a>
		<p>我爱学习,学习使我快乐</p>
		<div></div>
	</body>
</html>

(3)外联样式(外部样式):通过link标签引入外部css文件夹中的xxx.css文件到head标签中.
div: 没有具体的含义(主要用来页面的布局中,替代了原始的table和框架布局).
块元素:所谓的块元素会占据一行显示称之为块元素,即便把宽高缩小也会占据一行显示.
3. CSS 文本设置
常用的应用文本的 css 样式:
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜, font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗, 如: font-weight:bold; 设 置 加 粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写:
font:是否加粗字号/行高 字体;如: font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高,如:line-height:24px; (文本的垂直居中)
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉 (overline上划线,underline下划线)
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进 24px
text-align 设置文字水平对齐方式,如 text-align:center 设置文字水平居中
border-collapse: collapse;设置表格边框合并
4.css颜色的三种表现形式
(1).直接写颜色的名称
background:red;
(2).使用RGB三原色设置
background:rgb(76,50,0);
background:rgba(76,50,0,0.8);//a不透明度//
(3).使用16进制的方式表示颜色(最常用的一种)
background:#ff0000
5.页面中元素背景图片的设置

	background-image: url(图片的路径);默认设置一个图片地址,图片会从盒子的左上角开始将盒子铺满。

例:

background: url(img/link06.jpg);
background-repeat:repeat-x 横向平铺盒子

background-repeat:repeat-y 纵向平铺盒子
background-repeat:no-repeat 背景不重复,背景和盒子左上角对齐

background:cyan url(bg.jpg) no-repeat left center,背景不重复,背景和盒子左中对齐,盒子其他部分显示背景颜色“cyan”。
6.表格的样式属性

(1)border-collapse: 表示设置表单的边框单一;

border-collapse: collapse;

(2)border-spacing: 设置单元格与单元格之间的距离

border-spacing: 20px;

(3)caption-side: 设置表格标题的位置

empty-cells: hide;

(4)empty-cells: 设置是否要显示表格中空单元格

caption-side: bottom;

(5) table-layout: 设置显示单元、行和列的算法

table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed

}

7.css的选择器
(1).标签选择器
通过元素的标签名称来选择
(2).ID选择器
#id的值{属性:属性值}
通过 id 名来选择元素,元素的 id 名称不能重复,所以一个样式设置项只能 对应于页面上一个元素,不能复用,
id 名一般给程序使用,所以不推荐使用 id选择器.
(3).类选择器(class)
.class的值{属性:属性值}
例:

<style type="text/css">
//标签选择器//
				table{
								border: 5px solid black;
								width: 300px;
								height: 200px;
								margin:100px auto;	//设置表格的水平居中//	//距离顶端100px  然后水平居中//
								border-collapse: collapse;	//设置表格的边框合并//
								background: url(images/bg3.jpg);
								background-size: 100% 100%;
							}
				td{
								border: 2px dashed green;
								color: red;
								font-family: 宋体;
								font-size: 24px;
						}	
//id选择器//
			#inp1{
						background: pink;
						border: 5px solid black;
						width: 150px;
						height: 20px;
				    	}
			#inp2{
						background: white;
						border: 5px solid black;
						width: 150px;
						height: 20px;
					}
		  #ipn3{
						background: goldenrod;
						border: 5px solid black;
						width: 150px;
						height: 30px;
						font-family: 阿美简体;
						font-size: 15px;
						color: white;
					}
		   label{
						text-align: right;
						/*border: 1px solid green;*/
					}
	//类选择器//
			.td1{
					text-align: right;
				}
	</style>
<body>
		<form method="get">
		<table>
			<tr>
				<td class="td1">
					<label>姓名:</label>
				</td>
				<td>
					<input id="inp1" type="text" placeholder="请输入用户名" />
				</td>
			</tr>
			<tr>
				<td class="td1">
					<label>密码:</label>
				</td>
				<td>
					<input id="inp2" type="password" placeholder="请输入密码" />
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input id="ipn3" type="button" value="点击登录" />
				</td>
			</tr>
		</table>
		</form>
	</body>

层级选择器
主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元 素 结合使用,减少命名,同时也可以通过层级,防止命名冲突。
(4)子代选择器:
父级元素1>子集元素2{属性:属性值}
(5)后代选择器:
父级元素 后代元素 后代元素{属性:属性值}
例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		//子代选择器//
				#ul_01>li{
						background: red;
					}
					#ul_01>li>ul{
						background: yellow;
					}
					#ul_01>li>ul>li{
						background: pink;
					}
		//后代选择器//
		        #ul_01 a{
			     	text-decoration: none;
			    }
			#ul_01 li{
			    	list-style: none;//去掉无序列表的点//
		    	}
			
			#ul_01 li ul li{
				background: greenyellow;
			 }
			#ul_01>li ul a{
				color: red;
			}  
		</style>
	</head>
	<body>
		<ul id="ul_01">
			<li><a href="#">首页</a></li>
			<li><a href="#">数码产品</a></li>
			<li><a href="#">家用电器</a></li>
			<p><a href="#">学的不仅是技术</a></p>
			<li>
				<a href="#">其他类型</a>
				<ul>
					<li><a href="#">童装</a></li>
					<li><a href="#">男装</a></li>
					<li><a href="#">女装</a></li>
					<li><a href="#">时尚装</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

(6)组选择器
多个选择器,如果有同样的样式设置,可以使用组选择器。
例:

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}


<div class="box1">.........</div>
<div class="box2">.........</div>
<div class="box3">.........</div>

(7)伪类及伪元素选择器
常用的伪类选择器有 hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容
例:

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}



 <div class="box1">.........</div>
 <div class="box2">.........</div> 
 <div class="box3">.........</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值