CSS_00000

已于 2023-08-11 01:52:09 修改
阅读量473 收藏 4
点赞数 1
分类专栏： HTLM、CSS 文章标签： html5 css html
于 2022-01-25 19:47:01 首次发布
a
本文链接：https://blog.csdn.net/wisdom1a/article/details/110088024
版权

contents

CSS介绍

CSS(Cascading Style Sheets)：层叠样式表单。
用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS语法规则

例如：
p {
    color: blue
}

p{
    color:red;
    font-size:30px;
}

大括号中的最后一条语句也尽量加上分号。

CSS 注释：/注释内容/

CSS和HTML的结合方式

方式一：行内样式

需求：分别定义两个div 、span标签，分别修改每个标签的样式为：边框1个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	
	<body>
	
		<div style="border: 1px solid red;">div标签1</div>
		<div style="border: 1px solid red;">div标签2</div>
		<span style="border: 1px solid red;">span标签1</span>
		<span style="border: 1px solid red;">span标签2</span>
		
	</body>
</html>

方式二：内部样式

需求：分别定义两个div 、span标签，分别修改每个标签的样式为：边框1像素，实线，红色。

<!DOCTYPE html>
<html lang="en">

	<head>
	
		<meta charset="UTF-8">
		<title>Title</title>
		
		<style type="text/css">
		
			div{
				border: 1px solid red;
			}
			
			span{
				border: 1px solid red;
			}
			
		</style>
	
	</head>
	
	<body>
		<div>div标签1</div>
		<div>div标签2</div>
		<span>span标签1</span>
		<span>span标签2</span>
	</body>
	
</html>

方式三：外部样式

1、CSS文件内容：该文件命名为one.css。

div{
	border: 1px solid yellow;
}

span{
	border: 1px solid red;
}

html 文件代码：在one.css文件的同级文件夹下创建该html文件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" type="text/css" href="one.css"/>
	</head>
	<body>
		<div>div标签1</div>
		<div>div标签2</div>
		<span>span标签1</span>
		<span>span标签2</span>
	</body>
</html>

CSS选择器

标签名选择器

标签名选择器的格式是：

标签名{
    属性: 属性值;
}

标签名选择器，可以决定哪些标签被动的使用这个样式。

需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

示例代码：

<!DOCTYPE html>
<html>

	<head>
		
		<meta charset="UTF-8">
		<title>选择器</title>
		
		<style type="text/css">
		
			div{
			
				border: 1px solid yellow;
				color: blue;
				font-size: 30px;
				
			}
			
			span{
			
				border: 5px dashed blue;
				color: yellow;
				font-size: 20px;
				
			}
			
			</style>
			
		</head>
			
	<body>
		<!--
		需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素、黄色实线。
		并且修改所有span标签的字体颜色为黄色，字体大小为20个像素。边框为5像素、蓝色虚线。
		-->
		<div>div标签1</div>
		<div>div标签2</div>
		<span>span标签1</span>
		<span>span标签2</span>
	
	</body>
	
</html>

id选择器

id 选择器的格式是：

#id 属性值{
    属性: 属性值;
}

<!DOCTYPE html>

<html>

	<head>
	
		<meta charset="UTF-8">
		<title>id选择器</title>
		
		<style type="text/css">
		
			#id_00000{
			
				color: blue;
				font-size: 30px;
				border: 1px yellow solid;
				
			}
			
			#id_00001{
			
				color: red;
				font-size: 20px;
				border: 5px blue dotted;
				
			}
			
		</style>
	</head>
	
	<body>
	
		<!--
		需求：分别定义两个div标签，
		第一个div标签定义id为id_00000，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小为30个像素。边框为1像素的黄色实线。
		第二个div标签定义id为id_00001，然后根据id属性定义css样式修改的字体颜色为红色，字体大小 20个像素。边框为5像素蓝色点线。
		-->
		<div id="id_00000">div标签1</div>
		<div id="id_00001">div标签2</div>
		
	</body>
	
</html>

class选择器（类选择器）

class选择器的格式是：

. class 属性值{
    属性: 属性值;
}

<!DOCTYPE html>

<html>

	<head>
	
		<meta charset="UTF-8">
		<title>class类选择器</title>
		
		<style type="text/css">
		
			.class_00000{
			
				color: blue;
				font-size: 20px;
				border: 5px solid yellow;
			
			}
			
			.class_00001{
			
				color: grey;
				font-size: 30px;
				border: 5px solid red;
			
			}
		
		</style>
	
	</head>
	
	<body>
	
		<!--
		需求1：修改class属性值为class_00000的span或div标签，字体颜色为蓝色，字体大小20个像素。边框为5像素黄色实线。
		需求2：修改class属性值为class_00001的div标签，字体颜色为灰色，字体大小30个像素。边框为5像素红色实线。
		-->
		<div class="class_00000">div标签1</div>
		<div class="class_00000">div标签2</div>
		<div class="class_00001">div标签3</div>
		
		<span class="class_00000">span标签1</span>
		<span class="class_00001">span标签2</span>
	
	</body>
	
</html>

组合选择器

组合选择器的格式是：

选择器1,选择器2,选择器n{
    属性: 属性值;
}

组合选择器可以让多个选择器共用同一个 css 样式代码。

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>组合选择器</title>
		
		<style type="text/css">
		
			#id_00000, .class_00000 {
			
				color: blue;
				font-size: 20px;
				border: 1px yellow solid;
			
			}
			
		</style>
		
	</head>
	
	<body>

		<div id="id_00000">div标签1</div>
		<span class="class_00000">span标签1</span> <br />
		<div class="class_00000">div标签2</div> 
		<span>span标签2</pan> 
		
	</body>
	
</html>

交集选择器

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>交集选择器</title>
		
		<style type="text/css">
		
			p#id_00000 {
			
				color: blue;
				font-size: 20px;
				border: 1px yellow solid;
			
			}
			
		</style>
		
	</head>
	
	<body>

		<h1>悯农</h1>
		
		<p id="id_00000">锄禾日当午，</p>
		<p>汗滴禾下土，</p>
		<p>谁知盘中餐，</p>
		<p>粒粒皆辛苦。</p>
		
	</body>
	
