css基础

最新推荐文章于 2024-03-30 23:50:52 发布

Moliay

最新推荐文章于 2024-03-30 23:50:52 发布

阅读量152

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Moliay/article/details/88098181

版权

前端专栏收录该内容

8 篇文章

订阅专栏

笔记基础

*css 层叠样式表
       ①层叠一层又一层
       ②样式表多个的属性和属性值
   作用：将网页内容和显示样式进行分离，提高了显示效果
*css与html的四种结合方式
   (1)在每个html标签上面都有一个属性值style，以此把css和html结合在一起
       <div style="backgroud-color:pink;color:yellow;">
   (2)使用html的一个标签实现<style>标签，写在head里面
       <style type="text/css">
           //css代码
       </style>
       eg：
           <style type="text/css">
               div{
                   backgroud-color:blue;
                   color:red;
               }
            </style>
   (3)使用头标签link，引入外部css文件(一般情况下用这种方式)
       ①创建css文件
       ②<link rel="stylesheet" type="text/css" href="css文件的路径"/>
   (4)在style标签里，使用语句： @import url(css文件的路径)；(一般情况下不用这种方法，因为在一些浏览器上受兼容性的限制，没有效果 )
       ①创建css文件
       ②<style type="text/css">
           @import url(css文件的路径);
       </style>
*1.css样式，在一般情况下优先级：由上到下，由内到外，优先级由低到高
2.css选择器(三个基本选择器)
   基本格式：
           选择器名称{
               属性：属性值；
               属性：属性值；
               ……
           }
   (1)标签选择器：使用标签名作为选择器的名称
       eg：div{
               backgroud-color:gray;
               color:white;
           }
   (2)class选择器
       每个html标签都有一个属性class
           eg：
               <p class="example">model</p>

               .example{
                   backgroud-color:orange;
               }
   (3)id选择器
       每个html标签都有一个属性id
           eg：
               <p id="example">model</p>

               #example{
                   backgroud-color:orange;
               }
3.选择器的优先级 style > id选择器 > class选择器 > 标签选择器
4.css的扩展选择器
   (1)关联选择器
       eg：
           ①<div><p>example</div></p>
           ②需求：设置div标签里面的p标签的样式，嵌套标签里面的样式
           ③div,p{
               color：blue；
           }
   (2)组合选择器
       eg：
           ①<div>example</div>
           <p>model</p>
           ②需求：把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
           ③div,p{
               color:pink;
           }
   (3)伪元素选择器：css里面提供了一些已定义好的样式，可以拿过来直接使用
       eg:
           <style type="text/css">
               a:link{
                   color:pink;
               }
               a:hover{
                   color:yellow;
               }
               a:active{
                   color:blue;
               }
               a:visited{
                   color:green;
               }
           </style>
5.css的盒子模型
   (1)边框属性有：①px(粗细) ②dashed/solid(虚线/实线) ③颜色
           border统一设置
           也可以分别设置
           border-top 上边框
           border-bottom 下边框
           border-left 左边框
           border-right 右边框
   (2)内边距属性有：px(远近)
           padding 统一设置
           也可以分别设置上下左右四个内边距
           padding-top
           ……
   (3)外边距属性有：px(远近)
           margin 统一设置
           也可以分别设置上下左右四个内边距
           margin-top
           ……
*css的布局之漂浮
   float 属性值：
               none：不漂浮默认
               left：文本流向对象的右边
               right：文本流向对象的左边
*css的布局之定位
   position 属性值：
                   static：默认值无特殊定位
                   absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其进行绝对定位
                   relative：对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

*创建圆角 border-radius
               属性 length定义弯道的形状单位px
*添加阴影效果 box-shadow
           属性
               水平阴影的位置 h-shadow 单位px ！！！允许负值（必须有这个属性）
               垂直阴影的位置 v-shadow 单位px ！！！允许负值（必须有这个属性）
               模糊距离        blur     单位px （可选项）
               阴影的大小       spread   （可选项）
               阴影的颜色       color    （可选项）
               从外层的阴影开始时改变阴影内侧阴影 inset（可选项）
*用图片创建边框 border-image

简单应用
1.(1)效果图

(2)源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>有缘网注册</title>
		<link rel="icon" href="fightingNow.jfif" type="image/x-icon"/>
		
		<style type="text/css">			
			#radius{
				align:center;
				text-align:center;
				border:1px solid #191970;
				color:#DC143C;
				background:#008080;
				border-radius:20px;	
				width:500px;
				height:50px;
				box-shadow:10px 10px 5px #808080;
			}	
			h1{
				text-shadow:8px 8px 8px #B22222;
				text-align:left;
				margin-left:200px;
			}
			#trans{
				align:center;
				text-align:center;
				border:1px solid #191970;
				color:#DC143C;
				background:#008080;
				border-radius:20px;	
				width:100px;
				height:100px;
				box-shadow:10px 10px 5px #808080;				
			}
			div#trans:hover{
				transform:rotateX(180deg);
				background:#FF69B4;
				color:#BA55D3;
			}
		</style>
	</head>
	<body>
		<h1>想脱单吗！</h1>
		<div id="radius">
			立即注册叭
		</div>	
		<br/>
		<div id="trans">
			真的不来吗？我要翻脸啦！
		</div>
	</body>
</html>