css

最新推荐文章于 2024-07-18 14:29:38 发布

Donner_

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量148

点赞数

分类专栏： html学习文章标签： css

本文链接：https://blog.csdn.net/weixin_47700237/article/details/107025976

版权

html学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
当存在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: "这是后";
}

在这里插入图片描述

Donner_

关注

0
点赞
踩
0

收藏

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

## **css**1. 引入css **一. 行间样式** <div style="width:***;height:**;background-color:*;..."></div> **二.页面级css** <head> <style type="text/css"> div{ width:***; height:**; background-...
复制链接

扫一扫