</html>

子元素及后代选择器

标签之间的关系：
1、祖先元素：直接或间接包含后代元素的元素。
2、后代元素：直接或间接被祖先元素包含的元素。
3、父元素：直接包含子元素的元素。
4、子元素：直接被父元素包含的元素。
5、兄弟元素：拥有相同父元素的元素。

:first-child 选择第一个子标签
:last-child 选择最后一个子标签
:nth-child 选择指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type 选择指定类型的子元素

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>交集选择器</title>
		
		<style type="text/css">
		
			/*
			为div中的span设置颜色为绿色。
			*/
			div span {
			
				color: green;
			
			}
			
			#id_00000 span{
			
				color: red;
				
			}
			
			#id_00001 p span{
				
				color: blue;
				
			}
			
			/*
			为div的子元素span设置背景颜色为黄色。 
			>：找直接子元素，不会找非直接子元素。
			*/
			div>span{
				background-color: yellow;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div>
			
			<span>div标签中的span标签。</span>
			<p><span>p标签中的span标签。</span></p>
		
		</div>
		
		<div id="id_00000">
			<span>div标签中的span元素。</span>
		</div>
		
		<div id="id_00001">
			
			<span>div标签中的span标签。</span>
			<p><span>p标签中的span标签。</span></p>
		
		</div>
		
		<span>body标签中的span元素。</span>https://www.luping.net.cn/
		
	</body>
	
</html>

伪类选择器

a:link 正常链接
a:visited 访问过的链接（只能定义字体颜色）。
a:hover 鼠标滑过的链接。
a:active 正在点击的链接。

:focus 获取焦点
:before 指定元素前
:after 指定元素后
::selection 选中的元素

给段落定义样式：
:first-letter 首字母
:first-line 首行

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>交集选择器</title>
		
		<style type="text/css">
		
			/*
			 伪类专门表示元素的一种特殊状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框。
			 * */
			/*
			 为没有访问过的链接设置为绿色
			 * */
			a:link{
				color: green;
			}
			
			/*为访问过的链接设置为红色
			 visited伪类只能设置字体的颜色。
			 * */
			a:visited{
				color: red;
			}
			
			/*
			 hover伪类：鼠标移入时的样式
			 * */
			a:hover{
				color:yellow
			}
			
			/*
			 active伪类：超链接点击不放开时的样式
			 * */
			a:active{
				color: blue;
				font-size: 20px;
			}
			
			/*
			 hover、active不仅仅可以对a标签起作用，对其他标签也起作用。
			 * */
			p:hover{
				background: blue;
			}
			
			p:active{
				background: yellow;
			}
			
			/*
			 focus伪类：获取焦点。		 
			 * */
			input:focus{
				/*获取焦点后，将文本框的背景色改为黄色。*/
				background: yellow;
			}
			
			/*
			selection伪类：
			 为p标签中选中的内容使用样式。
			 * */
			p::selection{
				background-color: orange;	
			}
			
			/*在Firefox浏览器中也可以使用-moz-selection*/
			p::-moz-selection{
				background-color: orange;	
			}
			
		</style>
		
	</head>
	
	<body>
		
		<a href="http://www.baidu.com">百度</a> <br/>
		<a href="http://www.jd1.com">京东</a>
		
		<p>我是一个段落。</p>
		
		<input type="text" name="username"/>
		
	</body>
	
</html>

伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			使用伪元素来表示元素中的一些特殊的位置。 
			 * */
			/*
			 为p标签中的第一个字符设置样式
			 * */
			p:first-letter{
				color: red;
				font-size: 20px;
			}
			
			/*
			 为p标签中的第一行设置背景颜色
			 * */
			p:first-line{
				background-color: yellow;
			}
			
			/*
			 before：元素最前面的部分。
			 一般结合content一起使用。
			 * */
			p:before{
				content: "我会出现在最前面。";
				color: red;
			}
			
			/*
			 after:元素最后面的部分。
			 一般结合content一起使用。
			 * */
			p:after{
				content: "我会出现在最后面。";
				color:orange;
			}
				
		</style>

	</head>
	
	<body>
		
		<p>我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。我是p标签中的元素。</p>
	
	</body>
	
</html>

属性选择器

[属性名]
[属性名=“属性值”]
[属性名~=“属性值”]
[属性名|=“属性值”]
[属性名^=“属性值”]
[属性名$=“属性值”]
[属性名*=“属性值”]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			[属性名]：选取含有指定属性的元素。
			 为所有具有title属性的p元素，设置背景元素。
			 * */	
			 p[title]{
			 	background-color: yellow;
			 }
			 
			 /*
			 [属性名="属性值"]：选取含有指定属性和指定值的元素。
			  为p标签中具有title属性且值为one的标签内容设置字体大小。双引号加与不加都可以。
			  * */
			 p[title="one"]{
			 	
			 	font-size: 20px;
			 }
			 
			 /*
			  [属性名^="属性值"]：选取以指定内容开头的元素。
			  * */
			 p[title^="tw"]{
			 	font-size: 30px;
			 }
			 
			 /*
			  [属性名$="属性值"]：选取以指定内容结尾的元素。
			  * */
			 p[title$="ee"]{
			 	font-size: 50px;
			 }
			 
			 /*
			  [属性名*="属性值"]：选取属性值包含指定内容的元素。
			  * */
			 p[title*="ou"]{
			 	font-size: 40px;
			 }
			 
		</style>
		
	</head>
	
	<body>
		
		<p title="title属性中指定的文字。">p标签中的内容</p>
		<p>p标签中的内容</p>
		<p>p标签中的内容</p>
		<p>p标签中的内容</p>
		<p title="one">p标签中的内容</p>
		<p title="two">p标签中的内容</p>
		<p title="three">p标签中的内容</p>
		<p title="four">p标签中的内容</p>
		
	</body>
	
</html>

子元素的伪类

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			p:first-child{
				background-color: yellow;
			}
			
			body>p:first-child{
				background-color: blue;
			}
			
			p:last-child{
				font-size: 30px;
			}
			
			/*
			 nth-child：选中指定位置的元素。
			 	参数：
			 		even：表示偶数位置的子元素。
			 		odd：表示奇数位置的子元素。
			*/	
			p:nth-child(1){
			
				font-size: 50px;
			}
			
			p:first-of-type{
				color: red;
			}
			
			p:last-of-type{
				color: green;
			}
			
			p:nth-of-type(2){
				color: yellow;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<!--<span>span标签中的内容。</span>-->
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		
		<div>
			<p>p标签中的内容。</p>
			<p>p标签中的内容。</p>		
		</div>
		
		<span>span标签中的内容。</span>
		
	</body>
	
</html>

兄弟元素选择器

语法：
查找后边一个兄弟元素：兄弟元素+兄弟元素{}
查找后边所有的兄弟元素：兄弟元素~兄弟元素{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			 为span后的一个p元素设置背景色。
			 选中后一个紧挨着的元素。
			 * */	
			 span+p{
			 	background-color: yellow;
			 }
			 
			 /*
			  选中后面的所有兄弟元素。
			  * */
			 span~p{
			 	background-color: yellow;
			 }
			 
		</style>
		
	</head>
	
	<body>
		
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		<span>span标签中的内容。</span>
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		<p>p标签中的内容。</p>
		
	</body>
	
</html>

否定伪类

语法：
:not(选择器){}
比如：p:not(.hello)表示选择所有的p元素但是class为hello的除外。

<!DOCTYPE html>

<html>
	
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			 为所有的p元素设置背景颜色，除了class值为class_00000的元素。
			 
			 否定伪类：
			 	作用：从已选中的元素中剔除出某些元素。
			 	语法：:not(选择器)
			 * */
			p:not(.class_00000){
				background-color: yellow;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<p>p标签的内容。</p>
		<p>p标签的内容。</p>
		<p class="class_00000">p标签的内容。</p>
		<p>p标签的内容。</p>
		<p>p标签的内容。</p>
		
	</body>
	
</html>

样式的继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				color: green;
				/*背景相关的样式后代元素继承不了。*/
				background-color: yellow;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div>
			
			div标签中的内容。
			
			<p>
				p标签中的内容。
				
				<span>span标签中的内容。</span>
			</p>
			
		</div>
		
	</body>
	
</html>

选择器的优先级

选择器的权重：
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
– body h1
– h1
上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一致那还好，不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式。

权重又是如何计算的呢？
不同的选择器有不同的权重值：
– 内联样式：权重是1000
– id选择器：权重是100
– 类、属性、伪类选择器：权重是10
– 元素选择器：权重是1
– 通配符：权重是0
计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			使用不同的选择器，选中同一个元素时并且设置相同的样式时，由选择器的优先级（权重）决定。
			 
			优先级规则：
				内联样式：优先级1000
			 	id选择器：优先级100
			 	类和伪类选择器：优先级10
			 	元素选择器：优先级1
			 	通配*选择器：优先级0
			 	继承的样式：没有优先级
			 	
			当选择器中包含多种选择器时，需要将多种选择器的优先级值相加然后在比较。
			选择器的优先级计算不会超过它的最大优先级值。
			如果选择器对的优先级一样，择使用靠后的样式。
			
			并集选择器：并集选择器的优先级单独计算。
			可以在样式的最后，添加!important，则此时该样式将会获得最高的优先级。
			background-color: red !important
			div、p、#id、.class
			 * */
			#id_00000{
				background-color: blue;
			}
			
			.class_00000{
				background-color: red;
			}
			
			p{
				background-color: green;
			}
			
			*{
				font-size: 50px;
			}
			
			p{
				font-size: 30px;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<p id="id_00000" class="class_00000">p标签中的内容。
			<span>span中的内容。</span>
		</p>
	
	</body>
	
</html>

文本格式

单位

1、px
2、百分比
也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
3、em
em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。相对于当前元素的字体大小（font-size）。
1em=1font-size，当使用em时，当字体大小发生改变时，em也会随之改变。当设置字体相关的样式时，经常会使用em。

颜色

1、在CSS中可以直接使用颜色的关键字来代表一种颜色。
17种颜色：
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

2、（1）十六进制颜色
用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。
上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。
（2）RGB值
也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值，也可以使用0%100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。
（3）RGBA
RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
– RGBA(255,100,5,0.5)

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			#id_00000{
				
				width: 200px;
				height: 200px;
				background-color: red;
				background-color: rgb(0, 255, 0);
				background-color:rgb(10%, 20%, 30%);
				background-color: #0000FF;
				background-color: #F00;
				
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div id="id_00000">
			
			
		</div>
		
	</body>
	
</html>

文本大小

font-size：用来指定文字的大小。

文本字体

font-family
通过font-family可以同时指定多个字体。
浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

在网页中讲字体分成5大类：
serif：衬线字体
sans-serif：非衬线字体
monospace：等宽字体
cursive：草书字体
fantasy：虚幻字体

可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式。

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			#id_00000{
				
				font-size: 30px;
				font-family: serif;
				
			}
			
			#id_00001{
				
				font-size: 30px;
				font-family: sans-serif;
				
			}
			
			#id_00002{
				
				font-size: 30px;
				font-family: monospace;
				
			}
			
			#id_00003{
				
				font-size: 30px;
				font-family: cursive;
				
			}
			
			#id_00004{
				
				font-size: 30px;
				font-family: fantasy;
				
			}
			
			
		</style>
		
	</head>
	
	<body>
		
		<p id="id_00000">衬线字体：p标签中的内容；ABCDEFG,abcdefg.</p>
		<p id="id_00001">非衬线字体：p标签中的内容；ABCDEFG,abcdefg.</p>
		<p id="id_00002">等宽字体：p标签中的内容；ABCDEFG,abcdefg.</p>
		<p id="id_00003">草书字体：p标签中的内容；ABCDEFG,abcdefg.</p>
		<p id="id_00004">虚幻字体：p标签中的内容；ABCDEFG,abcdefg.</p>
		
	</body>
	
