html-0-CSDN博客

本文链接：https://blog.csdn.net/qq_40666149/article/details/106310306

选择器

（一）:first-child和：first-of-type

:first-child第一个元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		p:first-child{
			color: red;
		}
	</style>
</head>
<body>
	<p>sssssssss</p>
	<p>ddddddddd</p>
</body>
</html>

:first-of-type第一个某种类型元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		/*.div1 :first-child{
			color: red;
		}*/
		.div1 :first-of-type{
			color: red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<h2>我是班长</h2><!-- 在第一个div中h2中是第一次出现的类型 -->
		<h1>我是班长的朋友</h1><!-- 在第一个div中h1中是第一次出现的类型 -->
		<div class="div1">
			<h1>我是学位</h1><!-- 在第二个div中h1中是第一次出现的类型 -->
			<h2>woshiss</h2><!-- 在第二个div中h2中是第一次出现的类型 -->
		</div>
		<h2>s;a;dlkl;</h2><!-- 在第一个div中h2中是第二次出现的类型 -->
		<h1>dsdpppp</h1><!-- 在第一个div中h1中是第二次出现的类型 -->
	</div>
</body>
</html>

（二）：only-child和:only-of-type

:only-child只有一个孩子才会变

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		.div1 :only-child{
			color: red;
		}
		/*.div1 :first-of-type{
			color: red;
		}*/
	</style>
</head>
<body>
	<!-- div不是有一个孩子，不会变红 -->
	<div class="div1">
		<h2>我是班长</h2>
		<h1>我是班长的朋友</h1>
		<div class="div1">
			<h1>我是学位</h1>
			<h2>woshiss</h2>
		</div>
		<h2>s;a;dlkl;</h2>
		<h1>dsdpppp</h1>
	</div>
</body>
</html>

:only-of-type一种类型只有一个的时候才会变

在第一个div中h2有三个h1有一个所以h1会变

在第二个div中h1/h2都是一个

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		/*.div1 :only-child{
			color: red;
		}*/
		.div1 :only-of-type{
			color: red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<h2>我是班长</h2>
		<h1>我是班长的朋友</h1>
		<div class="div1">
			<h1>我是学位</h1>
			<h2>woshiss</h2>
		</div>
		<h2>s;a;dlkl;</h2>
		<h2>dsdpppp</h2>
	</div>
</body>
</html>

表单的伪类

(一）input:required

input:require{
border:solid 1px red
}

(二）input:optiona l###

input:optional{
border:solid 1px red
}

(三）input:valid

input:valid{
background-color：white;
border:solid 1px red;
outline:none;
}

(四）input:invalid

input:valid{
background-color：white;
border:solid 1px green;
outline:none;
}

类元素

（一）:before和:after

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		p{
			font-size: 2em;
		}
		p:before{
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	border-radius:50%;
	position: relative;
	top: 45px;
	left: 15px;
	background-color: #C39;
		}
		p:after{
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	border-radius:50%;
	position: relative;
	top: 45px;
	left: 15px;
	background-color: #C39;
		}
	</style>
</head>
<body>
<p>>-<</p>
</body>
</html>

权重

！important  权重：无穷
内联样式（style属性)  权重：1000
id   100
class/属性选择器/伪类  10
标签选择器/伪元素 1
通配符 0

文本-初步-字体

（一）设置字体名称

font-family属性，定义文本的字体

body{font-family:sans-serif;}
h1{font-family:Georgis,serif}

（二）设置字体倾斜

font-style属性，最常用于倾斜文本

三个属性值

normal：文本正常显示
italic：文本倾斜显示
oblique：文本倾斜显示

例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		p.normal{
			font-style: normal;
		}
		p.italic{
			font-style: italic;
		}
		p.oblique{
			font-style: oblique;
		}
	</style>
</head>
<body>
	<p class="normal">wewewew</p>
	<p class="italic">wewewew</p>
	<p class="oblique">wewewew</p>
</body>
</html>

（三）设置字体加粗

font-weight属性，设置粗细

使用bold关键字可以设置粗体
关键字100-900为字体指定9级加粗，100最细，900最粗，400相当于normal，700相当于bold

例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		p.normal{
			font-weight: bold;
		}
		p.italic{
			font-weight: normal;
		}
		p.oblique{
			font-style: 900;
		}
	</style>
</head>
<body>
	<p class="normal">wewewew</p>
	<p class="italic">wewewew</p>
	<p class="oblique">wewewew</p>
</body>
</html>

（四）设置字体大小

font-size，所有css单位都可以作为值

（五）组合定义###

font属性，设置组合字体样式，必须设置字体与大小

字体必须放在最后，因为字体是可以设置多个的

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>选择器</title>
	<style type="text/css">
		p{
			font:bold italic 40px Georgia;
		}
	</style>
</head>
<body>
	<p class="normal">wewewew</p>
	<p class="italic">wewewew</p>
	<p class="oblique">wewewew</p>
</body>
</html>

html颜色

p{color:red}
p{color:#ffff}
p{color:rgb(0,0,255)}//红绿蓝
p{color:rgba(0,0,255,0.5)}//红绿蓝，透明度
p{color:transparent;}//完全透明

html单位

%：百分比
in：英寸
cm:厘米
mm：毫米
em：1em等于当前字体尺寸，2em等于当前字体的两倍
ex：一个ex是一个字体的x-height。（x-height通常是字体尺寸的一半)
pt:磅（1pt等于1/72英寸）
PC：12点活字
Px：像素

（一）文本

1.大小写转换

text-transform属于处理文本的大小写，有4个值：

none（默认值）
uppercase（全部大写）
lowercase（全部小写）
capitalize（首字母大写）

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
 .t1{
  text-transform:uppercase;
 }
 .t2{
  text-transform:lowercase;
 }
 .t3{
  text-transform:capitalize;
 }
</style>
</head>
<body>
<p>ssss</p>
<p class="t1">sss</p>
<p class="t2">AAA</p>
<p class="t3">string</p>
</body>
</html>

2.文本线条

text-decoration有5个值：

none
underline
overline
line-through
blink（以前只有Firefox支持，现在也不支持了）

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   text-decoration:underline;
  }
  .t2{
   text-decoration:overline;
  }
  .t3{
   text-decoration:line-through overline underline;
  }
 </style>
</head>
<body>
 <p>ssss</p>
 <p class="t1">sss</p>
 <p class="t2">AAA</p>
 <p class="t3">string</p>
</body>
</html>

3.文本阴影

text-shadow属性，参数顺序为：阴影颜色，水平偏移量，垂直偏移量，模糊度

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   text-shadow:rgb(0,0,255) 5px 5px 5px;
  }
  /*.t2{
   text-decoration:overline;
  }
  .t3{
   text-decoration:line-through;
  }*/
 </style>
</head>
<body>
 <!-- <p>ssss</p> -->
 <p class="t1">sss</p>
 <!-- <p class="t2">AAA</p>
 <p class="t3">string</p> -->
</body>
</html>

4.文本空白

white-space属性，默认值normal，空白会被浏览器忽略。

例子：如果打出多个空白，除了使用`<pre>`与转义字符&nbsp；之外还可以：

 <style type="text/css">
  .t1{
   white-space:pre;
  }
  </style>
  <body>
 <p class="t1">sss  eeeeee wwww
 wwwwwww</p>
</body>

但是上述操作不会自动换行。

white-space:pre-line;//可以自动换行，但是会合并空格

white-space:pre-wrap;;//可以自动换行，不会合并空格

white-space:nowrap;//不换行，合并空格

5.文本溢出

overflow：hidden;隐藏
text-overflow:ellipsis;(把隐藏的内容用…代替）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   width: 200px;
   border:solid 1px red;
   white-space:nowrap;
   overflow: hidden;
   text-overflow:ellipsis;
  }
</style>
</head>
<body>
 <!-- <p>ssss</p> -->
 <p class="t1">
  sss  eeeeee wwwwdddsdsdsds fff
  属性你手机
 </p>
</body>
</html>

当鼠标放上去是，让隐藏的内容出现

p:hover{
   overflow: visible;
  }

visible：是默认值，内容不会被修剪，会显示在元素框外
hidden：内容被隐藏，且其余内容不可见
scroll：内容被修剪，但是浏览器会显示滚动条以便查看其他内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其他内容

6.对齐与缩进

text-indent，设置首行缩进

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   white-space:pre-line;
   text-indent:20px;
  }
 </style>
</head>
<body>
 <p class="t1">sss  eeeeee wwwwdddsdsdsds fff
  属性你手机
 </p>
</body>
</html>

text-indent的值设置像素时，如果字体发生变化，它缩进的大小就会改变，耦合行很强

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   font-size: 50px;/*将字体大小改为20px*/
   white-space:pre-line;
   text-indent:20px;
  }
 </style>
</head>
<body>
 <p class="t1">sss  eeeeee wwwwdddsdsdsds fff
  属性你手机
 </p>
</body>
</html>

现在将text-indent设置为2em

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   font-size: 50px;/*将字体大小改为20px*/
   white-space:pre-line;
   text-indent:2em;
  }
 </style>
