2-css

最新推荐文章于 2022-07-26 11:42:46 发布

我丶秦始皇丶打钱

最新推荐文章于 2022-07-26 11:42:46 发布

阅读量123

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_47520834/article/details/108903977

版权

javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

css

1.css引入方式

/* 
			 选择器{属性:属性值}
			 */
			
			/* 
			 引入方式1   style标签中写css代码             调试代码时使用
					2   link标签 href 引入文件的地址      调试完成 放在css文件中 通过link标签引入
					3   style属性直接编辑css样式          不建议使用
			 
			 style属性 优先级最高 style标签与link标签 优先级相同 后加载的把先加载的覆盖掉
			 */

2.css选择器

/* 
			 选择器：
			 基本选择器
				 元素选择器      标签名
				 class选择器     .class属性值  元素的class属性允许多值
				 id选择器        #id属性值   一般不用
			 
			 通过元素特征查找
			 id选择器>>class选择器>>元素选择器
			 辅助选择器
				并集选择器       选择器,选择器
				交集选择器       选择器选择器  先用元素筛选 再用其他选择器
				后代选择器       选择器 选择器
				子代选择器       选择器>选择器 比后代选择器跟严格
				属性选择器       [属性] [属性="属性值"]  通常和元素选择器 交集选择器 配合使用input[type="text"]
				全局选择器       * 选择所有元素
			 */




/* 			h1{                                -->元素选择器 
				color: red;                          
			}
	
			.mycls{                            -->class选择器
				color: lightsalmon
			}
			
			#myrow{                            --> id选择器
				color: blue;
			} */
/* 			h1,.mycls{                         -->并集选择器
				color: red;
			} */
/* 			p.mycls{                           -->交集选择器     p标签里有mycls属性值
				color: red;
			}	 */		
/* 			div p{                             -->后代选择器     p标签外边包了一层div(满足层级结构)
				color: red;
			} */
/* 			div>div>p{                         -->子代选择器 
				color: red;
			} */

/* 			input[type="text"]{                -->属性选择器
				color: red;
			}

/* 			*{                                -->全局选择器
				color: red;
			} */

/* 
			 伪类选择器
			 :hover    鼠标悬停
			 :active   鼠标点击
			 
			 cursor: pointer  出现小手
			 
			 */


例子:
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:hover{
				color: #ADD8E6;                 //鼠标悬停时 呈现的颜色    
			}
			
			a:active{
				color: #20B2AA;                  //鼠标点击时 呈现的颜色
			}
			
			.mydiv{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
			.mydiv:hover{
				background-color: #ADD8E6;
				cursor: pointer;                  //出现小手
			}
			.mydiv:active{
				background-color: lightsalmon;
			}
			
		</style>
	</head>
	<body>
		<a href="xxx">我的链接</a>
		<div class="mydiv">mydiv</div>
	</body>
</html>

3.常用样式属性

常用样式属性
颜色 color: #22FF44;
透明度 opacity: 1;/*透明度*/
字体大小 font-size: xx-large;
字体类型 font-family: "楷体";
字体粗细 font-weight: 800;
文字对齐方式 text-align: center;
文字描述 text-decoration:line-through;
宽 width: 1000px;/* px 像素 720p  1080p 2k 4k */
高 height: 1000px;
边框 border: 1px dashed lightseagreen;
边框圆角 border-radius: 50%;
背景图片 background: url(img/e0cd1d847573b096.jpg);
背景重复方式 background-repeat: repeat-x;
背景颜色 background-color: #20B2AA;
行高 line-height: 1000px; 通常用来做块中的文字水平居中


显示方式  display    block  块
					inline  行内
					inline-block 行内块(就是可以设置宽高)
					none    不可见

position 定位 
			static   默认文档流规则
			relative 相对定位 以本身位置进行偏移 不脱离文档流
			absolute 绝对定位 以窗体位置进行偏移 脱离文档流
			fixed    固定定位 以窗体位置进行便宜并固定在窗体上  脱离文档流

            top    上偏移
            left   左偏移
            z-index 有层叠时 设置层叠的先后顺序

例:
	/* 		.d1{
				background-color: #ADD8E6;
				position: absolute;
				top: 10px;
				left: 10px;
				z-index: 2;
			} */

盒子模型
padding  内部填充
margin   外边距
overflow  超过边界处理方式
        * hidden
// padding:40px 30px 20px 10px;   //四个方向  上 右 下 左    //两个值就是 上下 左右    //三个值就是上 左右 下
   padding-left: 10px;            //左边加了10px
   margin:10px auto;             //上下距离10px  左右自动调节          



float    漂浮元素
		* left
		* right

在这里插入图片描述

注意：盒子模型相关属性可以使用复合属性也可以单独设置

我丶秦始皇丶打钱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2-css

css1.css引入方式/* 选择器{属性:属性值} */ /* 引入方式1 style标签中写css代码调试代码时使用 2 link标签 href 引入文件的地址调试完成放在css文件中通过link标签引入 3 style属性直接编辑css样式不建议使用 style属性优先级最高 style标签与link标签优先级相同后加载的把先加载的覆盖掉
复制链接

扫一扫