</html>

斜体和粗体

font-style用来指定文本的斜体。
font-style:normal 指定非斜体
font-style:italic 指定斜体
font-style:oblique 文字会以倾斜效果显示

italic和oblique效果一样。

font-weight用来指定文本的粗体。
font-weight:normal 指定非粗体
font-weight:bold 指定粗体

小型大写字母

font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
font-variant:small-caps

字体属性的简写

font可以一次性同时设置多个字体的样式。
语法：font:加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到最后两个。字体必须倒数第一，大小必须倒数第二。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			#id_00000{
				
				/*设置文字大小*/
				font-size: 30px;
				/*设置字体*/
				font-family: "微软雅黑";
				/*设置文字斜体*/
				font-style: italic;
				/*设置文字加粗*/
				font-weight: bold;
				/*设置小型大写字母*/
				font-variant: small-caps;
				
			}
			
			#id_00001{
				
				font: italic bold small-caps 30px 微软雅黑;
				
			}
			
		</style>
		
	</head>
	
	<body>
		
		<p id="id_00000">p标签中的内容。ABCDEFGabcdefg</p>
		<p id="id_00001">p标签中的内容。ABCDEFGabcdefg</p>
		
	</body>
</html>

行间距

在CSS中没有提供直接设置行间距的方式，只能通过设置行高来间接的设置行间距，行高越高行间距越大。

