css

css

1. 引入css

  **一. 行间样式**
 <div style="width:***;height:**;background-color:*;..."></div> 
	**二.页面级css**
	<head>
		<style type="text/css">
			div{
				width:***;
				height:**;
				background-color:*;
			}
		</style>
	</head>
	<div></div>

	
	**三.外部css文件**
		首先创建一个css文件  ***.css
			<head>
				<link rel="stylesheet" type="text/css" href="***.css"> 
			</head>

2. 选择器

一. id选择器
		<div id="a"></div>
		css:
		#a{.....}
		id--一个元素只能有一个id 一个id只能表示一个  一对一

二.class
		<div class="a"></div>
		css:
		.a{.....}
		多个元素可使用同一个  一对多
		<div class="demo demo1">123</div>
		css:
		.demo{
				background:yellow;
		}
		.demo1{
				color:red;
		}

在这里插入图片描述
三。标签选择器

<div></div>
		css:
		div{...}
		
	四。通配符选择器
			*{....}  全局标签
	
	五。属性选择器
		<div id="only" class="demo"></div>
		css:
				[id]{}有id属性都可以改变
				[id="only"] 只改变only


	**!important  >行间样式高于id
	id优先级高于class*
	*class优先级高于标签选择器高于通配符选择器*

	css权重
	!important               Infinity
	行间样试                   1000    256进制
	id                                100
	class | 属性 | 伪类        10
	标签|伪元素                   1
	通配符                           0

	父子选择器
		<div>
			<span>123</span>
		</div>
		<span>123</span>
		css:
			div span{
			  background-color:red;
			}

在这里插入图片描述
六。直接子元素选择器

<div>
  				<em>1</em>
  				<strong>
  						<em>2</em>
  				</strong>
  		</div>
 
	css:
	div >em{
		background-color:green;
	}

在这里插入图片描述
七。并列选择器

   <div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>
    css:
    div.demo{
    	background-color:red;
    }

在这里插入图片描述
八。分组选择器

<en>1</em>
<strong>2</strong>
<span>3</span>
css:
	em,
	strong,
	span{
		background-color:red;
	}

3. css代码 (http://css.doyoe.com/ 可参考)

**字体**
	font-size:**px;调整字体大小 默认16px
	font-weight:bold;加粗 lighter normal bold bolder 100  200 ---900  只有整百
	font-stytle:italic;斜体
	font-family:arial;字体名称
**颜色**
	color:***;
**边框**
	border::10px solid black; 复合属性
	/*border: border-width border-style border-color;*/
	border-width:;粗细
	border-style:solid(实线) dotted(点状) dashed(虚线);样式
	border-left:10px solid black; 
	border-left/top/right/bottom-color/-style:;可修改任意一边的颜色/样式
	**文本**
	text-align:left/right/center;对齐方式
	line-heght:***px; 单行文本高度 若与div高度相同则是单行文本垂直居中。 
	text-indent:2em;首行缩进2字符   
	text-decoration:line-through/none/underline/overline; 中划线/无/下/上
	cursor:pointer/help;  光标变小手/?(http://css.doyoe.com/properties/user-interface/cursor.htm)更多
	伪类选择器
	a:hover{.....}
	
*{
	padding:0;内边距
	margin:0;外边距
}
	盒子模型:
	盒子的三大部分:
	盒子壁:border
	内边距:padding
	盒子内容:width+height
	margin + border + padding + (content = width + height)

在这里插入图片描述
padding:20px 30px 40px 50px; 上右下左 顺时针
padding:20px 30px 40px; 上 右左 下
padding:20px 30px ; 上下 右左
position:absolute/relative/fixed;
left:…px;
right:…px;
absolute 脱离原来位置定位 最近的有定位的父级进行定位,如果没有,那么相对文档进行定位
relative 保留原来位置进行定位 相对自己原来的位置进行定位
fixed 固定定位

将盒子居中显示
 <div></div>
 css:
 *{
    margin: 0;
    padding: 0;
}
div{
    position:absolute/fixed; 只在当前界面/一直都是居中显示
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    background-color: aqua;
    margin-top: -50px;
    margin-left: -50px;
}

absolute:
在这里插入图片描述
fixed:
在这里插入图片描述

制作一个居中的五环图:
<div class="plat">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
    </div>
		css:
		*{
    margin: 0;
    padding: 0;
}

.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 10 solid black;
    border-radius: 50%;  /*圆角*/
}
.circle1{
    border-color: red;
    left: 0;
    top: 0;
}
.circle2{
    border-color:green;
    left: 130px;
    top: 0px;
    z-index: 3; /*使绿色圆圈再蓝紫之上*/
}
.circle3{
    border-color:yellow;
    left: 260px;
    top: 0px;
}
.circle4{
    border-color:blue;
    left: 65px;
    top: 70px;
}
.circle5{
    border-color:purple;
    left: 195px;
    top: 70px;
}
.plat{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -93px;
    border: 5px solid black;
    height: 186px;
    width: 380px;
    }

效果图:
在这里插入图片描述

两栏布局
 <div class="right"></div>
    <div class="left"></div>
css:
*{
    margin: 0;
    padding: 0;
}
.right{
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: black;
    opacity: 0.5;  透明度
}
.left{
	/*margin-right: 100px;*/
    height: 100px;
    background-color: aqua;
}

当不存在margin-right: 100px;时:
在这里插入图片描述
有opacity: 0.5;有opacity: 0.5;
当存在margin-right: 100px;时:
在这里插入图片描述
bug
一。 父子嵌套元素垂直方向的margin结合到一起,会取其中最大值,且父子一起运动。
解决办法:
1.给父亲加一条线:border-top:1px solid red;(不合适一适用)
2.bfc
如何触发一个盒子的bfc;
display:inline-block;
float:left/right;
overflow:hidden;溢出部分隐藏

	浮动模型:
   	float:right/left;
   	<div class="demo">
        <div class="demo1">1</div>
        <div class="demo1">2</div>
        <div class="demo1">3</div>
    </div>
    css:
    *{
    margin: 0;
    padding: 0;
}
.demo{
    border: 1px solid black;
    height: 300px;
    width: 300px;
}
.demo1{
    float: left;
    height: 100px;
    width: 100px;
    background-color: black;
    color: white;
}

无float效果:
在这里插入图片描述
有float:left;效果:
在这里插入图片描述
clear:both; 清楚左右两边的浮动流

溢出容器,要打点展示
1.单行文本

	<p>洛斯阿拉莫斯国家实验室(Los Alamos National Laboratory)的理论生物学家贝特·科伯及其同事在报告中写道:</p>
	css:
	p{
    width: 300px;
    height: 20px;
    line-height: 20px;
    border: 1px solid black;
    
    white-space: nowrap; 到达容器边缘不换行
    overflow: hidden; 溢出部分隐藏
    text-overflow: ellipsis;溢出部分打点显示
}

无text-overflow: ellipsis;:
在这里插入图片描述
有text-overflow: ellipsis;:
在这里插入图片描述
2.多行文本
只做截断不做打点注意高度即可
在这里插入图片描述
加overflow:hidden;
在这里插入图片描述
背景图片:
background-image: url(…);
background-size:100px 100px ;
background-repeat: no-repeat;
background-position: left top;

文字环绕背景
<img src="" class="img"></img>
css:
.img{
    float: left;
    width: 100px;
}

在这里插入图片描述
伪元素
伪元素存在于任意元素中
在伪元素中可以输入任何css代码

 <span>
        这是span
    </span>

css:
span::before{
    content: "这是前";
}
span::after{
    content: "这是后";
}

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值