devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

WEB 安全 DIV CSS基础_web中cssdiv怎么看

作者：正经夜光杯 | 2024-08-07 02:30:42

赞

踩

web中cssdiv怎么看

WEB安全 DIV CSS基础

1.DIV和CSS样式

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

DIV是html的一个标签 css是一个样式表

2.样式表类型

2.1 嵌入样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
	</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这里插入图片描述

2.2 外部样式

<link rel="stylesheet" href="css/style.css"/>
.demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

2.3内联样式

<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>

  • 1

在这里插入图片描述

3.注释

/* */ 注释内容

4.样式选择器

元素选择器 div{属性:值}

ID选择器 #id{属性:值}

class选择器 .类名{属性:值}

子选择器 元数 空格 元素{属性:值}

后代选择器 元数 > 元数{属性:值}

属性选择器 元素[属性]{}

通配符选择器 *{属性:值}

群组选择器

		<style>
			/* 通配符选择器
			*{
				margin:8px; 
				padding: 8px;
			} */
			
			
			/* 属性选择器
			div{
				border: 5px solid black; 
			} */
			
			/*群组选择器
			 .demo1,#id1{
				width: 200px;  
				height: 200px;
			} */
			
			.demo1{
				color: aquamarine;/* 颜色 */
				width: 200px;/* 长 */
				height: 200px;/* 高 */
				background: red;/* 背景色 */
			}
			#id1{color: aquamarine;
				width: 200px;
				height: 200px;
				background: blue;
			}
			
			/* 子选择器
			.demo2 p{
				color: rebeccapurple; 
			} */
			
			后代选择器
			.demo2 > p{
				color: rebeccapurple;
			}
		</style>
	</head>
	<body>
		<div class="demo1"><!-- 类选择器 -->
			demo1
		</div>
		<div id ="id1"><!-- id选择器 -->
			demo2
		</div>
		<div class="demo2"><p>这里是一个段落</p></div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

代码实现
在这里插入图片描述

5.背景

background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。

inherit 规定应该从父元素继承 background 属性的设置。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

简写
background: url(images/bg.gif) no-repeat top right

背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动

background-attachment:scroll; 滚动，随内容的滚动而滚动

body{
				/* background-color: aqua; */ /* 背景色 */
				/* background-image:url(img/1.webp) */ ;/* 背景图 */
				/* background-repeat: no-repeat; */  /* 图片不铺满整张页面 */
				/* background-attachment: fixed; *//* 图片固定，不随内容的滚动而滚动 */
				/*background-attachment: scroll; 滚动，随内容的滚动而滚动 */
				/* background-repeat: repeat-y; *//* 图片纵向铺满，x为横向铺满*/
				background: url(img/1.webp) no-repeat fixed; /* 简写 */
			}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述

6.边框

边框颜色 border-color:#000

边框宽度 border-width:1px;

border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 　实线边框（常用）
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

上 右 下左
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
上 右 下左

简写

border:5px solid red;

	<style>
			.demo6{
				width: 400px;
				height: 400px;
				/* border-width: 10px; */ /* 盒子模型边框宽度 */
				/* border-style: solid;*/ /* 盒子边框线条类型 */
				/* border-color: red; *//* 盒子边框颜色 */
				border:1px solid red;
			}
			.demo7{
				margin-top: 20px;/* 设置距离上一个边框距离 */
				width: 400px;
				height: 400px;
				border-width: 10px; 
				border-top: solid;
				border-left: double;
				border-right: dotted;
				border-bottom: groove;
			}
			
		</style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

7.文字属性

color:red; 文字颜色 #ffeeees
font-size:12px; 文字大小
font-weight:bolds 文字粗细(bold/normal)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示

8.文本属性

text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline（下划线）/overline（上划线）/line-through（中线）) underline/overline/line-through; 定义文本上的下划线/上划线/中划线
letter-spacing: 字间距

		<style>
			body{
				color: aqua;
				font-family: '微软雅黑';
				font-size: 15px;
				line-height: 30px;/* 行间距 */
				
				
				}
			.demo7{
				font-variant: all-petite-caps;/* 字母大写 */
				border:1px solid red ;
				text-align: center; /* 文本对齐 */
				}
				.p1{
				text-indent: 20px; /* 首行缩进 */
				font-weight: bold; /* 字体加粗 */
				}
				a{
					text-decoration: none; /* 去掉下划线 */
				}
		</style>
	</head>
	<body>
		<div class="demo7">
			demo7
		</div>
		<p class="p1">
			 该CSS教程系列涵盖了CSS的所有基础知识，包括选择器的概念
			 ，设置颜色和背景的方法，设置字体和文本的格式的方式，对超链接，
			 列表，表格等UI元素进行样式设置以及CSS框模型，等等。熟悉基础知识后，
			 您将进入下一个级别，该级别将介绍设置元素的尺寸和对齐方式使用图像精灵在网页上放置元素的方法以及相对和关联的概念
			 。绝对单位，视觉格式模型，显示和可见性，图层，伪类和元素，与媒体相关的样式表等。
			
			最后，您将探索CSS3中引入的一些高级功能，例如渐变颜色，阴影效果，2D和3D变换
			，alpha透明度，以及创建过渡和动画效果的方法，伸缩布局，滤镜效果，媒体概念查询等等。
			<a href="">点击了解</a>
		</p>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

在这里插入图片描述

9.列表

list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。
disc: 点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, …, 98, 99

list-style-position
inside
列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside
默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit 规定应该从父元素继承 list-style 属性的值

取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

10.超链接

a{text-decoration: none;} 去掉链接字体下划线
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */

<style>
		.demo8{
			list-style-type: number; /* 列表前序号形状 */
			list-style-position: inside;
			/* list-style-image: url();序号使用图片 */
			/* list-style: url() inside; 简写 */
			
		}
		.demo8 a{ /* 去掉链接字体下划线 */
			text-decoration: none;
		}
		.demo8 a:link{ /* 未访问链接颜色 */
			color: aquamarine;
		}
		.demo8 a:visited{ /* 已访问链接颜色 */
			color: black;
		}
		.demo8 a:hover{ /* 鼠标滑过链接颜色 */
			color: aliceblue;
		}
		.demo8 a:active{ /* 已选中链接颜色 */
			color: red;
		}
	</style>
</head>
<body>
	 <ul class="demo8">
	 	<li><a href="www.sogou.com">搜狗</a></li>
		<li><a href="www.sogou.com">搜狗</a></li>
		<li><a href="www.sogou.com">搜狗</a></li>
		<li><a href="www.sogou.com">搜狗</a></li>
		<li><a href="www.sogou.com">搜狗</a></li>
		<li><a href="百度.com">百度</a></li>
	 </ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/940551
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号