line-height 设置行高。
可以接收的值：
百分数：相对于字体计算行高。
数值：字体大小相应的倍数。

行间距 = line-height – font-size

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			#id_00000{
				
				width: 200px;
				height: 200px;
			
				background-color: yellow;
				
			}
			
			#id_00001{
			
				/*对于单行文本来说，将行高设置为父元素的高度，可以使单行文本在父元素中居中。*/
				line-height: 200px;
					
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div id="id_00000">
			
			<a id="id_00001" href="http://www.baidu.com">这是一个超链接。</a>
			
		</div>

	</body>
	
</html>

英文单词大、小写

text-transform属性用于将元素中的字母全都变成大小。
属性值：
uppercase 所有单词大写。
lowercase 所有单词小写。
capitalize 每个单词的首字母大写。
none 正常。

文本的修饰

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
属性值：
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义文本中间的一条线（删除线）。
none 默认，定义标准的文本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			 超链接默认会有下划线，原因是超链接默认的text-decoration属性的值是：underline。
			将该值换成none就可以去掉下划线了。 
			 * */
			a{
				text-decoration: none;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<a href="http://www.baidu.com">这是一个超链接。</a>
		
	</body>
	
</html>

字母间距和单词间距

letter-spacing属性：设置字符（中文字符、英文字符）之间的间距。
word-spacing属性：设置单词之间的间距。

这两个属性都可以直接指定一个长度或百分数作为值。正数代表增加距离，负数代表减少距离。

对齐文本

text-align属性：设置文本的对齐方式。
属性值：
left：左对齐；默认值。
right：右对齐
center：居中对齐
justify：两边对齐

首行缩进

text-indent属性：设置首行缩进。
该样式需要指定一个长度，并且只对第一行生效。

指定正值：自动向右侧缩进指定的像素。
指定负值：自动向左侧缩进指定的像素。

向右缩进2个中文：text-indent: 2em
使用em单位，不要使用px单位，不然会随着字体类型和字体大小的改变而改变。

布局

盒子模型

width和height属性只适用于块元素。

<!DOCTYPE html>
<html lang="en">

	<head>
		
		<meta charset="UTF-8">
		
		<title>Document</title>

		<style type="text/css">
			
			.box {
			
				/* 
                内容区（content）：
                    元素中的所有的子元素和文本内容都在内容区中排列。  
                    内容区的大小由width和height两个属性来设置
                        width：设置内容区的宽度。
                        height：设置内容区的高度。          
             	*/
				width: 200px;
				height: 200px;
				background-color: red;
					
				/* 
                边框（border）：边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。
                	边框的大小会影响到整个盒子的大小。
               	 	要设置边框，至少需要设置三个样式：
                    	border-width 边框的宽度
                    	border-color 边框的颜色
                    	border-style 边框的样式 
             	*/
				border-width: 10px;
				border-color: green;
				border-style: solid;
				
			}
			
		</style>
		
	</head>

	<body>

		<!-- 
        盒子模型（盒模型、框模型：box model）
        	CSS将页面中的所有元素都设置为了一个矩形的盒子。
            将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。
            
            每一个盒子都由以下几个部分组成：
            	内容区（content）
                内边距（padding）
                边框（border）
                外边距（margin）
     	-->
		<div class="box">
			
			你好
			
		</div>

	</body>

</html>

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="UTF-8">
		
		<title></title>
		
		<style type="text/css">
			
			.box{
				
				color: red;
				font-size: 50px;
				font-family: 楷体;
				 
				background-color: greenyellow;
				
				width: 500px;
				height: 200px;
				
				border-width: 10px;
				border-color: blue;
				border-style: solid;
				
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div class="box">
			div标签中的内容
		</div>
		
		<p class="box">
			p标签中的内容
		</p>
		
		<span class="box">
			span标签中的内容
		</span>
		
	</body>
	
</html>

边框

border-style属性：

可选属性值：
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于border-width的值。
groove 定义 3D 凹槽边框。其效果取决于border-color的值。
ridge 定义3D垄状边框。其效果取决于border-color的值。
inset 定义 3D inset 边框。其效果取决于border-color的值。
outset 定义 3D inset 边框。其效果取决于border-color的值。
inherit 规定应该从父元素继承边框样式。

<!DOCTYPE html>

<html lang="en">

	<head>
	
		<meta charset="UTF-8">
		
		<title>边框</title>
		
		<style>
			
			.box {
				
				width: 200px;
				height: 200px;
				background-color: #bfa;
				
				/* 
               	边框：
                    border-width：边框的宽度 
                    border-color：边框的颜色 
                    border-style：边框的样式 
             
             			border-width: 10px; 
                		默认值，一般都是3个像素
                		border-width可以用来指定四个方向的边框的宽度。
                    	值的情况：
                        	四个值：上 右 下 左
                        	三个值：上 左右 下
                        	两个值：上下 左右
                        	一个值：上下左右
                    
               			 除了border-width，还有一组border-xxx-width，xxx可以是top、right、bottom、left。用来单独指定某一个边的宽度。
                */
				/*border-width: 10px; 
				border-top-width: 10px;
             	border-left-width: 20px;
				color: red;*/
				
				/* 
                border-color用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border-width一样。
                border-color也可以省略不写，如果省略了则自动使用color的颜色值。              
              	*/
              	
				/*border-color: orange red yellow green;
             	border-color: orange;*/
				
				/* 
                border-style：指定边框的样式。
                    solid 表示实线
                    dotted 点状虚线
                    dashed 虚线
                    double 双线

                    border-style的默认值是none。表示没有边框。
             	*/
             	
				/*border-style: solid dotted dashed double;
             	border-style: solid;*/
             	
				/*border-width: 10px;
             	border-color: orange;
             	border-style: solid;*/             	
				/*
				 
                border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。
               	除了border以外还有四个：border-xxx
                    border-top
                    border-right
                    border-bottom
                    border-left
              	*/
              	
				/*border: solid 10px orange;*/
				
				/*border-top: 10px solid red;
              	border-left: 10px solid red;
              	border-bottom: 10px solid red;*/
              	
				border: 10px red solid;
				border-right: none;
				
			}
			
		</style>
		
	</head>

	<body>
		
		<div class="box">
			
			Nice to meet you.
			
		</div>
		
	</body>

</html>

内边距

<!DOCTYPE html>

<html lang="en">

	<head>
		
		<meta charset="UTF-8">

		<title>Document</title>
		
		<style>
			
			.box {
				
				/*
				width: 200px;
				height: 200px;
				background-color: #bfa;
				
				border: 10px orange solid;*/
				
				/* 
               	内边距（padding）:
                    内容区和边框之间的距离。
                    一共有四个方向的内边距：
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left

                    内边距的设置会影响到盒子的大小。
                    背景颜色会延伸到内边距上。

                	一共盒子的可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。
             	*/
             	
				/*padding-top: 100px;
             	padding-left: 100px;
             	padding-right: 100px;
             	padding-bottom: 100px;*/
             	
				/* 
                padding：内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样。
              	*/
              	
				/*padding: 10px 20px 30px 40px;
				padding: 10px 20px 30px;
				padding: 10px 20px;
				padding: 10px;*/
				
			}
			
			/*.inner {
			
				width: 100%;
				height: 100%;
				
				background-color: yellow;
				
			}*/
			
		</style>
		
	</head>

	<body>
		
		<div class="box">
			
			<div class="inner">
				
			</div>
			
		</div>
		
	</body>

</html>

外边距

<!DOCTYPE html>

<html lang="en">

	<head>
	
		<meta charset="UTF-8">
		
		<title>Document</title>
		
		<style>
			
			.box1 {
				
				width: 200px;
				height: 200px;
				background-color: #bfa;
				border: 10px red solid;
				
				/*
				外边距（margin）：
                	外边距不会影响盒子可见框的大小。但是外边距会影响盒子的位置。
                	
                	一共有四个方向的外边距：
                    	margin-top：上外边距，设置一个正值，元素会向下移动。
                    	margin-right：右外边距，默认情况下设置margin-right不会产生任何效果。
                    	margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动。
                    	margin-left：左外边距，设置一个正值，元素会向右移动。

                    margin也可以设置负值，如果是负值则元素会向相反的方向移动。

                 	元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                    而设置下和右外边距会移动其他元素。

                margin的简写属性，margin可以同时设置四个方向的外边距 ，用法和padding一样。
                margin会影响到盒子实际占用的空间。
				
				margin的值还可以设置为auto。auto一般只设置水平方向的外边距。
				如果只指定左外边距或右外边距的margin为auto，则会将外边距设置为最大值。
				垂直方向外边距如果设置为auto，则外边距默认就是0。
				如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值。
             	这样就可以使元素自动在父元素中居中，所以可以将左、右外边距设置为auto以使子元素在父元素中水平居中。
             	*/
             	
				/*margin-top: 100px;
             	margin-left: 100px;
             	margin-bottom: 100px; */
				/* margin-bottom: 100px; */
				/* margin-top: -100px; */
				/* margin-left: -100px; */
				/* margin-bottom: -100px; */
				/* margin-right: 0px; */
				margin: 100px;
				
			}
			
			.box2 {
			
				width: 220px;
				height: 220px;
				
				background-color: yellow
				
			}
			
		</style>
		
	</head>

	<body>
		
		<div class="box1"></div>
		
		<div class="box2"></div>
		
	</body>

</html>

垂直外边距的重叠

在网页中相邻的垂直方向的相邻外边距会发生外边距的重叠。
外边距的重叠指兄弟元素之间的相邻外边距会取最大值而不是和。
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			#id_00000{
				
				width: 100px;
				height: 100px;
				border: 10px red solid;
				background-color: #bfa;
				
				margin-bottom: 100px;
			}
			
			#id_00001{
				
				width: 100px;
				height: 100px;
				border: 10px red solid;
				background-color: #bfa;
				
				margin-top: 100px;
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div id="id_00000">
			
		</div>
		
		<div id="id_00001">
			
		</div>
		
	</body>
	
</html>

内联元素的盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			span{
				background-color: #bfa;
			}
			
			#id_00000{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			#id_00001{
				/*
				 内联元素不能设置宽、高。
				 * */
				/*width: 100px;
				height: 100px;*/
				
				/*
				 内联元素可以设置水平方向的内边距
				 * */
				padding-left: 100px;
				padding-right: 100px;
				
				/*
				 内联元素可以设置垂直方向的内边距，但是不会影响页面的布局。
				 * */
				padding-top: 50px;
				padding-bottom: 50px;
				
				/*
				 内联元素可以设置边框，但是垂直的边框不会影响页面的布局。
				 * */
				border: 1px blue solid;
				
				/*
				 内联元素支持水平方向的外边距。
				 水平方向相邻的外边距不会重叠，而是求和。
				 * */
				margin-right: 100px;
				margin-right: 100px;
				
				/*
				 内联元素不支持垂直外边距。
				 * */
				margin-top: 100px;
				margin-bottom: 100px;
				
			}
			
		</style>
		
	</head>
	
	<body>
		
		<span id="id_00001">我是一个span</span>
		<span>我是一个span</span>
		<span>我是一个span</span>
		<span>我是一个span</span>
		
		<div id="id_00000"></div>
		
	</body>
	
