前端基础课程——第二讲（CSS）

Css：层叠样式表，用于定义网页标记样式（外观特征）’

网页的标记一般都是具有默认效果样式，开发者一般不会记忆标记准确的样式值，但是在实际开发一般对于网页中所有标记都应该做到能准确控制标记显示效果，这就需要通过css来实现。

使用css有3种方式：
1.内联样式（行内样式）：在需要使用css的标记中通过style属性来修改定义标记的样式
语法：<标记名 style=”样式属性:值; 样式属性:值; ………样式属性:值;”>
补充样式属性：
color：设置字体颜色，值为颜色关键字，如red，或#开头后面跟上6位的16进制值，如： #cccccc，也可以使用RGB值
font-size：设置字体大小，值为像素值，如30px
2.内部样式：在< head>标记中编写< style>标记，在style标记中定义样式选择器
语法：

		<style>
			选择器名{
				样式属性:值;
				......
				样式属性:值;
			}
		</style>

选择器：是用于定义某个或某些标记的样式组

常用的选择器：标签选择器（基本选择器），ID选择器，类选择器

标签选择器：
语法特点：选择器名就是标记名
标记名{
样式属性:值;
…
样式属性:值;
}
使用特点：在样式中定义了标签选择器，那么在网页中所有属于该选择器名的标签都会 具有选择器中的样式属性
ID选择器：
语法特点：选择器名以#开头，后面跟上自定义的名称

			#选择器名{
				样式属性:值;
				......
				样式属性:值;
			}	

用特点：在需要使用该选择器的样式属性的标记中，通过id属性调用选择器，网页中一个id选择器只能被唯一的标记调用
使用语法：<标记名 id=”选择器名”>

#one{
	color:red;
}

<h3 id="one">标题2</h3>

类选择器：
语法特点：选择器名以.开头，后面跟上自定义的名称
.选择器名{
样式属性:值;
…
样式属性:值;
}
使用特点：在需要使用该选择器的样式属性的标记中，通过class属性调用选择器，网 页中一个类选择器可以被多个标记同时调用
使用语法：<标记名 class=”选择器名”>

.two{
	font-size:30px;
}

<h3 id="one" class="two">标题2</h3>
<h3 class="two">标题3</h3>

3.外部样式:将所有样式选择器都定义在一个css文件（.css为扩展名的文件）中，在需要使用样式的网页中的，通过标记引用文件，最终达到调用css的目的
语法：

<link rel="stylesheet" type="text/css" href="css文件地址" />

总结：在实际开发中一般都是使用外部样式

常用的样式属性：
文本样式：
text-align:设置文本水平对齐方式，值：left，right，center
text-decoration:设置文本下划线，值为 none表示取消下划线，一般用于a标记
字体样式：
font-size:设置大小，值为像素值
font-size: 16px;
font-family：设置字体类型，值为所有常见字体类型，一般开发中都是使用”微软雅黑”
font-family: “微软雅黑”;
color：设置字体颜色，值为颜色值
color: red; color:#cccccc; color: rgb(160,19,19); color: rgba(160,19,19,0到1之间的小数);
line-height：设置字体行高，值为像素，一般用于增加文本一行所占的高度，实际开发中常 用于文本的垂直对齐，如果行高等于文本所在标记的高度，那么文本垂直是对 齐的
font-weight:设置字体粗细，值为100，200,300，……900之间的值
font-style: italic;：设置字体倾斜
列表样式：
list-style-type:none;取消列表默认符号和序号
背景样式：
background-color:设置背景颜色，值颜色值
background-image:设置背景图像，值为：url(“图片地址”)

background-image: url(“timg.jpg”);
background-repeat:设置背景平铺，默认是水平和垂直平铺，值：no-repeat（不平铺，只显 示一张图），repeat-x(水平平铺)，repeat-y(垂直平铺)
background-position: 设置背景定位，水平方向（正像素值表示向右移动，负像素值表示向 左移动），垂直方向（正像素值表示向下移动，负像素值表示向上移动）：
语法：background-position: 水平像素值 垂直像素值;

其他常用样式属性：
Width：设置标签宽度样式，值为像素值
Height：设置标签高度样式，值为像素值

特殊样式选择器：伪类选择器
选择器名:伪类名{

}
每个伪类都表示一种意义。

选择器名:hover{//表示鼠标悬浮在标记上时该选择器才能生效
样式属性：值；
……….
}