CSS笔记

最新推荐文章于 2024-09-29 11:01:57 发布

原创最新推荐文章于 2024-09-29 11:01:57 发布 · 133 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #JavaScript #JSP #ViewUI

CSS 专栏收录该内容

1 篇文章

订阅专栏

一：如何在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"

[img]/upload/attachment/102690/3095d22f-f34a-39a7-89e7-535eeeb6b123.png[/img]

推荐的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:内容与左边框之间的距离