2020-12-06

最新推荐文章于 2024-09-05 21:00:39 发布

toShine…

最新推荐文章于 2024-09-05 21:00:39 发布

阅读量349

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_50910046/article/details/110727956

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初学CSS

1.CSS:层叠样式表
层叠:在一个标签之上可以设置多个样式表
样式表:标签在网页上的显示效果
作用:修饰html页面,设置html页面中的某些元素的样式,让html页面更好看
HTML还是主体,css依赖于html

css

HTML页面中嵌套使用的三种方式:
第一种方式:在标签内部使用style属性来设置元素的css样式,这种方法称为内联定义方式.
语法:<标签 style=“样式名:样式值; 样式名:样式值; 样式名:样式值; …”></标签>

第二种方式:在head标签中使用style块,这种方式被称为样式快方式.
	语法:

<head>
	<style>
		h1{
			margin:0px auto;/*居中*/
			border:1px blue solid;
		}
	</style>
</head>

第三种方式:链入外部样式表文件,这种方式最常用.(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)
	语法格式:
		<link type="text/css" rel="stylesheet" href="css文件路径" />
		这种方式容易维护,维护成本低

基本选择器

		1.标签选择器
		```html
		p(标签名){
			样式属性:值;
			样式属性:值;
		}
		```
		2.id选择器
			```html
		#(id名){
			样式属性:值;
			样式属性:值;
		}
		```
		3.类选择器
			```html
		.class名{
			样式属性:值;
			样式属性:值;
		}
		```

层次选择器

	1.子选择器(给body中的p标签设置字体颜色)
	body>p {
			color: #FA8072;
		}
	2.后代选择器(给body中的所有p标签设置字体颜色)
	body p {
			color: salmon;
		}
	3.相邻选择器(将avtion之后的第一个p标签的字体颜色设置颜色)
	 .avtion+p{
			color: #FA8072;
		}
	4.兄弟选择器(将avtion之后所有的p标签的字体颜色设置颜色)
	.avtion~p{
			color: #FA8072;
		}

属性选择器

属性选择器：通过标签上的属性的值来获取标签，并设置样式
基本选择器[属性名=属性值]{}

是否有某个属性:a[属性名]{样式:值;}
a[属性名] {
color: red;
}

获取a标签中href中以sites开始的标签
属性值以某个字符开始
a[属性^=‘字符串’]{
样式:值;
}

获取a标签中href中有sites的标签
属性值中有某个字符
a[属性名*=字符串]{
样式:值;
}

获取a标签中href中以jpg结尾的标签
a[href$=‘jpg’] {
color: red;
}

超链接伪类

超链接伪类：超链接访问过程的4状态，设置这四个状态的显示效果都不同
伪类样式的设置要按以下的顺序，不能改，如果顺序不对，a:visited 会将 a:hover或a:active的样式覆盖掉
a:link：未访问的超链接
a:visited：访问过的超链接
a:hover：超链接悬停
a:active：点击超链接未释放

列表样式

:通配符,给页面中所有的标签设置样式
- {
  font-size: 14px;
  }

ul {
		/* 去掉项目符号 */
		list-style-type: none;
	}


ul li {
		/* 项目符号由图片显示 */
		list-style-image: url(img/arrow-right.gif);
		/* li行高 */
		line-height: 25px;
		/* 不能去掉li中a标签的下划线 */
		/* text-decoration: none; */
	}

ul li a{
	/* 去掉li中a标签的下划线 */
	text-decoration: none;
	}

.div1{
		background-repeat: repeat-x;/*图片向x轴平铺*/
		background-repeat: repeat-y;/*图片向y轴平铺*/
		background-repeat: repeat/*图片向两个方向平铺*/
	}

盒子模型

盒子模型：将body中的元素看做一个盒子，盒子模型由四个部分组成：边框（border）、外边框（margin）、内边距（padding）、内容（content）。外边距：元素边框到边框的距离；内边距：边框到内容的距离。

#div1 {
		border: 1px solid salmon;
		/* margin-top: 20px;
		margin-left: 20px; */
		/* div默认占一行，所以对于div来说设置margin-righ没有意义 */
		/* margin-right: 10px; */
		/* 4个方向的外边距都是为20px */
		/* margin: 20px; */
		/* 第一个值为：上下边距   第二值为：左右边距 */
		/* margin: 10px 20px; */
		padding-top: 50px;
		margin-top: 10px;
		margin: 0px auto;/*居中*/
		margin:1px 2px 3px 4px;/* 上 右 下 左 */
	}

display

.kuai {
		width: 100px;
		/* block：将行级标签改为块级标签 */
		display: block;
	}
#hiddenThis{
			/* display: none; 隐藏标签 */
			display: none;
			}

float浮动

#father {
		border: 1px saddlebrown solid;
			/* 方式一：解决父级元素塌陷 */
			/* height: 200px; */
		}
.layer01 {
	border: 1px seagreen solid;
	/* 左浮动 */
	/* float: left; */
	/* float: right; 右浮动 */
}
/* 方式二：清空标签左右两边的浮动效果 */
.clear {
	clear: both;
}

定位

相对定位

#first {
			margin: 0px;
			border: salmon 1px dashed;
			background-color: sandybrown;
			/* relative:相对定位，相对当前标签以前的位置对标签重新定位 */
			position: relative;
			/* top：上边界的距离 */
			top: -10px;
			/* top：左边界的距离 */
			left: 30px;
		}

绝对定位

	#third {
				border: 1px blue dashed;
				background-color: #00FFFF;
				margin: 0px;
				/* absolute:绝对定位，以第一个有进行定位发父级节点，进行定位，如果所有的父级都没有进行定位，那么就以浏览器窗口的原点位置给元素定位 */
				position: absolute;
				/* top: 0px;
				left: 0px; */
				right: 10px;
				top: 20px;
			}

z-index

<style type="text/css">
			img {
				position: relative;
				/* 标签的层次 */
				z-index: 0;				
			}

			span {
				display: block;
				line-height: 25px;
				text-align: center;
				width: 331px;
				background-color: #C0C0C0;
				position: absolute;
				top: 109px;
				z-index: 1;
				opacity: 0.5;	/* 透明度 */
				color: blue;				
			}
		</style>

toShine…

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-06

初学CSS1.CSS:层叠样式表层叠:在一个标签之上可以设置多个样式表样式表:标签在网页上的显示效果作用:修饰html页面,设置html页面中的某些元素的样式,让html页面更好看HTML还是主体,css依赖于htmlcssHTML页面中嵌套使用的三种方式:第一种方式:在标签内部使用style属性来设置元素的css样式,这种方法称为内联定义方式.语法:<标签 style=“样式名:样式值; 样式名:样式值; 样式名:样式值; …”></标签>第二种方式:在head
复制链接

扫一扫

专栏目录