引入css样式表
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
<head>
<style type="text/CSS">
img{
width:2px;
}
</style>
</head>
行内样式(内联样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式
<div style="width:1px;"></div>
外部样式表(外连式)
将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中(推荐)
<head>
<link type="text/css" href="CSS文件的路径" rel="stylesheet" />
</head>
css基本选择器
标签(元素)选择器
标签名{属性1:属性值1; 属性2:属性值2;}
元素名{属性1:属性值1; 属性2:属性值2; }
类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名。类名在标签中用class定义
.类名{属性1:属性值1; 属性2:属性值2; }
注意:
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名, 尽量使用英文字母来表示
4.浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
5.能良好区分JavaScript变量命名(JS变量命名是用“_”)
多类名选择器
我们可以给标签指定多个类名,从而达到更多的选择目的
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。
<div class="classname1 classname2"></div>
id选择器
同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class
<div id="id1" class="classname1 classname2"></div>
通配符选择器
通配符 选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素
* {
margin: 0;
padding: 0;
}