css级联样式表

导读:本篇文章讲解 css级联样式表,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

CSS

概述

CSS( Cascading Style Sheets )级联样式表

CSS是描述HTML文档样式的语言,它定义HTML文档的字体,背景,布局排版…

外部样式表与HTML文档分离,将标签与样式链接起来

在没有CSS之前我们想定义文档的样式,必须在每个标签里写上标签自己的属性,相当的麻烦,有了CSS之后我们可以像Java中的方法一样,写一份方法,哪里需要调哪里

语法

  • 行内样式表
  • 内嵌样式表
  • 外部样式表

行内样式表

语法格式
<style="属性:值;" 自闭合标签/>
<style="属性:值;" 标签></标签>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
	</head>
	<body>
		<!-- 级联样式表
		 行内样式表 (使用较少,优先级最高)
		 内嵌样式表 (开发测试期间使用)
		 外部样式表 (最终使用)
		 -->
		 <!-- 行内样式表 -->
		 <p style="font-size: 10px; color: blue;">青玉案</p>
		 <p style="font-size: 15px; color: brown;">静夜思</p>

	</body>
</html>

在这里插入图片描述

内嵌样式表

语法格式:
<style type="text/css">
    选择器{属性:;}
</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<!-- 内嵌样式表 -->
		<style type="text/css">
			h1,h2{color: chartreuse;}
		</style>

	</head>
	<body>
		<h1>青玉案</h1>
		<h2>元夕</h2>
	</body>
</html>

在这里插入图片描述

外部样式表

与内嵌样式表相似,将内嵌样式表中的样式挪到一个后缀名为css的文件中,再通过link标签将HTML文档与CSS链接(关联)

语法格式:
链接
<link rel="stylesheet" type="text/css" href="css文件的相对路径"/>
样式表
选择器{属性:值;}

css文件(out.css)

h1{color: cornflowerblue;}
h2{color: brown;}

css文件与html文件的相对位置

在这里插入图片描述

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<!-- 链接外部样式表-->
		<link rel="stylesheet" type="text/css" href="css/out.css"/>
	</head>
	<body>
        <h1>青玉案</h1>
        <h2>元夕</h2>
	</body>
</html>

在这里插入图片描述

选择器

分类

  • 标签选择器
  • ID选择器(id唯一; 优先级最高)
  • 类选择器
  • 通配选择器(全选;优先级最低)

选择器范围越大优先级越低

标签选择器

语法格式
<style type="text/css">
   标签名{属性:值;}
   ...
</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			/* 标签选择器 */
			p{color: #6495ED;}
		</style>
	</head>
	<body>
		<h1>静夜思</h1>
		<p>窗前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
	</body>
</html>

在这里插入图片描述

ID选择器

<style type="text/css">
    #id{属性:值;}
    #id{属性:值;}
    ...
</style>

类选择器

语法格式
<style type="text/css">
   .类名{属性:值;}
   .类名{属性:值;}
   ...
</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			/* 标签选择器 */
			p{color: #6495ED;}
			/* id选择器 */
			#title{color: red;}
			/* 类选择器 */
			.p1{color: aqua;}
			.p2{color: burlywood;}
		</style>
	</head>
	<body>
		<h1 id="title">静夜思</h1>
		<p class="p1">窗前明月光</p>
		<p class="p2">疑是地上霜</p>
		<p class="p1">举头望明月</p>
		<p class="p2">低头思故乡</p>
	</body>
</html>

在这里插入图片描述

通配选择器

语法格式
<style type="text/css">
   *{属性:值;}
</style>

选择器组合

语法格式
<style type="text/css">
   选择器1,选择器2,选择器3{属性:值;}
</style>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			/* 通配选择器 */
			*{color: blue;}
			/* 选择器组合  同时选中多个选择器 */
			h2,#p,.p{color: chartreuse;}
		</style>
	</head>
	<body>

		<h2>青玉案</h2>
		<h3>元夕</h3>
		<p id ="p">青玉案</p>
		<p class ="p">青玉案</p>
		<p>青玉案</p>

	</body>
</html>

在这里插入图片描述

文本

属性 说明
color: 字体颜色
font-size: 字体大小
font-family: 字体(楷体,宋体)
text-algin:left 文本对齐方式
text-decoration:line-through 删除线
text-decoration:underline 下划线
text-decoration:none 定义标准文本(删除下划线)
font-style:italic 字体样式:斜体
font-weight:bold 字体粗细
line-height: 行高
letter-spacing : 字符间距(单位:像素(px))
text-indent : 2em 首行缩进(1em=当前文档中1字符大小)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#p1{
				color: #FF0000;
				font-family: 华文彩云;/* 字体 */
				text-align: center;/* 文本对齐方式 */
				text-decoration: line-through;/* 删除线 */
				}
			#p2{
				text-decoration: underline;/* 下划线 */
				font-style: italic;/* 斜体 */
				font-weight: 1000;/* 字体粗细 */
				letter-spacing:20px ;/* 字符间距 */
			}
			#p3{
				line-height: 20px;/* 行高 */
				text-indent: 2em;/* 首行缩进  em:当前文档中单个字符的大小 */
			}
		</style>
	</head>
	<body>
		<p id="p1">
			东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</p>
		
		<p id="p2">
			东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</p>
		
		<p id="p3">
			东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</p>
		
	</body>
