CSS外部样式表代码引用

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS-外部样式表

在href属性里给出的样式表地址必须插入HTML代码的头部（head）既标签（head）（/head）之间样式表如：body {background-color:#00ff00;}文件保存是格式必须为。CSS。

HTML外部样式引用范例如下：

天下第一

Background-color CSS属性用于指定body既整个页面的背景色，也可为其他包含标题或文本的的元素单独使用背景色。

例1：让所有标题显示为红色，而这些标题采用的都是h1元素，可编码为：h1{color:#ff0000}

例2：我们让body与h1分别应用不同的背景色：body {background-color:#ffcc66;}h1{color:#990000;background-color:#fc9804;}这里为h1应用了两个CSS 属性，他们之间一分号（；）分隔。

Background-repeat 控制图象平铺

Background-repeat：repeat-x(横向平铺数值); repeat-x-y(纵向平铺数值)

Background-repeat：no- repeat为图象不平铺

代码可写为

body {background-color:#00ff00;background-image:url(images/002.jpg); Background-repeat：no- repeat；}h1{color:#0000ff;background-color:#ff0000;}

Background-attachment指定背景图象是固定在屏幕上还是随它所在的元素而滚动（跟着屏幕移动）Background-attachment：scroll图象跟随页面滚动-非固定

Background-attachment：fixed图象固定在屏幕上

Background-position放置背景图象，放到你想放到的屏幕位置

代码可写为Background-position：2cm2cm图象被放在距离左边2厘米，顶部2厘米的位置代码可写为Background-position：50%25%图象被放在页内水平居中，离顶部1/4处。

font-family作用是设置一组按照优先级排序的字体列表

按优先级排列字体列表例子：

H1{font-family:arial,verdana,sans-serif;}h2{ font-family:”Times New Roman”,serif;}

”Times New Roman”因中间有空格所以用引号括起来

font-style字体样式，定义所选字体的显示样式：normal(正常)，italic(斜体)或oblique（倾斜）

下例中所有h2标题都显示为斜体：

H1{font-family:arial,verdana,sans-serif;}h2{ font-family:”Times New Roman”,serif;font-style:italic;}

Font-variant字体变化，数值可以是normal(正常)，或small-caps(小体大写字母)

H1{Font-variant:small-caps;}h2{ Font-variant: normal;}.

Font-weight字体浓淡，数值可以是normal(正常)或bold(加粗)

p{font-family:arial,verdana,sans-serif;} td{font-family:arial,verdana,sans-serif; Font-weight:hold;}

Font-size字体大小，字体大小可以通过多种不同单位（象素或百分笔）

H1{font-size:30px;}h2{ font-size:12pt;}h3{font-size:120%;}p{font-size:1em;}

Px与pt将字体设置为固定大小，%与em允许浏览者自行调整字体大小

Font 缩写

P元素代码：p{font-style:italic;font-weight:hold;font-size:30px;font-family:arial,sans-serif;}

Font缩写为：p{font: italic hold 30px arial,sans-serif}

Font属性的缩写值应按以下次序书写font-style；Font-variant；Font-weight；font-size；font-family

一、样式表的分类，分为三种：

1，内联样式（在HTML元素内部）；

2，内部样式表（位于标签内部）；

3，外部样式表。

HTML会按照以上顺序识别。

二、CSS语法，CSS规则由两个部分组成：选择器以及一条或多条声明：

H1{color:red;sont-size:14px;}

上述代码中：H1-选择器；color与fong-size为属性；red与14px为值；一个属性名称与一个对应的值为一条声明。如果值为单词，之间有空格必须加引号p{font-family:”sans serif”;}

三、高级语法，对选择器分组:h1,h2,h3,h4,h5,h6{color:freen;}所有标题原色都是绿色。

子元素从父元素，创建一个针对P的特殊规则，可以摆脱父元素的规则，如：

Body{font-family:verdana,sans-serfi;}td,ul,ol,li,dl,dt,dd{ font-family:times;”Tames New Romani”;} P{font-family:Times, ”Tames New Romani”;serif;}

四、ID选择器。

#red{color:red};#green{color:green;}

这个段落是红色

这个段落是绿色

ID属性在HTML中只能出现一次。

五、ID选择器与派生选择器。

#sidebar p{font-size:italic;text-slagn:right;margin-top:0.5em;}

上述样式只会应用于出现在ID是sidebar的元素段落，这个ID可以使用多次。

外连样式表从选择器ID掉取方式

样式表#red{color:red};#green{color:green;}

HTML

…

或