</html>

display属性与visibility属性

display属性：修改元素的类型。

不能为行内元素设置width、height、margin-top和margin-bottom。可以通过修改display来修改元素的性质。

可选属性值：
inline 将元素设置为内联元素。
block 将元素设置为块元素。
inline-block 将元素设置为行内块元素。可以使元素既有行内元素的特点又有块元素的特点：即可以设置宽高，又不会独占一行。典型代表元素img。
none 不显示元素，并且元素不会在页面中继续占有位置。

visibility属性：设置元素的显示和隐藏的状态。

可选属性值：
visible 设置元素在页面显示（默认值）。
hidden 设置元素在页面隐藏。

使用display:none隐藏的元素，不会在页面中显示并且不在占据页面的位置。
使用visibility:hidden隐藏的元素，虽然不会在页面中显示，但是依然在页面中占据位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			a{
				
				background-color: #bfa;				
				
				display: block;
				
				width: 200px;
				height: 200px;
				
				visibility: visible;
				
			}
			
			#id_00000{
				
				width: 500px;
				height: 500px;
				background-color: green;
				
				visibility: hidden;
				
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div id="id_00000"></div>
		
		<a href="#">我是一个超链接</a>
	
	</body>
</html>

overflow属性

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

可选属性值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承overflow属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			/*
			 
			 * */
			#id_00000{
				
				width: 200px;
				height: 200px;
				background-color: #baf;
				
				overflow: scroll;
				
			}
			
			#id_00001{
				
				width: 100px;
				height: 500px;
				background-color: red;
				
			}
			
		</style>
		
	</head>
	
	<body>
		
		<div id="id_00000">
			
			<div id="id_00001">
			
			
			</div>
		
		</div>
		
	</body>
	
