HQ-day17 CSS样式表基础①
今天主要学习了CSS【层叠样式表】的基本概念,分类,选择器,属性这几块内容。接下来将逐个总结归纳如下:
◆样式表分类:
①内联样式表:即直接在标签里定义设置,控制精确,但可重复利用性差。
例:
1 <p style="font-size:14px;">内联样式表</p>
②内嵌样式表:必须写在head标签内,类似于C#中的函数,只对于在head内编写的标签起作用。
例:
<style type="text/css"> p //只对p标签起作用 { 样式; } </style>
③外部样式表:新建一个CSS文件,在里面写好所需要的样式,然后在HTML里引用。
例:
<style type="text/css"> * { margin:0px; //外边距 padding:0px //内边距} .qq //以“.”开头为class选择器 { width:35px; color:#F30} #kk //以“#”开头为ID选择器 { font-size:18px; height:25px} a:link { text-decoration:none; color:#000} a:visited { text-decoration:none; color:#639} a:hover { text-decoration:underline; color: #F00 } a:active { text-decoration:underline; color:#F90} </style>
以上代码中,第一部分是去除一些标签的默认边距,一般在写CSS样式表代码时都会先去除;
第二部分是class选择器和ID选择器,还有复合选择器,用“,”隔开;
第三部分是超链接样式,记忆方式为l,v,h,a;link为未访问过的一般链接;visited是访问过的一般链接;hover是鼠标悬浮在链接上的形式;active是点击访问链接时的形式。
◆样式属性:
①背景与前景:
background;
②字体:
text;
font;
③列表与方块:
list;