</html>

在这里插入图片描述

背景

属性 说明
background-image: url(图片路径); 背景图片
background-repeat 背景图片重复控制
background-size 背景图片大小
background-position 背景图片位置控制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 400px;
				height: 300px;/* 标签宽高 */
				background-color: #0000FF;/* 背景颜色 */
				background-image: url(img/bg.jpg);/* 背景图片 */
				background-repeat: no-repeat;/* 背景图片重复控制 */
				background-size: 200px;/* 背景图片大小 */
				background-position: center bottom;/*背景图片位置控制 */
				/* 利用居中对齐和行高与标签高度相等实现文字居中 */
				text-align: center;
				line-height: 300px;
				color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<p>一段文字</p>
	</body>
</html>

在这里插入图片描述

列表

属性 说明
list-style-type 设置列表项标志类型
list-style-image 列表项添加图标
list-style-position 设置列表项标志的位置
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.list1{
				/* 取消默认列表项图标 */
				/* list-style-type: none; */
				/* 列表项添加图标 */
				/* list-style-image: url(img/li_icon.jpg); */
				/* 设置列表项图标的位置 */
				/* list-style-position: inside; */
				
				/* CSS简写 */
				list-style: url(img/li_icon.jpg) none inside;/* 不分先后顺序 */
				text-align: center;
				background-color: #00FFFF;
			}
			
			.list2{
				list-style: url(img/li_icon.jpg) none outside;;
				text-align: center;
				background-color:  #00FFFF;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="list1">列表</li>
			<br>
			<li class="list1">列表</li>
		</ul>
		
		<ul>
			<li class="list2">列表</li>
			<br>
			<li class="list2">列表</li>
		</ul>
	</body>
</html>

在这里插入图片描述

伪类

标签有不同的状态, 鼠标移入(hover) 点击(active) 聚焦(focus)

有时需要为不同状态的标签添加样式,这时就使用伪类(或为元素)

伪类 说明
选择器:hover{} 悬停时切换样式
选择器:active{} 点击时切换样式
选择器:focus{} 聚焦时切换样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 鼠标悬停到此标签时,自动切换到此样式 */
			a:hover{
				color: #A52A2A;
			}
			/* 鼠标点击此标签时,自动切换到此样式 */
			a:active{
				color: burlywood;
			}
			
			#btn:active{
				color: white;
				background-color: #808080;
			}
			/* 输入型组件  获得鼠标焦点时,自动切换到此样式 */
			.in:focus{
				color: white;
				background-color: grey;
			}
		</style>
	</head>
	<body>
		<!-- 伪类
			标签有不同的状态  鼠标移入(hover)  点击(active)  聚焦(focus)
			有时需要为不同状态的标签添加样式,可以使用伪类(伪元素)
		 -->
		<a href="">百度</a>
		<br>
		<a href="">京东</a>
		<br>
		<a href="">阿里</a>
		<br>
		
		<input type="button" id="btn" value="确定" />
		<input type="input"  class="in"/>
	</body>
</html>

在这里插入图片描述

透明度

属性opacity定义标签的透明度

透明度从0(完全透明)~1(完全不透明)

