小白学CSS《三》

最新推荐文章于 2024-09-17 22:59:44 发布

不喜欢热闹的孩子

最新推荐文章于 2024-09-17 22:59:44 发布

阅读量584

点赞数

分类专栏：自学前端的网工文章标签： css

本文链接：https://blog.csdn.net/weixin_43483442/article/details/107771207

版权

自学前端的网工专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小白学CSS《三》

一个标签内可以携带多个类名

指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。
举例：
<标签 class="值1 值2 值3 "></标签名>
优势：减少CSS代码量

一个标签内多个类名样式冲突，以CSS样式顺序为准。写在后面的生效。

背景样式属性

属性	值	描述使用
backgroud-color	red	设置背景颜色
backgroud-image	url(路径)	背景图像
backgroud-repeat	repeat、 repeat-x 、 repeat-y 、no- repeat	设置背景图像是否重复
backgroud-position	center center	背景图像开始位置
backgroud-attachment	scroll（图像滚动）、fixed（固定）	设置图像是否滚动
backgroud	url() no-repeat center center	简单写法，把几个属性写在一起

backgroud-color

作用： 用于给元素设置颜色。
tips: div 如果没有宽高和内容样式是不生效的。
示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景样式</title>
<style type="text/css">
	.div1{
		height: 300px;
		width: 300px;
		background-color: blue;
		margin-left: auto;
		margin-right: auto;
	}	
	
</style>
</head>

<body>
	<div class="div1"></div>
</body>
</html>

在这里插入图片描述

backgroud-image

作用： 用于设置背景图片，需要放在url()里面

		.div2{
		height: 300px;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		background-image: url("images/01.jpg");
	}

<div class="div2"></div>

backgroud-repeat

作用: 设置图片平铺
水平方向平铺
垂直方向平铺

不平铺

给div添加边框

boder 1px; soild:red;
border: 1px solid red;·

backgroud-position

作用: 用于设置背景图片的位置

backgroud-position：水平位置垂直位置

英文单词表示：
水平位置：left（左）、center（中）、right（右）
垂直位置：top（上）、center（中）、bottom(下)
background-position: center center;

使用固定值进行设置图像位置:
background-position: 100px 100px;

使用%表示:

background-position: 50% 50%;

三种方式可以混合使用。

backgroud-attachment

作用：
设置背景是否滚动

scroll：滚动
fixed：固定

backgroud

作用：
简写属性，可以同时设置多个属性，如：背景颜色、背景图片、是否平铺
顺序不定，值也不固定

backgroud: red url("./images/03.jpg") center center no-repeat;

案例设置

内填充
padding：内边距
padding-left:15px;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>案例设置</title>
	<style type="text/css">
		body{
			font-size: 12px;/*设置字体大小*/
			color: #f60;/*设置字体样式*/
		}
		.box{
			width: 400px;
			border: 1px solid #00f;
			margin-right: auto;
			margin-left: auto;
		}
		.box h2{
			height: 35px;
			line-height: 35px;
			color: gold;
		}
		.box ul li{
			list-style: none;
			height: 30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-image: url("./images/list.jpg");
			background-repeat: no-repeat;
			background-position: left center;
			padding-left: 20px;
		}
		
		/*		对超级链接美化	*/
		
		a:link,a:visited{
			color:#444;
			text-decoration: none;
		}
		a:hover{
			color:red;
		}
		
	</style>
</head>

<body>
	<div class="box">
		<h2>新闻列表</h2>
		<ul>
			<li><a href="#">AD是活动目录（Active Directory）简称。</a></li>
			<li><a href="#">AD是活动目录（Active Directory）简称。</a></li>
			<li><a href="#">AD是活动目录（Active Directory）简称。</a></li>
			<li><a href="#">AD是活动目录（Active Directory）简称。</a></li>
			<li><a href="#">AD是活动目录（Active Directory）简称。</a></li>
		</ul>
	</div>
	
</body>
</html>

在这里插入图片描述
tips:无序列表的图标都是通过背景图片实现的。

标准文档流

简析： 从左到右、从上到下称之标准文档流。

浮动

脱离标准文档流
float属性
left：左浮动
right:右浮动

浮动元素：

脱离标准文档流，不占用空间
遇到父元素的边框线停止浮动
遇到上一个浮动元素也会停止浮动
行内元素浮动，变成块元素

	<style type="text/css">
		.box{
			width: 600px;
			border: 1px solid #000;
			margin-left: auto;
			margin-right: auto;
		}
		.div1{
			width: 100px;
			height: 100px;
			background-color: #f00;
			float: right;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: blue;
			float: left;
		}
		.div3{
			width: 100px;
			height: 100px;
			background-color: yellow;
			float: left;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="div1"><img src="images/03.jpg" /></div>
		<div class="div2"><img src="images/04.jpg" /></div>
		<div class="div3"><img src="images/05.jpg" /></div>
	</div>

默认margin属性

body标签会有默认的的margin属性。
ul标签也有默认属性。

使用通用选择器清除默认HTML的内填充和外边距

*{
	margin:0px;
	padding:0px;
}

清除浮动属性

清除浮动

给浮动元素的父元素设置固定的高度
使用清除浮动的属性,clear ：left right both
使用overflow:hidden属性清除浮动

盒子模型

div标签
padding：内边距
margin：外边距
border：边框
width：宽度
height：高度

盒子的宽度=内容加两边填充加边框，一般不会手动设置高度。

padding:内填充

小属性：padding-top padding-right padding-left padding-buttom
简写属性
一个值：padding:20px ;表示上下左右都是20px。
两个值：padding:10px 20px;上下10px,左右20px 空格隔开
三个值：padding:10px 20px 30px ;上10，左右20，下30.
四个值：padding:10px 20px 30px 40px;上右下左。

margin：外边距。

与padding类似，分小属性与简写属性。
一个值：margin:20px ;表示上下左右都是20px。
两个值：margin:10px 20px;上下10px,左右20px 空格隔开
三个值：margin:10px 20px 30px ;上10，左右20，下30.
四个值：margin:10px 20px 30px 40px;上右下左。

margin塌陷现象

标准文档流中，竖直方向的margin不会叠加，而是取最大值。
横着方向没有塌陷现象
浮动元素没有塌陷现象

margin居中

当左外边距与右外边距都外auto时，就会居中显示。
实现水平居中一定要有固定宽度
块元素才能水平居中，行内元素不能居中
行内元素无法设置宽度
只有标准文档流才能使用水平居中。
margin用来实现盒子的水平居中
text-align用来设置文本的水平居中。

使用父元素的padding而不是子元素的margin

border

boder标签：边框
三要素： 粗细、线型、颜色
语法格式：
border:粗细线型颜色；
粗细和线型为必填，颜色不填默认为黑色。
边框的线型：实线、虚线
边框的四个方向
border-top
border-right
border-bottom
border-left

border:1px solid red;

可以设置不同方向的边框线不同颜色和粗细。

display

display显示属性，行内元素和块状元素的转换
元素的显示与隐藏。
inline 行内
block 块级
none 无

	span{
		width: 100px;
		height: 100px;
		background-color: antiquewhite;
		display: block;
	}

在这里插入图片描述
将行内元素display属性设置block，就会转换为块级元素
将块级元素display属性设置为inline,就会转换为行内元素。

将显示的元素隐藏。
display:none就会隐藏。
display:block显示 ,主要是JS使用。

设置超链接放在li上有出现小手的标志，将a标签转换为块级元素。鼠标放上显示背景图片。

不喜欢热闹的孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录