3-3 html选择器 & css

WayserKON

已于 2022-08-22 10:54:39 修改

阅读量331

点赞数

文章标签： html css css3

于 2022-01-13 11:41:52 首次发布

本文链接：https://blog.csdn.net/langkeyring/article/details/122470539

版权

html选择器

选择器在head标签内定义声明。

<head>
	<!--各种选择器的定义声明-->
	p {
		color: red;
		font-size: 14px;
	}
}
</head>

分类

上下文选择器

通过依据元素在其位置的上下文关系来定义样式。

后代选择器
tr td { color: pink;}
子元素选择器
a>img { width:200px;}
相邻兄弟选择器（next）
h1+p { padding: 5px;}

类选择器

类选择器用于描述一组元素的样式。
标签通过class属性选择自己的样式。
多个标签可以共用一个class值。一个标签的class属性也可以有多个值。
声明类选择器，需要在前面加 “.”号

.c1 {
	font-size: 20px;
}

id选择器

id选择器可以为标有特定id的元素指定样式
id属性值唯一
声明id选择器，需要再前面加 “#”号

#i1{
	font-size: 30px;
	font-weight: 10;
	color: #008000;
}

属性选择器

为带有指定属性的元素设定样式
主要应用于表单元素form中

input[type=text]{
	color: red;
}

标签选择器

为某一类型元素设定样式

body{
		background-color: antiquewhite;
}

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器 */
			body{
				background-color: antiquewhite;
			}
		
			/* 类选择器 */
			.cl{
				color: #00FFFF;
			}
			.c2{
				font-size: 50px;
				color: #7FFF00;
			}
			
			/* id选择器 */
			#p1{
				color: coral;
			}
			#p2{
				color: chartreuse;
			}
			
			/* 属性选择器 */
			input[type=password]{
				color: red;
			}
			
			/* 子元素选择器 */
			a>img{
				width: 500px;
			}
			
			/* 后代选择器 */
			tr td{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 
		1.类选择器，通过class属性指定，多个标签可以共用class的属性。
		2.一个标签的class属性可以由多个值
		-->
		<p class="cl c2">DEMO1</p>
		<a class="cl" href="#">DEMO2</a>
		<!-- 
		1.通过id属性指定，id是唯一的，每个id只用一次(人为控制唯一性)
		2.一个标签的id只能有一个值
		-->
		<p id="p1">id选择器1</p>
		<p id="p2">id选择器2</p>
		
		<!-- 属性选择器 -->
		<form action="" method="">
			<input type="text" id="" value="文本" />
			<input type="password" id="" value="密码" />
		</form>
		
		<!-- 子元素选择器 -->
		<a >
			<img src="img/1.jpg" >
		</a>
		
		<!-- 后代选择器-->
		<br>
		<table border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
	</body>
</html>

引入样式

内联样式

<p style="padding: 10px;">内联样式</p>

内部样式表

<head>
	<!-- 内部样式表 -->
	<style>
		p {
			font-family: '宋体';
			font-size: 50px;
			color: red;
		}
	</style> 
</head>

外部样式表

css的引入要先于js的引入，否则影响页面加载速度

<head>
<!-- 引入外部样式表：css文件 -->
	<link rel="stylesheet" type="text/css" href="../../css/main.css" />
</head>

样式加载优先级

内联样式（行内样式） > 内部样式表 > css文件（外部样式表）

CSS

Cascading Style Sheets：层叠样式表

常用CSS命名

在这里插入图片描述

CSS盒子模型

如果把一个H5元素看成一个盒子，则盒子的全部组成如下图所示：

外边距：元素与其他元素之间的距离；
内边距：元素边框与内容之间的距离；
内容：标签中包含的文本、图片等；

外边距margin

在这里插入图片描述

margin缩写用法（同样适用于padding）：从上边距开始，顺时针旋转设置(上右下左)，如：

margin: 25px 50px 75px 100px;
上边距25px
右边距50px
下边距75px
左边距100px
margin: 25px 50px 75px;
上边距25px
左右边距50px
下边距75px
margin: 25px 50px;
上下边距25px
左右边距50px
margin: 25px;
所有边距25px

内边距padding

同margin

边框border

在这里插入图片描述

文本样式

在这里插入图片描述

示例

.title{
	font: italic bold 12px/30px Georgia, serif;
			//斜体 加粗 字体大小 字体名称
}

背景设置

在这里插入图片描述

CSS定位

position属性

在这里插入图片描述

示例

<style type="text/css">
h2{
position: absolute;
left:100px;
top:150px
}
</style>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

overflow属性

overflow 属性规定当内容溢出元素框时发生的事情
示例

<style type="text/css">
div {
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
<body>
<p>
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

z-index属性

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面）
值越大，越靠前
没有指定z-index，后面的元素压住前面的元素

top/bottom/left/right属性

定位一个元素的上外边距与其包含块上边框之间的偏移量。

top: 10%; //元素向下移动10%
left: -10px; //元素向左移动10像素

CSS显示

display属性

在这里插入图片描述

visibility属性

在这里插入图片描述

CSS伪类

伪类用于定义元素的特殊状态。（也叫触发事件）
可用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

示例：当鼠标放在图片上悬停时，修改图片尺寸

img:hover{
	width: 200px;
	height: 200px;
}
<img src="../../img/icon.jpg" width="100px" height="100px" />
HTML的lang属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的；

语言设置

在这里插入图片描述

示例：

<html lang="en"></html>
<p lang="zh"></p>

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父级框元素）或另一个浮动框为止。
如果元素设置了浮动，后面紧邻的元素则会受到浮动的影响，若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
浮动float特性：

设置元素浮动，元素相当于往上移动一个图层；
设置元素浮动，元素会具有内联元素的特性，即跟其他相邻的浮动元素在同一行

示例：

<html>
	<head>
		<style>
			div{
				border: 0px solid #000000;
				width: 100px;
				height: 100px;
				margin: 5px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div style="float: left; background-color: black;">1</div>
		<div style="float: left; background-color: red;">2</div>
		<div style="float: left; background-color: blue;">3</div>
	</body>
</html>

WayserKON

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-3 html选择器 & css

源码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 标签选择器 */ body{ background-color: antiquewhite; } /* 类选择器 */ .cl{ color: #00FFFF;
复制链接

扫一扫