标签默认opacity值为1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1:hover{
				/* 设置标签的透明度 0~1 0为全透明 1为不透明 0时虽然透明但是组件所占的位置不变 */
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<!-- 透明度 -->
		<img src="img/透明.jpg" width="300px" class="p1">
	</body>
</html>

鼠标在图片外,图片不透明
鼠标移入图片内,图片变半透明
在这里插入图片描述

标签分类

  • 行级标签

    只占自身标签内容的大小,不占满一行,设置宽高也无效

  • 块级标签

    无论内容多少,都会占一行

    默认宽:与父级标签一致
    默认高: 0 or 内容高度
    但是可以设置宽高

  • 行级块标签

    不占一行
    可以设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 行级块标签 input img  可以设置宽高 不占一行 */
			img,input{
				width: 100px;
				height: 30px;
			}
			
		</style>
	</head>
	<body>
		<!-- 行级标签 a 
			只占自身标签大小  不占一行
			即时设置宽高也无效
			
		 -->
		 <!-- a标签可包含任何标签(除a以外) -->
		<a href="">百度</a><a href="">百度</a><a href="">百度</a>
		<hr >

		<!-- 块级标签  p h1 hr ul ol 
			无论内容多少,都会占一行
			默认宽:与父级标签一致
			默认高: 0 or 内容高度
			但是可以设置宽高
		 -->
		<p style="height: 50px; width: 100px; background-color: #0000FF;">一段文字</p><a href="">超链接</a>
		<!-- 一般使用块级标签包含行级标签 -->
		<!-- p标签不能包含任何块标签 -->
		<p><a href="">哔哩哔哩</a></p>
		<hr >
		<!-- 行级块标签  img input
			不占一行
			可以设置宽高	
		-->
		
		<img src="./img/bg.jpg">图片
		<input type="text"  name="" id="" value="" />
		
	</body>
</html>

在这里插入图片描述

display

display属性,可以修改标签的属性

  • display:none:在网页中让标签消失,并不占用网页空间

  • display:inline 将标签修改为行级标签

  • display:block 将标签修改为块级标签

  • display:inline-block 将标签修改为行级块标签(不占一行,可以设置宽高)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		display:修改标签的类型
			display:none:在网页中让标签消失,并不占用网页空间
		 -->
		 <p style="display: none;">
			 东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</p>青玉案
		<hr >
		
		<!-- display:inline  将标签修改为行级标签 -->
		<p style="display: inline; color: #00FFFF;">
			东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</p>青玉案
		<hr >
		<!-- display:block   将标签修改为块级标签 -->
		<a href="" style="display: block;">哔哩哔哩</a>B站
		<hr >
		f
		<!-- display:inline-block 将标签修改为行级块标签(不占一行,可以设置宽高)-->
		<p style="display: inline-block; width: 100px;">青玉案</p>元夕
		<br>
		<a href="" style="display: inline-block; height: 100px; background-color: #0000FF; color: #FFFFFF;">哔哩哔哩</a>
		
	</body>
</html>

在这里插入图片描述

div/span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- div 块级标签
		一般块标签(p,h1等)有默认样式or其他缺陷
		div没有任何默认样式,可以包含任何标签
		主要用于网页布局 -->

		<div id="" style="background-color: #0000FF;">
			东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</div>
		<hr>
		
		<p style="background-color: #0000FF;">
				东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
		</p>
	
		<!-- span 行级标签
		一般行标签(b,i,u 有默认样式)
		没有任何附加样式
		用于选中网页上的文本,为其添加样式
		-->
		<span id="" style="color: grey;">
			青玉案
		</span>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

盒子模型

盒子模型
形象地将一个标签的4个部分这一构造,称为盒子模型
每个标签由4个部分组成

  • 内容区:
  • padding内边距:
  • border边框 :
  • margin外边距:

特点:

  • width,height 只是设置内容区的大小
  • 若不设置内边距大小与边框 盒子大小=内容区大小
  • 标签大小 = 内容区大小 + 内边距大小 + 边框大小
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				/* 设置内容区大小,并不改变整个标签大小 */
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				/* 内边距 */
				/* padding-top: 10px; */
				/* padding: 10px 上下左右都为10px */
				/* padding: 10px 20px  上下10  左右20 */
				/* padding: 10px,10px,10px,10px 上,右,下,左 */
				
				/* 边框 */
			/* 	border-top-width: 10px;
				border-top-style: solid; 实线
				border-top-color: #A52A2A; */
				/* 简写 */
				/* border-top:10px solid #A52A2A; */
				border: 10px solid #A52A2A;
				
				/* border-top-left-radius: 10px;设置圆角边框
				border-top-right-radius: 10px; */
				border-radius: 10px 20px 10px 20px;
				
				
			}
			
			.search{
				width: 300px;
				height: 45px;
				border: #6495ED solid 3px;
				border-radius: 10px;
				font-size: 20px;
				padding:1 20;
				
			}
			.search:hover{
				border: #0000FF solid 3px;
			}
		</style>
	</head>
	<body>
		 <div id="div"></div>

		 <input class="search" type="text" name="" id="" value="" />
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* css开篇  取消标签默认外边距/内边距  需要时再同一添加 */
			*{
				padding: 0px;
				margin:0px;
			}
		
			#div1{
				background-color: #A52A2A;
				width: 200px;
				height: 200px;
				
			}
			
			#div2{
				background-color: #6495ED;
				width: 200px;
				height: 200px;
				/**
				 * 外边距: 一个标签与另一个标签的距离
				 * 不会影响标签的大小,只影响标签的位置
				 * 左右外边距为auto时,左右外边距会自动为最大值
				 * 上下外边距为auto时,上下外边距为0(body的高度与内容的高度一致)
				 */
				/* 
				margin-left: auto;
				margin: auto;  上下0 左右最大*/
				margin: 100px auto;/* 上下 左右*/
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		
		<div id="div2"></div>
		
		<p>一段文字</p>
	</body>