</html>

文档流

网页是一个多层的结构，一层摞着一层。通过CSS可以分别为每一层来设置样式。作为用户来讲只能看到最顶上一层。这些层中，最底下的一层称为文档流，文档流是网页的基础。
我们所创建的元素默认都是在文档流中进行排列的。

元素主要有两个状态：
1、在文档流中
2、不在文档流中（脱离文档流）

元素在文档流中的特点：
一、块元素
1、块元素会在页面中独占一行（自上向下垂直排列）。
2、默认宽度是父元素的全部（会把父元素撑满）。
3、默认高度是被内容撑开（子元素）。

当元素的高度或宽度的值为auto时，指定内边距不会影响可见框的大小，而是会自动修改宽度和高度，以适应内边距。

二、内联（行内）元素
1、行内元素不会独占页面的一行，只占自身的大小。
2、行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列。
3、行内元素的默认宽度和高度都是被内容撑开。

<!DOCTYPE html>
<html lang="en">

	<head>
		
		<meta charset="UTF-8">
		
		<title>文档流</title>
		
		<style>
			
			.box1 {
				width: 100px;
				background-color: red;
			}
			
			.box2 {
				width: 100px;
				background-color: green;
			}
			
			span {
				background-color: blue;
			}
			
		</style>
		
	</head>

	<body>

		<div class="box1">我是div1</div>
		<div class="box2">我是div2</div>

		<span>我是span1</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		<span>我是span2</span>
		
	</body>

</html>

浮动

所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
浮动使用float属性。

可选属性值：
none 不浮动。
left 向左浮动。
right 向右浮动。

块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。
浮动会使元素完全脱离文档流，也就是不再在文档中占用位置。
元素设置浮动后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。
元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。
浮动元素默认会变为块元素，即使设置display:inline后其依然是个块元素。

清除浮动
clear属性可以用于清除元素周围的浮动对元素的影响，也就是元素不会因为上方出现了浮动元素而改变位置。

属性可选值：
left 忽略左侧浮动。
right 忽略右侧浮动。
both 忽略全部浮动。
none 不忽略浮动，默认值。

<!DOCTYPE html>
<html lang="en">

	<head>
		
		<meta charset="UTF-8">
		
		<title>浮动</title>
		
		<style>
			.box1 {
				width: 400px;
				height: 200px;
				background-color: #bfa;
				/* 
                          通过浮动可以使一个元素向其父元素的左侧或右侧移动
                          使用 float 属性来设置于元素的浮动
                          可选值：
                            none 默认值 ，元素不浮动
                            left 元素向左浮动
                            right 元素向右浮动

                       注意，元素设置浮动以后，水平布局的等式便不需要强制成立
                        元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，
                            所以元素下边的还在文档流中的元素会自动向上移动

                    浮动的特点：
                        1、浮动元素会完全脱离文档流，不再占据文档流中的位置
                        2、设置浮动以后元素会向父元素的左侧或右侧移动，
                        3、浮动元素默认不会从父元素中移出
                        4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
                        5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
                        6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

                    简单总结：
                        浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，
                            通过浮动可以制作一些水平方向的布局    
             */
				float: left;
			}
			
			.box2 {
				width: 400px;
				height: 200px;
				background-color: orange;
				float: left;
			}
			
			.box3 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				float: right;
			}
			
		</style>
		
	</head>

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

	</body>

</html>

定位

position属性可以控制Web浏览器如何以及在何处显示特定的元素。
可以使用position属性把一个元素放置到网页中的任何位置。

属性可选值：
static
relative
absolute
fixed

相对定位

绝对定位

固定定位

z-index

常用样式

  • 字体颜色
    color：red；
    颜色可以写颜色名如：black, blue, red, green 等颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#
  • 宽度
    width:19px;
    宽度可以写像素值：19px；
    也可以写百分比值：20%；
  • 高度
    height:20px;
    高度可以写像素值：19px；
    也可以写百分比值：20%；
  • 背景颜色
    background-color:#0F2D4C
  • 字体样式：
    color：#FF0000；字体颜色红色
    font-size：20px; 字体大小
  • 红色 1 像素实线边框
    border：1px solid red;
  • DIV 居中
    margin-left: auto;
    margin-right: auto;
  • 文本居中：
    text-align: center;
  • 超连接去下划线
    text-decoration: none;
  • 表格细线
    table {
    border: 1px solid black; /设置边框/
    border-collapse: collapse; /将边框合并/
    }
    td,th {
    border: 1px solid black; /设置边框/
    }
  • 列表去除修饰
    ul {
    list-style: none;
    }
    示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css 常用样式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是 div 标签</div>
