CSS层叠样式表

CSS层叠样式表

一、概述

html页面如果需要对元素进行大小、颜色、形状设定，需要使用css.

css（cascading style sheet）层叠样式表。

层叠：对于样式设置中，可能对同一个页面元素进行了多次样式设置，需要考虑优先级。

二、css属性

1、文字类：

font-size:    大小
font-weight:     加粗
color :    颜色
font-famliy:   字体
text-align :    位置设置
line-height:    文字在容器中垂直方向居中

2、宽高：

width:  宽度
height:  高度

3、边框：

border: 线宽 线型 颜色
border-top:    上
border-right:    右
border-bottom:    下
border-left:   左

4、位置：

margin: 0 auto      水平居中
margin-top:    距离上xx像素
margin-right:   距离右xx像素
margin-bottom:   下
margin-lift:    左

三、选择器

1、ID选择器：

id属性，整个页面唯一

1.页面元素必须设置id属性：
<input type="text" name="username" id="input2">
2.通过选择器设置属性：
#input2{
	font-size: 20px;
	color: red;
	text-align: right;
}

2、class选择器： class属性，多个元素可以相同，同一个元素可以有多个class值

1.先创建class属性
<input type="text" name="username" id="input1" class="c1" style="width:300px;height: 50px;background-color: blanchedalmond; border: 1px solid red;">
<input type="text" name="username" id="input2" class="c1 c2">
2.类选择器：
 .c1{
 	font-weight: 800;
 }
 .c2{
 	font-family: 仿宋;
 }

3、标签选择器： 直接通过标签名进行设置

1.选择需要设置属性的标签
<span>1</span><br>
<span>2</span><br>
<span>3</span><br>
<span>4</span><br>
<span>5</span><br>
2.标签选择器设置：
span{
	font-size: 46px;
}

四、css引入方式：

1、外部样式: 在页面所在项目中，通过link标签中的href属性引入写在css目录的.css扩展名的文件。

1.先创建一个css文件：
内容  选择器{属性:值;}
2.在html页面中，
<link href="../css/xxx.css" rel="stylesheet">

2、内部样式: 通过在head标签中使用style标签引入的方式,可以影响整个页面

<style>
	选择器{
		属性:值;
		...
	}
	选择器2{
		属性:值;
		...
	}
</style>

3、内联样式（行内样式）：在页面元素得标签中，通过style属性引入的样式

<input type="text" name="username" style="width:300px;">

优先级：就近原则