</html>

在这里插入图片描述

文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: #0000FF;
				width: 100px;
				height: 100px;
			}
			
			.div2{
				background-color: #7FFF00;
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>

		 <p>文档流</p>
		 <div class="div1"></div>
		 
		 <div class="div2"></div>
		  
	</body>
</html>

在这里插入图片描述

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: #0000FF;
				width: 100px;
				height: 100px;
				float: left;
			}
			
			.div2{
				background-color: #7FFF00;
				height: 100px;
				width: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- 网页布局就是通过浮动/定位来打破这种默认文档流
					  浮动(float)让标签脱离原来的文档流,漂浮起来
					  原来的行级标签/块级标签浮动后 标签宽度为内容宽度
					  可以设置宽度
		 -->
		<div class="div1">
					 
		</div>
		
		<div class="div2">
			
		</div>
		<p>标签浮动</p>
	</body>
</html>

在这里插入图片描述

定位

定位:允许要定位的标签,相对于其原来的位置or另一个标签or父级标签or浏览器边框(8px)为参照物

分类

  • 相对定位 relative
  • 绝对定位 absolute
  • 固定定位 fixed

相对定位:

开启相对定位,若不给偏移量,标签不会发生任何变化
设置偏移量(left right top bottom)
相对于原来标签的位置进行移动
不会脱离原文档流(偏移后依然占据原来的位置)

绝对定位:

开启绝对定位后,标签脱离原来的文档流(不占据原来位置)
若不给偏移量,标签不会发生任何变化
设置偏移量(left right top bottom)
绝对定位是相对于离它最近的开启了定位的父级标签进行定位
如果父级标签都没有开启定位,就以浏览器边框(8px)为参照物定位
一般,开启了字标签的绝对定位,同时会开启父标签的相对定位

固定定位

相对于浏览器窗口进行定位,脱离原来文档流(返回顶部)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
		/**
		 * 定位:
		 * 相对定位  绝对定位  固定定位
		 */
		
		/* 相对定位 */
			.div1{
				background-color: #0000FF;
				width: 100px;
				height: 100px;
				position: relative;
				left: 100px;
				top:100px
			}
			
			.div2{
				background-color: #7FFF00;
				width: 100px;
				height: 100px;
			}
			
			.div3{
				background-color: red;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 100px;
				top: 100px;
			}
			
			.div4{
				background-color: #7FFF00;
				width: 100px;
				height: 120px;
			}
			/* 绝对定位*/
			.div5{
				background-color: #808080;
				width: 200px;
				height: 200px;
                position: relative;
			}
		</style>
	</head>
	<body>
		<p>相对定位</p>
		<div class="div1">
			div1
		</div>
		
		<div class="div2">
			div2
		</div>
		<hr >
		<p>绝对定位</p>
		<div class="div5">
			<div class="div3">
				div3
			</div>
			
			<div class="div4">
				div4
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.back_top{
				position: fixed;
				right: 20px;
				bottom: 20px;
			}
			
			
			
			.back_top:hover{
				
			}
		</style>
	</head>
	<body>
		<img src="img/淘宝.jpg" >
		<br>
		<img src="img/bg.jpg" >
		<br>
		<img src="img/淘宝.jpg" >
		
		<div class="back_top">
			<a href="" target="_self">返回顶部</a>
		</div>
	</body>
</html>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/15630.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!