</body>
</html>

demo

1

<!DOCTYPE html>
<html>

	<head lang="en">
		
		<meta charset="utf-8" />
		
		<title>清平乐·年年雪里</title>
		
		<!-- <link type="text/css" rel="styleSheet" href="./css/style.css"/> -->
		<style type="text/css">
			
			body {
				background: url("../images/liqingzhao.jpg") no-repeat;
				padding-left: 230px;
			}
			
			hr {
				width: 80%;
				text-align: left;
			}
			
			h1, p {
				font-family: "隶书";
				color: #fff;
			}
			
			p {
				font-size: 20px;
			}
			
			strong {
				color: blue;
			}
			
		</style>

	</head>

	<body>
		
		<h1>清平乐·年年雪里</h1>
		
		<em>朝代:宋代</em> &nbsp;&nbsp; 作者:<strong>李清照</strong>
		
		<hr/>
		
		原文：
		
		<p>
			年年雪里，常插梅花醉，
			
			<br/>
			
			挼尽梅花无好意，赢得满衣清泪！
			
			<br/>
			
			今年海角天涯，萧萧两鬓生华。
			
			<br/> 
			
			看取晚来风势，故应难看梅花。
		
		</p>

	</body>

</html>

所需图片如下：
在这里插入图片描述

============================

编辑网页文本

背景样式

CSS选择器

CSS3的基本选择器

伪类选择器

<!DOCTYPE html>

<html lang="en">
	
	<head>
		
	    <meta charset="UTF-8">
	       
	    <title>伪类选择器</title>
	    
	    <style>
	    	
	        /* 
	                    将ul里的第一个li设置为红色
	                    
	                    伪类（不存在的类，特殊的类）
	                          伪类用来描述一个元素的特殊状态
	                          比如：第一个子元素、被点击的元素、鼠标移入的元素...
	                    伪类一般情况下都是使用:开头
	               :first-child；选中第一个子元素
	               :last-child；选中最后一个子元素
	               :nth-child()；选中第x个子元素
	               
	                            特殊值：
	                    n；第n个；n的范围1到正无穷
	                    2n或even；表示选中偶数位的元素
	                    2n+1或odd；表示选中奇数位的元素
	
	                             以上这些伪类都是根据所有的子元素进行排序
	
	                :first-of-type
	                :last-of-type
	                :nth-of-type()
	                                 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
	
	                :not()；否定伪类
	                                 将符合条件的元素从选择器中去除
	        */
	       
			/*:first-child 选择第一个子元素*/
	        /*ul > li:first-child{	        	
	            color: red;	            
	        }*/
	    
	    	/* :last-child 选择最后一个子元素*/
	        /*ul > li:last-child{
	            color: red;
	        }*/
	
			/*:nth-child(n)；选中第n个子元素；n值为正整数；1-n*/
	        /*ul > li:nth-child(odd){
	            color: red;
	        }*/
	
	        /*ul > li:nth-child(even){
	            color: red;
	        }*/
	
	        /*ul > li:first-of-type{
	            color: red;
	        }*/
	
	        ul > li:not(:nth-of-type(3)){
	            color: red;
	        }
	       
	    </style>
	    
	</head>
	
	<body>
	    
	    <ul>
	    	
	        <!--<span>我是一个span</span>-->
	        
	        <li>第〇个</li>
	        <li>第一个</li>
	        <li>第二个</li>
	        <li>第三个</li>
	        <li>第四个</li>
	        <li>第五个</li>
	        
	    </ul>
		
	</body>
	
</html>

a元素的伪类

<!DOCTYPE html>
<html lang="en">

	<head>
		
		<meta charset="UTF-8">
		
		<title>a元素的伪类</title>
		
		<style>
			
			/* 
            	:link 表示没访问过的链接（正常的链接）
         	*/			
			a:link {
				color: red;
				font-size: 20px;
			}
			
			/* 
            	:visited 表示访问过的链接
        	*/			
			a:visited {
				color: green;
				/*font-size: 50px; 不生效；由于隐私的原因，所以visited这个伪类只能修改链接的颜色*/
			}
			
			/* 
             :hover 表示鼠标移入的状态
            */
			
			a:hover {
				color: yellow;
				font-size: 30px;
			}
			
			/*
                :active 表示鼠标点击时的状态
            */			
			a:active {
				color: orange;
			}
			
		</style>
		
	</head>

	<body>

		<a href="https://www.baidu.com">访问过的链接</a>

		<br/>

		<a href="https://www.baidu123.com">未访问过的链接</a>

	</body>

</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">

	<head>
		
		<meta charset="UTF-8">

		<title>伪元素选择器</title>

		<style>
			
			p {
				font-size: 20px;
			}
			
			/* 
                         伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
                             伪元素使用 :: 开头

                ::first-letter 第一个字母
                ::first-line 第一行
                ::selection 选中的内容
                ::before 元素的开始 
                ::after 元素的最后
                    before和after必须结合content属性来使用
        	*/
			
			p::first-letter {
				font-size: 30px;
			}
			
			/*2022年5月29日演示不生效*/
			/*p::first-line {
				background-color: green;
			}*/
			
			p::selection {
				background-color: greenyellow;
			}
			
			
			/*div::before{
            	content: "befor";
            	color: red;
        	}

        	div::after{
            	content: "after";
            	color: blue;
        	}*/
			
			div::before {
				content: '『';
				color: red;
			}
			
			div::after {
				content: '』';
				color: red;
			}
			
		</style>
		
	</head>

	<body>

		<q>hello</q>
		
		<div>
			Nice to meet you！
		</div>

		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore 
			laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
		</p>

	</body>

</html>

样式的继承