</head>
<body>
 <p class="t1">提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、
  葡萄牙语、越南语、印尼语、意大利语全文翻译、网页翻译、文档翻译服务。
 </p>
</body>
</html>

text-align只对元素中的文本有效，对元素无效
值：left，center，right，justify

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/c**ss">
  .t1{
   text-align: center;
  }
  .t2{
   text-**align:left;
  }
  .t3{
   text-align:right;
  }
</style>
</head>
<body>
 <p class="t1">t1今天真好</p>
 <p class="t2">t2今天真好</p>
 <p class="t3">t3今天真好</p>
</body>
</html>

justify可以实现两端对齐（两端对齐是要求有宽度的，需要对文本外的框设置宽度；且只有一行填满才会显示两端对齐，一行没有填满，就不会显示）

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t4{
   width: 200px;
   border:  solid 1px red;
   text-align: justify;
  }
 </style>
</head>
<body>
 <p class="t4">今天真好今天真好今天真好今天真好今天真好今天真好</p>
</body>
</html>

改进：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t4{
   width: 200px;
   border:  solid 1px red;
   text-align: justify;
  }
  p span{
   display: inline-block;
   width: 100%;
  }
  /* 或者p:after{
   content: "";
   display: inline-block;
   width: 100%;
  }*/
 </style>
</head>
<body>
 <p class="t4">今天真好今天真好今天真好今天真好<span></span></p>
</body>
</html>

垂直对齐：
vertical-align，使用满足两点，文本，inline类元素或表格单元格

值	描述
baseline	默认。元素放在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放在父元素中部
bottom	把元素的顶端与行中最低元素顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
length
%	使用line-height属性的百分比值来排列此元素允许使用负值