css(cascading style sheets)美化样式
css通常称为css样式表或层叠样式表(级联样式表),主要用于设置HTML中的文本内容(字体、大小、对齐方式)、
图片的外形(宽高、边距、边框样式等)以及版面的布局等外观的显示样式。
css以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
Css样式表的书写位置:
内部样式表:
内嵌式的样式表是将代码集中写在HTML中的head头部文件中,并且用style标签定义,
语法如下:
<head> <style type=”text/css”> (选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}) Eg:h4{ ”color:pink;“ } </style> </head>
语法:style标签一般放在title标签之后,也可以把它放在html文档中的任何一个位置。
<style type=”text/css”> 在html5中可以省略
选择器
(就是选择标签的,便于快捷的利用CSS)要想将CSS样式应用与特定的HTML元素,首先需要找到该目标元素,在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)
标签选择器:(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中的某一类标签指定统一的CSS样式。语法如下:
标签名{属性1:属性值1;属性2:属性值2;}
或
元素名{属性1:属性值1;属性2:属性值2;}
标签选择器最大的优点是能快速为页面中的同类型标签统一样式,同时这也是它的缺点,不能设计差异化样式。
标签选择器可以吧某一类标签全部选择出来:eg:div、span
类选择器
类选择器使用“ . “(英文字符)进行标识,后边紧跟类名,语法如下:
.类名{属性1:属性值1;属性2:属性值2;}
标签调用的时候 class=”类名“
类选择器最大的优点就是:可以为元素对象定义相同或单独的样式。
小技巧:
1:长名称或词组可以使用中横线来为选择器命名。
2:不建议使用“-“下划线来命名CSS选择器
(-tipd的选择器命名对IE6无效、良好区分js命名(js命名用“-“))
3:不要纯数学、中文等命名,尽量使用英文字母来表示
eg:
<head> <meta charset="UTF-8"> <title>Document</title> <style> .suibian{ color: pink; } </style> </head> <body> <div>类选择器</div> <div>类选择器</div> <div class="suibian ">类选择器</div> </body>
外部样式表(外链式):
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中。
基本语法如下:
<head> <link href=”CSS文件路径” rel=”stylesheet“/> </head>
Link标签是一个单标签
该语法中,link标签需放在head头部标签中,必须指定link标签的三个属性:
1:href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
2:type:定义所链接文档的类型,在这里需要指定为“text、CSS“,表示链接的外部文件为CSS样式表:
3:rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet“,表示被链接的文档时一个样式文件。
行内式(内联样式):(不常用)
是通过标签的style属性来设置元素的样式,语法如下:
<标签名 style=”属性1:属性值1;属性2:属性值2;”>
语法中style是标签的属性,实际上任何HTML都有style属性,用来设置行内式,其中属性和值得书写规范与css样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。
三种样式表的总结:
常用的默认文本颜色:
style=”color:gray;“ 灰色
style=”color:#ccc;“ 淡灰色
设置文本大小:
font-size