<!DOCTYPE html>
<html lang="en">

	<head>
		
		<meta charset="UTF-8">
		
		<title>样式的继承</title>
		
		<style>
			
			body{
				
            	font-size: 20px;
            
            } 
       
			/* 
            	样式的继承，为一个元素设置的样式同时也会应用到它的后代元素上。
            	继承是发生在祖先后代之间的。

            	继承的设计是为了方便我们的开发，
                            利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
                            这样只需设置一次即可让所有的元素都具有该样式

           		 注意：并不是所有的样式都会被继承：
                              比如 背景相关的，布局相关等的这些样式都不会被继承。
         	*/
			
			p {
				color: blue;
				background-color: orange;
			}
			
			div {
				color: red;
			}
			
		</style>
		
	</head>

	<body>
		
		<p>
			
			我是一个p元素
			
			<span>我是p元素中的span</span>
			
		</p>

		<span>我是p元素外的span</span>

		<div>
			
			我是div
			
			<span>
				
                          我是div中的span
            
            	<em>我是span中的em</em>
            	
            </span>
        
		</div>
		
	</body>

</html>

文本格式

单位

1、px
2、百分比
也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
3、em
em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

颜色

1、在CSS中可以直接使用颜色的关键字来代表一种颜色。
17种颜色：
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

2、（1）十六进制颜色
用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。
上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。
如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F。
（2）RGB值
也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值，也可以使用0%100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度。
（3）RGBA
RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
– RGBA(255,100,5,0.5)

文本大小

font-size：用来指定文字的大小。

文本字体

font-family
通过font-family可以同时指定多个字体。
浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

斜体和粗体

font-style用来指定文本的斜体。
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal
font-weight用来指定文本的粗体。
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

小型大写字母

font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
– font-variant:small-caps

字体属性的简写

font可以一次性同时设置多个字体的样式。
语法：– font:加粗 斜体 小型大写 大小/行高 字体
这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

行间距

line-height用于设置行高，行高越大则行间距越大。
行间距 = line-height – font-size

大写化

text-transform样式用于将元素中的字母全都变成大小。
– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none

文本的修饰

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
可选值：
– underline
– overline
– line-through
– none

字母间距和单词间距

letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本

text-align用于设置文本的对齐方式。
可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐

首行缩进

text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一行生效。

a_an_the
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} <p class=“student”>张三<p> 类名的前边一定要加上一个小数点(.)以表示这是个类选择器而不是重定义标签 类名建议起得有意思，避免起abcd等没有意思的名字 在需要应用类选择器的标签内用上class属性套用 在标签内用class属性套用时不需要加上小数点 一个标签要套用多个类的样式，可以使用空格隔开。例如<p class=“student name”>张三</p>
html与css课件
sonicbin的博客
02-11 949
第一章——初始HTML HTML—百科 HTML全称 : Hyper Text Markup Language HTML的全称为超文本标记语言，是一种标记语言。 它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的 自1990
css.ppt,纯Css幻灯片
weixin_28715953的博客
08-04 261
css/****************************************/html, body {margin: 0;background-color: #101010;font-family: sans-serif;}.slideshow {width: 100%;height: 100%;border: 0px;padding: 0px;margin: 0 auto;backg...
html和css学习课件（新版）
sonicbin的博客
02-26 1671
第一章：初识HTML 本章目标： 理解HTML 掌握HTML标签的应用 掌握超链接的应用 什么是HTML HTML是用来制作网页的标记语言 HTML是HyperText Markup Language的英文缩写,即超文本标记语言 HTML不是一种编程语言，而是一种标记语言 [标记语言是一套标记标签 (markup tag)] ，描述网页的语言 HTML使用标签描述网页中图片、文本、音乐、视频、超链接 在HTML中，虽然有文本，但是这些文本需要使用html语言中的标记来标识。 当被HTML中的标记标识之
html +css 课件
12-15
html基础 html列表与菜单的制作 html表格属性及布局 框架与表单 css核心基础 盒子模型 浮动与定位 文字与图像、圆角的制作 导航与菜单 综合应用修饰表单
css_css_
10-04
可以初步学习html，了解html结构和用法，制作属于自己的网页并传播html知识于其他人
ttt_CSS_css_
10-04
Tic tac toe CSS
css_css_zip_
09-29
css develpment processe
Interaktivny_CSS_css_
10-03
Css for one html. Good Luck HF
css_menu.zip_CSS ME_css
09-24
一个精美的纯CSS下拉菜单，代码非常精简，很容易理解。
html+css 课件
11-09
前端入门课件
CSS教程(ppt)
02-27
css ppt 教程 样式表 样式表样式表
HTML5 + CSS3 标准课件 PPT
02-17
HTML5 + CSS3 标准课件 ppt （包括 canvas 、多媒体、本地存储、Geolocation地理位置 等）
HTML与CSS课件
09-26
HTML5 CSS 软件开发PPT
html5+css3课件打包
05-31
包含了一整套html5和css3的最新课件
HTML5（1）
cookies_s_的博客
04-28 1267
网页制作思路：从上到下，先整体再局部，逐步分析制作分析内容->写代码->保存->刷新浏览器->看效果Vue.js(发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
HTML5实用大全(Part.1)
最新发布
2301_79539778的博客
05-01 1089
本篇博客主要为了帮助大家了解HTML5新特性以及HTML的简单知识部分
HTML5废除的元素
yuxingwu9872的博客
04-25 1325
HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，废除plaintex使用“text/plian”（无格式正文）MIME类型替代。applet、bgsound、blink、marquee等标签。废除acronym使用abbr替代。废除rb, 使用ruby替代。2、不再使用frame框架。废除dir使用ul替代。
CSS特性
lan_da_wang的博客
04-29 380
化简代码，定位问题，解决问题。
DeprecationWarning: find_element_by_css_selector is deprecated. Please use find_element(by=By.CSS_SELECTOR, value=css_selector)
07-10
具体而言，您可以将代码中的 `find_element_by_css_selector` 替换为 `find_element(by=By.CSS_SELECTOR, value=css_selector)`，其中 `css_selector` 是您要查找的 CSS 选择器。 示例代码： ```python from ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值