主页>涂鸦板>教你区分HTML和CSS正确把CSS加入涂鸦板
教你区分HTML和CSS正确把CSS加入涂鸦板
收藏到QQ书签 /*--------校内网涂鸦板代码复制开始------------*/
涂鸦板这次又更新了。。。html被禁止用了，只能用CSS美化页面了。。。5555555 大家编辑涂鸦板的时候都可以看到这个讨厌的公告：
关于这次更新，许多不熟悉代码的同学都说很多页面代码不能用了，有的代码失效了。原因就在于校内禁止了html语言的使用。
在这里先给大家说一下什么是html、什么是CSS
■ HTML 一般概念：
全称：HyperText Mark-up Language
译称：超文本标记语言。
简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件达到预期的效果。
HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C++ 和 ｊａｖａ 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成。
■ 标记写法：
·任何标记皆由"<"及">"所围住，如 <P>
·标记名与小于号之间不能留有空白字元。
·有些标记需要加上参数，有些不要。如 <font size="+2">Hello</font>
·参数只可加于起始标记中。
·在起始标记的标记名前加上符号"/"便是终结标记，如 </font>
·标记字母大小写皆可。
■ 围堵标记与空标记：
标记按型态分为围堵标记与空标记
1、围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期要显示的效果。
例如 HTML Source ： <b>Creation of Webpage</b> is my favourite.
显示成： Creation of Webpage is my favourite.
其中 <b></b> 便称为围堵标记。它以起始标记<b>及终结标记</b>标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
2、空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 HTML Source：
I love Creation of Webpage.<br>It’s a wonderful place.
显示成：
I love Creation of Webpage.
It’s a wonderful place.
其中换行标记<br>便属于空标记。
它的作用是将标记后的所有东西显示于下一行，可同终结标记对它是没有意义的， 但有些人为空标记加上终结标记，这是为方便阅读而已，对 HTML 没有影响。
■ HTML 标记一览：
标记 类型 名称或意义 作用 备注
文件标记
<HTML> ● 文件宣告 让浏览器知道这是 HTML 文件
<HEAD> ● 开头 提供文件整体信息
<TITLE> ● 标题 定义文件标题，将显示于浏览器顶端
<BODY> ● 主体 设计文件格式及内容所在
排版标记
<!--注解--> ○ 说明标记 为文件加上说明，但不被显示
<P> ○ 段落标记 为字、图、表格等之间留下一空白行
<BR> ○ 换行标记 令字、图、表格显示于下一行
<HR> ○ 水平线 插入一水平线
<CENTER> ● 居中 令字、图、表格等显示于中间 反对
<PRE> ● 预设格式 令文件按原代码的排列方式显示
<DIV> ● 定位标记 设定字、图、表格等的摆放位置
<NOBR> ● 不换行 令文字不因太长而换行
<WBR> ● 建议换行 预设换行部位
字体标记
<STRONG> ● 加重语气 产生字体加粗 Bold 的效果
<B> ● 粗体标记 产生字体加粗的效果
<EM> ● 强调标记 字体出现斜体效果
<I> ● 斜体标记 字体出现斜体效果
<TT> ● 等宽字体 Courier字体，字母宽度相同
<U> ● 加下划线 加下划线 反对
<H1> ● 一级标题标记 将字体变大，级数越高越小
<H2> ● 二级标题标记 将字体变大
<H3> ● 三级标题标记 将字体变大
<H4> ● 四级标题标记 将字体变大
<H5> ● 五级标题标记 将字体变大
<H6> ● 六级标题标记 将字体变大
<FONT> ● 字体标记 设定字体、大小、颜色 反对
<BASEFONT> ○ 基准字体标记 设定所有字体、大小、颜色 反对
<BIG> ● 字体加大 令字体稍微变大
<SMALL> ● 字体缩小 令字体稍微缩小
<STRIKE> ● 加删除线 为文字加删除线 反对
<CODE> ● 程式码 字体稍微加宽如<TT>
<KBD> ● 键盘字 字体稍微加宽，单一空白
<SAMP> ● 范例 字体稍为加宽如<TT>
<VAR> ● 变量 斜体效果
<CITE> ● 斜体标记 斜体效果
<BLOCKQUOTE> ● 向右缩排 文字向右缩排
<DFN> ● 述语定义 斜体效果
<ADDRESS> ● 地址标记 斜体效果
<SUB> ● 下标字 文字下标
<SUP> ● 上标字 文字上标
清单标记
<OL> ● 顺序清单 清单项目将以数字、字母顺序排列
<UL> ● 无序清单 清单项目将以实心圆点作为符号排列
<LI> ○ 清单项目 清单中的项目，一个标记一行
<MENU> ● 选项清单 可用type参数指定项目符号。 反对
<DIR> ● 目录清单 与<menu>相同 反对
<DL> ● 定义清单 清单分两层出现
<DT> ○ 定义条目 清单项标题
<DD> ○ 定义内容 清单项内容
表格标记
<TABLE> ● 表格标记 设定该表格的各项参数
<CAPTION> ● 表格标题 做成一打通列以填入表格标题
<TR> ● 表格列 设定该表格的列
<TD> ● 表格栏 设定该表格的栏
<TH> ● 表格标头 相等于<TD>，但其内文字字体会变粗
表单标记
<FORM> ● 表单标记 决定该表单的运作模式
<TEXTAREA> ● 文字框 提供文字输入栏
<INPUT> ○ 输入标记 决定输入形式
<SELECT> ● 选择标记 建立弹出卷动清单
<OPTION> ○ 选项 每一个清单选项
图形标记
<IMG> ○ 图形标记 用来插入图形及设定图形属性
链接标记
<A> ● 链接标记 加入链接
<BASE> ○ 基准标记 可将相对 URL 转绝对及指定链接
框架标记
<FRAMESET> ● 框架设定 设定框架
<FRAME> ○ 窗口设定 设定框架中的窗口
<IFRAME> ○ 页内框架 于网页中插入框架 IE
<NOFRAMES> ● 不支持框架 设定浏览器不支持框架时的提示
影像地图
<MAP> ● 影像地图名称 设定影像地图名称
<AREA> ○ 链接区域 设定各链接区域
多媒体
<BGSOUND> ○ 背景声音 令背景播放音乐或声音 IE
<EMBED> ○ 多媒体 加入声音、音乐或影像
其他标记
<MARQUEE> ● 走马灯 令文字走动 IE
<BLINK> ● 闪烁文字 令文字闪烁 NC
<ISINDEX> ○ 页内寻找器 可输入关键字寻找该页 反对
<META> ○ 开头说明 提供关于此页的信息给浏览器
<LINK> ○ 关系定义 定义该文件与其他 URL 的关系
StyleSheet
<STYLE> ● 式样表 控制网页版面
<span> ● 自订标记 独立使用或与样式表一起用
注：
·● 表示该标记属于围堵标记，即需要结束标记 </标记>。
·○ 表示该标记属空标记，即不需要结束标记。
所以现在页面加不了图片、背景音乐和flash，就是因为校内禁用了html语言。
再说下CSS
CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 在标准网页设计中CSS负责网页内容(XHTML)的表现.
CSS语法
CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.
每个CSS选择符由1个或多个CSS属性组成.
CSS是大小写敏感的,在CSS语法中推荐使用小写.
外部引用CSS -- External
CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.
外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.
外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).内联引用(直接在HTML标签中使用)虽然是一种快捷的方式,但是不利于以后的统一修改和表现的一致性,所以不提倡使用.
外部引用CSS有两种方法：
1使用 link 标签引用CSS
示例：<link rel="stylesheet" type="text/css" href="http://www.xxxxx.com/style.css" />
2是使用 @import 引用CSS
示例：<style type="text/css">@import url(http://www.xxxxx.com/style.css);</style>
内部引用CSS -- Internal
内部引用CSS是写在HTML的<head></head>里面的。内部引用CSS只对所在的网页有效。
内部引用CSS(Internal Sytle Sheet)要用到Style这个Tag，写法如下：
<STYLE type="text/css">
......
</STYLE>
示例：
<style type="text/css"><!/* ----------文字样式开始---------- */.kenforever { color:white; font-size:12px; }/* ----------文字样式结束---------- */></style>内联引用CSS -- InlineInline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。示例：<P style="font-size:20pt; color:red">大家好，我是ken。<p>其中里面的文字是20pt字体，字体颜色是红色。目前校内可用的只有内部引用CSS -- InternalCSS 选择符 -- CSS的名字CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS样式.选择符语法：选择符名字{ 声明;}一个CSS选择符就定义了一个样式比如下面这三个例子：p{ font-size:12px;}.kenforever{ color:blue;}.ruyforever{ font-size:18px;}#kenforever{ color:red;}其中kenforever和ruyforever都是CSS的选择符,也就是CSS的名字.常用的三种选择符：xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 p{font-size:12px;} id选择符,唯一性选择符,比如 #kenforever{color:red;},就是在名字前增加了一个“#”,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). class选择符,多重选择符,比如.kenforever{color:blue;},就是在名字前增加了一个“.”,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法).<p>kenforever之xhtml标签选择符</p><p id="kenforever">id选择符</p><p class="kenforever">class选择符</p><p class="kenforever ruyforever">class选择符2,出现了多次.</p>一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次选择符用法总结id与class选择符在CSS与XHTML中的用法总结 CSS中的写法 XHTML中的写法xhtml标签选择符 p{font-size:12px;} <p>http://xiaonei.com/getuser.do?id=222572830</p>id选择符 #id_selector{font-size:12px;} <p id="id_selector">大家好，我是ken</p>class选择符 .class_selector{font-size:12px;} <p class="class_selector">大家好，我是ken</p> CSS 声明CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.语法:属性:属性值;示例：font-size:12px;下面介绍两个常用的技巧：1,选择符的名字一样,声明是可以组合的例如:选择符名字{ 声明1;}选择符名字{ 声明2;}选择符名字{ 声明3;}可以组合为:选择符名字{ 声明1; 声明2; 声明3;}2,声明全部一样,选择符的名字也可以组合选择符名字1{ 声明1; 声明2;}选择符名字2{ 声明1; 声明2;}选择符名字3{ 声明1; 声明2;}可以组合为:选择符名字1,选择符名字2,选择符名字3{声明1;声明2;} 说完了，相信大家对html和CSS都有一定的了解了吧？！校内现在只能用CSS编辑页面，所以不属于CSS的代码都得去掉。校内已经在涂鸦板里直接加了<Style>这个Tag，所以同学们直接把CSS代码写到涂鸦板里即可。而不需要再加上<STYLE type="text/css">和</STYLE>多此一举了。举个例子吧：大家都知道隐藏左侧导航栏和隐藏底部的代码是：<style type=text/css><!--#sidebar{display:none;}--></style><!--隐藏左侧导航栏-->和<style type=text/css><!--#footer{display:none;}--></style><!－隐藏底部－>涂鸦板没改版之前代码这样写进去就可以了，而现在的涂鸦板，你只需要写入#sidebar{display:none;}#footer{display:none;}或者简练些#sidebar,#footer{display:none;}代码即可生效。切记把<STYLE type="text/css"><!--和--></style>去掉。在涂鸦群里找到一个自己喜欢的页面时，若是涂鸦板未更新前发布的页面代码，记得把<STYLE type="text/css"><!--和--></style>去掉，只要中间的那部分，再去掉没有效果的html代码就行了。
教你区分HTML和CSS正确把CSS加入涂鸦板的评论
评论加载中…
- 4108·韩国透明风格免费模板
- 2944·黑色经典校内代码
- 2111·校内网黑色清馨背景代码
- 1820·校内网天使流泪代码
- 1440·校内网非主流涂鸦黑色系极品校内
- 1338·校内免费皮肤代码
- 1231·校内个性涂鸦板代码
- 1211·校内网涂鸭板代码
- 1210·校内网文字颜色代码
- 913·如何在校内网上传1M的音乐等文件
- 877·校内插入视频的方法
- 840·校内网CSS代码的入门教程
- 05-07·校内免费皮肤代码
- 05-10·校内网涂鸭板代码
- 04-28·紫豆用户帮助
- 05-04·大学生校内网透明代码
- 05-27·涂鸦板代码中的违禁字符汇总
- 05-06·消除校内背景代码白块的方法
- 04-30·蔡依林的涂鸦板代码
- 05-20·校内网代码违禁内容的处理！
- 05-09·校内网CSS代码的入门教程
- 04-24·校内网非主流涂鸦黑色系极品校内
- 05-07·校内插入视频的方法
- 05-16·校内网隐藏涂鸦代码
- 05-26·抗震救灾的校内网涂鸦板代码
- 05-26·校内网黑色清馨背景代码
- 05-11·韩国透明风格免费模板
- 06-02·推荐一个比校内网更好玩的地方！
- 05-05·校内网大三的左边
- 05-31·校内网儿童节红色激情代码
- 05-03·涂鸦板CSS代码
- 05-26·地震校内网代码
- 05-01·校内网天使流泪代码
- 04-29·校内网紫豆用户服务条款
- 04-25·黑色经典校内代码
- 05-04·校内网CSS教程
- 04-28·校内网紫豆用户服务详细说明、教
- 05-16·校内网文字颜色代码
- 04-28·校内网紫豆代码
- 05-11·校内文学之再见，我的大学
- 05-03·如何在校内网上传1M的音乐等文件
- 05-10·校内网涂鸦版技巧