CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

满山的猴子我毛最多

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/qq_43467548/article/details/101065982

版权

1.引入方式：三种
内联：在标签的style属性里面写样式代码弊端不能复用，优先级最高
内部：在head标签里面添加style标签，好处可以当前页面复用，弊端不能多
页面复用
外部：在单独css文件中写样式代码，在head标签内部通过link标签引入css文件
好处可以多页面复用
2.选择器
-标签选择器：标签名{}
-id选择器：#id{}
-类选择器：.class{}
-属性选择器：基础选择器[属性名=‘属性值’]
-任意元素选择器：*{}
-后代选择器 div span a{}
-分组选择器 div,#id,.class{}
-伪类选择器：未访问a:link 访问过：a:visited 悬停：a:hover点击：a:active
4.颜色赋值 #00ff00 #0f0 rgb(0,255,0),rgba(0,255,0,0-1)颜色单词
5.背景图片 background-color/image/sizerepera/position
6盒子模型：宽高，外边距，内边距，边框
-宽高：块级元素可以设置宽高，行内元素宽高由内容决定

外边距：元素边框距离上级元素或相邻兄弟元素边框的距离
-magin-left/right/top/bottom ,magin:10px; margin:10px 20px;
margin: 0 auto;margin:10px 20px 30px 40px;
-行内元素上下不生效左右相邻元素外边距相加上下相邻元素外边距取最大值
-当元素的上边缘和上级元素的上边缘重叠时元素添加上外边距时会出现粘连的
问题，上级元素加 overflow: hidden;/解决粘连问题/
##########边框
border: 1px solid red;
border-top/bottom/left/right:1px solid red;
-块级元素边框全部生效，都会影响元素所占范围，行内元素边框全部生效，
但是左右影响所占宽度，上下不影响所占高度。

-border-radius 控制元素的圆角，值越大越圆

#####内边距
什么是内边距：元素边框距内容的距离称为内边距
如果移动元素的文本内容使用内边距（内边距会改变元素的宽高），如果移动
元素内的子元素使用外边距，给子元素添加外边距移动，因为这样不会影响元素
的宽高。

-块级元素内边距全部生效，会影响所占宽高
-行内元素内边距全部生效，会影响宽度不会影响高度
###文本相关属性

div{
	width: 200px;
	height: 100px;
	border: 1px solid red;
	/*文本水平对齐  left/right/center */
	text-align: center;
	/*文本修饰  上划线overline 下划线 underline 删除线 line-through  none */
	text-decoration:line-through;
	/*文本颜色  */
	color: green;
	/* 文本阴影 
	1.阴影颜色2.x方向偏移值3.y方向偏移值
	4.模糊度 值越来越清晰
	*/
	text-shadow: blue 5px 5x 10px;
	/*行高 用于让文本在元素中垂直居中，值为元素的高度*/
	line-height: 10px;
	
}
a{
	/*去掉超链接自带的下划线*/
	text-decoration: none;
}

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>儿子</title>
<style type="text/css">
#left_div{
background-color: #E8E8E8;
width: 611px;
height: 376px;
background-image: url("../imgs/c.png");
background-repeat: no-repeat;
background-size: 318px 319px;
background-position: 100% 50%;
	overflow: hidden;
float: left;
}
#big{
	width: 1000px;
/* 	background-color: green; */
	margin: 0 auto;/*元素水平居中*/

}
#left_div>div{
	width: 255px;
/* 	background-color: green; */
	margin: 68px 0 0 36px;
	
	
	
}
#right_div{
	width: 375px;
	height: 376px;
	background-color: #e8e8e8;
	float: right;
	/*右侧浮动*/
	background-image: url("../imgs/c.png");
background-repeat: no-repeat;
background-size: 292px 232px;
background-position: 100% 50%;
	overflow: hidden;
}

.p1{
	font-size: 32px;
	color: #333;
	/*段落标签p自带上下外边距  */
	margin-bottom: 10px;
}
.p2{
	font-size: 12px;
	color: #666;
	
}
.p3{
	font-size: 24px;
	color: #0AA1ED;
	font-weight: bold;
}
input{
	width: 132px;
	height: 40px;
	background-color: #0AA1ED;
	font-size: 20px;
	color: white;
	border: 0;
	border-radius: 5px;
}
#right_div>div{
	margin: 39px 0 0 25px;
	
}
</style>
</head>
<body>
<div id="big">
<div id="left_div">
<div >
	<p class="p1"> 貂蝉</p>
	<p class="p2"> 天下第一美女</p>
	<p class="p3">￥48000</p>
	<input type="button" value="查看详情">
</div>
</div>
<div id="right_div">
<div >
	<p class="p1"> 貂蝉</p>
	<p class="p2"> 天下第一美女</p>
	<p class="p3">￥48000</p>
	<input type="button" value="查看详情">
</div>
</div>
</div>	
</body>
</html>

##############overflow溢出设置
/* 超出范围：隐藏 hidden 显示： visible(默认)
超出范围滚动显示scroll */
####显示方式display
-block:块级元素的默认值，独占一行
-inline:行内元素的默认值，共占一行
–inline-block:行内块，共占一行并且可以修改宽高

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div,span{
	border: 1px solid red;
}
div{
	display: inline;
}
span{
	display: inline-block;
	width: 100px;
	height: 100px;
}
a{
	display: inline-block;
	width: 132px;
	height: 40px;
	background-color: #0aa1ed;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	border-radius: 3px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">查看百度</a>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>