文档库 最新最全的文档下载
当前位置:文档库 › CSS外部样式表代码引用

CSS外部样式表代码引用

CSS外部样式表代码引用
CSS外部样式表代码引用

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

相关英语单词

Center 中心right 右对齐top 靠上left 左对齐bottom 靠下

cellspacing 单元格间距

cellpadding 打援格衬距,指单元格内容与表格周边边框的距离

bdcolor 表格的背景颜色

background 表格的背景图

bordercolor 表格的边框颜色

bordercolorlight 亮边框颜色

bordercolordark 暗亮边框颜色

frame=”border”边框的显示与隐藏(只控制表格边框,不影响单元格)

 空单元格代码

网页色彩带来的心理反映;

红色:热情,活力,温暖,喜庆,极容易吸引人的眼球

橙色:时尚,轻快,温馨,热烈,用与某些时尚新潮的网站,如时装网,化妆品网站等

黄色:快乐,希望,明亮,乐观,营造出愉快的氛围,能得到大部分浏览者的认可

绿色:宁静,和谐,清爽,自然,浅绿,黄绿等颜色既有绿色的特点,又能表现出黄色的温暖,用在网站常常能够得到青年人和儿童的喜爱

蓝色:凉爽,清新,理智,平静,常用在商业设计中,强调科技,效率的商品的企业形象,大多选用

蓝色做为标准色

灰色:柔和,高雅,可靠,成熟与红色,橙色等比较有视觉冲击力的颜色对比,灰色比较低调白色:洁白,纯真,明快,简洁,通常需要和其他色彩搭配使用,多用于网站背景色

黑色:深沉,高贵,庄严,优雅,适合许多颜色搭配

紫色:高贵,神秘,启发,具有强烈女性化性格,用于与女性相关区域,其他地方一般不采用

史上最全!css命名规范(英文命名)

史上最全!css 命名规范(英文命名)一.文件命名规范 [b] 样式文件命名[/b] [quote] 主要的master.css 布局,版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote] 页头:header 登录条:loginbar 标志logo 侧栏sidebar 广告banner 导航nav 子导航:subnav 菜单menu 子菜单:submenu 搜索search 滚动scroll 页面主体:main 内容content 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入joinus 指南guild 服务service 热点八、、hot 新闻news 下载download 注册regsiter 状态status 按钮btn 投票vote 合作伙伴:partner 友情链接:friendlink 页脚footer 版权copyright

wrap mainnav subnav footer content header footer label title mainbav ( globalnav ) topnav sidebar leftsidebar rightsidebar logo banner menu1content menucontainer submenu sidebarIcon 注释: note 面包屑: breadcrumb ( 即页面所处位置导航提示) 容器: 内容: 搜索: 登陆: 功能区: container content search Login shop( 如购物车,收银台 ) 当前的 current[/quote] [b] 网站常用中英文对照表 [/b] [quote] 网站导航 Site Map 公司简介 Profile or Company Profile or Company 公司设备 Equipment Equipment 公司荣誉 Glories Glories 企业文化 Culture Culture 产品展示 Product Product 资质认证 Quality Certification 企业规模 Scale Scale 营销网络 Sales Network 组织机构 organization organization 合作加盟 Join In Cooperation 技术力量 Technology Technology 经理致辞 Manager's oration 发展历程 Development History 外 套: 主导 航: 子导航: 页 脚: 整个 页面: 页 眉: 页 脚: 商 标: 标 题: 主导航: 顶导航: 边导航: 左导航: 右导航: 旗 志: 标 语: 菜单内容 1: 菜单容量: 子菜单: 边导航图标:

网站文件夹结构以及命名规则

第一部分:目录、文件、CSS命名方式 文件夹与文件名称、CSS样式命名、程序中的一些控件等等: 名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录名应以英文、拼音为主(不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂)。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。而且当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。 例如:images(图形文件),flash(Flash文件)等。 命名方式:(性质_描素_位置_分类_数量)项相结合,采用简写、组合的方式形成通用规则。 例如: news (性质) news_title (性质_描素) news_title_top (性质_描素_位置) news_title_top_01 (性质_描素_位置_数量) news_title_top_a_01 (性质_描素_位置_分类_数量) news_title_top_b_01 (性质_描素_位置_分类_数量) 常用目录名: data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式)等…… 常用CSS名: 页面外围控制整体布局宽度:wrapper头:header内容:content/container页面主体:main侧栏:sidebar尾:footer等…… 更多命名查看: https://www.wendangku.net/doc/9c2350593.html,/post/41.html 第二部分:结构(XHTML) 网站的前端结构与表现分离,达到95%以上。正式上线后的网页代码结构要清晰、明朗,容易阅读,布局与结构的镶套尽量控制在4-5层以内,严格遵循w3c的xhtml1.0 Transtitonal。并遵循以下原则: 1. DDT类型:XHTML 1.0 Transitional 2. 编码:utf-8 3. 元标记必须项: 该页面的关键词概况

《CSS样式》习题

一、选择题 1.CSS是()的缩写。 A.C olorful S tyle S heets B.C omputer S tyle S heets C.C ascading S tyle S heets D.C reative S tyle S heets 2.引用外部样式表的格式是()。 A.