学习大纲学会运用CSS选取器熟记CSS样式和外观属性熟悉把握CSS各样选取器熟悉把握CSS各样选取器熟悉把握CSS三种表示模式熟悉把握CSS背景属性熟悉把握CSS三大特性熟悉把握CSS盒子模型熟悉把握CSS浮动10.熟悉把握CSS定位 11.熟悉把握CSS高级技巧强化CSS
CSS的发展历程
从HTML被发明起始,样式就以各样形式存在。区别的浏览器结合它们各自的样式语言为用户供给页面效果的掌控。最初的HTML只包括很少的表示属性。
随着HTML的成长,为了满足页面设计者的需求,HTML添加了非常多表示功能。然则随着这些功能的增多,HTML变的越来越杂乱,况且HTML页面亦越来越臃肿。于是CSS便诞生了。
CSS初识
CSS(Cascading Style Sheets) 美化样式
CSS一般叫作为CSS样式表或层叠样式表(级联样式表),重点用于设置HTML页面中的文本内容(字体、体积、对齐方式等)、照片的外形(宽高、边框样式、边距等)以及版面的布局等外观表示样式。
CSS以HTML为基本,供给了丰富的功能,如字体、颜色、背景的掌控及整体排版等,况且还能够针对区别的浏览器设置区别的样式。
引入CSS样式表(书写位置)
CSS能够写到那个位置? 是不是必定写到html文件里面呢?
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">
选取器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中,style标签通常位置于head标签中title标签之后,亦能够把他放在HTML文档的任何地区。
type="text/CSS" 在html5中能够省略, 写上亦比较符合规范, 因此这个地区能够写亦能够省略。
行内式(内联样式)
内联样式,又有人叫作行内样式、行间样式、内嵌样式。是经过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性,实质上任何HTML标签都持有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起功效。
外边样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外边样式表文件中,经过link标签将外边样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
重视: link 是个单标签哦!!!
该语法中,link标签必须放在head头部标签中,并且必要指定link标签的三个属性,详细如下:
href:定义所链接外边样式表文件的URL,能够是相对路径,亦能够是绝对路径。
type:定义所链接文档的类型,在这儿必须指定为“text/CSS”,暗示链接的外边文件为CSS样式表。 rel:定义当前文档与被链接文档之间的关系,在这儿必须指定为“stylesheet”,暗示被链接的文档是一个样式表文件。
三种样式表总结(位置)
|