CSS总结

最新推荐文章于 2024-09-10 18:37:52 发布

HZS_Song

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量155

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_41696334/article/details/104425602

版权

CSS总结

css水平对齐

在css中可以使用多种属性来水平对齐元素。

对齐块元素

块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。
- <h1>
- <p>
- <div>
文本对齐

使用margin属性来水平对齐

可通过将左和右边距设置成"auto",来对齐块元素.
注意：使用margin:auto需要提前声明!DOCTYPE
把左和右外边距设置为auto，规定的是均等地分配可用的外边距，结果就是居中。
如果宽度是100%，则对齐没有效果。

使用 position属性进行左和右的对齐

对齐元素的方法之一是绝对定位：

	position:absolute;

绝对定位元素会被从正常流中删除，并且能够交叠元素。
使用position属性时需要提前声明!DOCTYPE，因为在IE8以及更早的版本会在右侧增加17px的外边距。

使用float属性来进行左和右对齐

	float:right;

使用float属性时需要提前声明!DOCTYPE,因为在IE8以及更早的版本会在右侧增加17px的外边距。

css尺寸

css尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性	描述
`height`	设置元素的高度
`width`	设置元素的宽度
`line-height`	设置行高
`max-height`	设置元素的最大高度
`min-height`	设置元素的最小高度
`max-width`	设置元素的最大宽度
`min-width`	设置元素的最小宽度

css分类

css分类允许你规定如何以及在何处显示元素。

属性	描述
`clear`	设置一个元素的侧面是否允许其他的浮动元素。
`cursor`	规定当指向某元素之上时显示的指针类型。
`display`	设置是否及如何显示元素。
`float`	定义元素在哪个方向浮动。
`position`	把元素放置到一个静态的，相对的，绝对的或固定的位置中。
`visibility`	设置元素是否可见或不可见

position

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
static：默认值。没有定位，元素出现在正常流中。
inherit：规定应该从父元素position属性的值。

css导航条

第一：导航栏 = 链接链表

<ul>
	<li><a href="#home">主页</a></li>
	<li><a href="#news">新闻</a></li>
	<li><a href="#picture">图片</a></li>
	<li><a href="#video">视频</a></li>
</ul>

👇运行结果👇

第二：去除圆点和外边距

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}

👇运行结果👇

第三：定义`<a>`元素的样式

a:link,a:visited{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#bebebe;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}

a:hover,a:active{
	background-color:#cc0000;
}

👇运行结果👇

垂直导航栏

一般必须要定义的属性
- display:block——把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
- width:60px——把块元素默认占用全部可用宽度。
请始终规定垂直导航栏中<a>元素的宽度。

水平导航栏

有两种创建水平导航栏的方法：行内类列表项或浮动列表项。
如果希望链接有相同的尺寸，就必须使用浮动方法。

行内列表项

去除<a>元素的display和width。
为<li>添加display:inline属性。使它们在一行中显示。

li{
	display:inline;
}

👇运行结果👇
在这里插入图片描述

浮动列表项

为了让所有链接拥有相等的宽度，我们可以浮动<li>元素并规定<a>元素打的宽度。

li{
	float:left;
}

👇运行结果👇

css图片库

<!DOCTYPE html>
<html>
	<head>
		<style>
			div.img{
  				margin:3px;
				border:1px solid #bebebe;
  				height:auto;
  				width:auto;
  				float:left;
  				text-align:center;
  			}

			div.desc{
  				text-align:center;
  				font-weight:normal;
  				width:150px;
  				font-size:12px;
  				margin:10px 5px 10px 5px;
  			}
		</style>
	</head>
	<body>
		<div class="img">
  			<img src="/i/lf.jpg" alt="Ballade" width="160" height="160">
  			<div class="desc">路飞</div>
		</div>

		<div class="img">
			<img src="/i/sl.jpg" alt="Ballade" width="160" height="160">
	  		<div class="desc">索隆</div>
		</div>

		<div class="img">
  			<img src="/i/nm.jpg" alt="Ballade" width="160" height="160">
  			<div class="desc">娜美</div>
		</div>

		<div class="img">
  			<img src="/i/sz.jpg" alt="Ballade" width="160" height="160">
	  		<div class="desc">山治</div>
		</div>
		
		<div class="img">
	    	<img src="/i/lb.jpg" alt="Ballade" width="160" height="160">  
    		<div class="desc">罗宾</div>
  		</div>
	</body>
</html>

👇运行结果👇
在这里插入图片描述

css图像透明度

大多数浏览器使用属性opacity来设置透明度。opacity属性能够设置的值从0.0到1.0。值越小，越透明。
IE8及更早的版本使用滤镜filter:alpha(opacity=x)。x能够取的值从0到100。值越小，越透明。

img{
	opacity:0.4;
	filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

动态的透明度-`hover`效果

当鼠标移动到图片上时图片不透明，移出后图片再次透明。

img{
	opacity:0.4;
	filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover{
	opacity:1.0;
	filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

css媒介类型

媒介类型允许你定义以何种媒介来提交文档。

@media规则

@media screen{
	p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print{
	p.test {font-family:times,serif; font-size:10px}
}

@media screen,print{
	p.test {font-weight:bold}
}

👆上面的例子中，样式告知浏览器在显示器行显示14像素的Verdana字体。但是假如页面需要被打印时，将采用10像素的times字体。
注意：font-weight被设置为粗体，是不论显示器还是纸媒介的情况下。

媒介类型	描述
`all`	用于所有的媒介设备
`aural`	用于语音和音频合成器
`braille`	用于盲人用点字法触觉回馈设备
`embossed`	用于分页的盲人用点字法打印机
`handheld`	用于小的手持的设备
`print`	用于打印机
`projection`	用于方案展示，比如幻灯片
`screen`	用于电脑显示器
`tty`	用于使用固定密度字母栅格的媒介，比如电传打字机和终端
`tv`	用于电视机类型的设备