`

CSS笔记

    博客分类:
  • CSS
阅读更多
一:如何在jsp页面中引入css样式表文件?
  1, 首先把写好的css样式表内容存为*.css格式。如style.css
  2, 在页面中引入这个css 样式文件。用如下的方式引入。
  <link rel="stylesheet" href="./css/style.css" type="text/css">
  此处的href=”./css/style.css”指的是css文件存放的路径。‘.’请示当前目录(就是与引入 css文件的jsp页面在同一目录)
二:如何在jsp页面中引入javascript文件?
  在jsp页面引入javascript文件与引入css样式文件类似。如下引入;
  <script language='javascript' src='js/TreeToc.js'></script>
  通过<script>标签的src属性Javascript文件必须以.js这种形式存放。如上面的TreeToe.js
  .src属性指向javascript文件的路径。

CDATA部件

在CDATA内部的所有内容都会被解析器忽略。

如果文本包含了很多的"<"字符和"&"字符——就象程序代码一样,那么最好把他们都放到CDATA部件中。

一个 CDATA 部件以"<![CDATA[" 标记开始,以"]]>"标记结束:

<script>
<![CDATA[
function matchwo(a,b)
{
if (a < b && a < 0) then
{
return 1
}
else
{
return 0
}
}
]]>
</script>

在前面的例子中,所有在CDATA部件之间的文本都会被解析器忽略。
CDATA注意事项:

CDATA部件之间不能再包含CDATA部件(不能嵌套)。如果CDATA部件包含了字符"]]>" 或者"<![CDATA[" ,将很有可能出错哦。

同样要注意在字符串"]]>"之间没有空格或者换行符。


link 标签 -- 当在文档中声明使用外接资源(比如CSS)时使用此标签

    * link标签是单独出现的
    * 属性
          o href -- 指定需要加载的资源(CSS文件)的地址URI
          o media -- 媒体类型,参见CSS教程
          o rel -- 指定链接类型
          o rev -- 指定链接类型
          o type -- 包含内容的类型,一般使用type="text/css"






推荐的CSS书写顺序


//显示属性
display
list-style
position
float
clear

//自身属性
width
height
margin
padding
border
background

//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content


例子:
#main {
    float:left;
    width:500px;
    height:600px;
    margin:10px 0 15px 0;
    background:url(http://www.zfnn.com/logo.jpg) no-repeat 20px 200px;
    color:#c00;
    font-size:13px;
    line-height:22px;
}



CSS常用的属性:
常用的文本属性:
font-size:文本的字体大小
font-family:文本的字体类型
font-style:文本的字体样式
color:设置文本的颜色
text-align:设置文本的对齐方式

常用的背景属性:
background-color:背景颜色
background-image:背景图象
background-repeat:设置一个指定的背景图象如何被重复显示,可取值:repeat(铺满整个区域,默认情况),no-repeat(不平铺),repeat-x :只在X轴平铺,repeat-y:只在Y轴平铺

常用的方框属性:
边界属性:
margin-top:对象的上边框
margin-right:对象的右边框
margin-bottom:对象的下边框
margin-left:对象的左边框
边框属性:
border-style:边框的样式
border-width:边框的宽度
border-color:边框的颜色
填充属性:
padding-top:内容与上边框之间的距离
padding-right:内容与右边框之间的距离
padding-bottom:内容与下边框之间的距离
padding-left:内容与左边框之间的距离



  • 大小: 11.5 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics