关于CSS样式的引用

很多时候,在布局中需要统一样式,又不可能挨个修改,于是就用到了CSS的统一样式。

写一个公用的样式,需要的东东一起调用。如果需要修改样式,则只需要修改该公用样式即可。

下面简单说一下创建并引用CSS样式的几个进本步骤:

1、现在工程的WebContent目录下创建一个新文件夹,命名为style(这个随意)。

表明我们这个文件夹里放的是CSS样式文件。

2、在刚刚创建的style文件夹内右键-New-Other选择创建CSS文件,并命名。我这里命名为mystyle.css.

3、在这个css样式文件中自定义一个样式。

.pp {
    size: 24em;
    color: red;
}

我是这样定义的,可以定义为你想要的样式。

4、引用说明

引用分为两个部分

一个是在JSP文件中引用,另一个是在Html文件中引用,两个稍微有点不同。

在JSP文件中引用:

<head>
    <link href="${pageContext.request.contextPath}/style/mystyle.css" rel="stylesheet">
</head>

在Html文件中引用:

<head>
    <meta charset="UTF-8">
    <link href="style/mystyle.css" rel="stylesheet">
</head>

通过对比可以发现不同点在${pageContext.request.contextPath}关于工程的路径上

5、开始引用(JSP、Html这两个是相同的)

<form name="myForm" action="/WebTest001/myServlet" method="post">
    <p class="pp">这个是CSS练习</p>
    <input class="pp" type="button" value="send" onclick="send();">
</form>

时间: 2024-07-29 03:59:48

关于CSS样式的引用的相关文章

动态为页面添加CSS样式文件引用

动态为页面添加CSS样式文件引用: 1 if (document.createStyleSheet) { //IE 2 document.createStyleSheet("./Themes/Default/MessageTip.css"); 3 } 4 else { //Firefox, Chrome 5 var stylesheet = document.createElement("link"); 6 stylesheet.href = "./The

分页css样式 class引用

.page_nav{clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}.page_nav a{display:inline-block; height:22px; margin:0 2px; padding:0 8px; text-decoration:none; border:solid 1px #dbe5ee; -moz-border-radius:2px; -web

HTML文件中css样式的引用

1.1.直接在div中使用css样式制作div+css网页 如: <div style="font-size:14px; color:#FF0000;">内容</div> 1.2.html中使用style标签 在html头部head部分内style标签插入css样式代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

CSS样式表引用方式

1.外部文件引用方式:(推荐使用)2.使用@import引用外部CSS文件; 3.内部文档头方式也叫内嵌法调用: 4.直接插入式也叫行内样式.它们主要的差别在于它们规定的风格使用的范围不同: 一.外部文件引用方式 外部文件引用方式即将CSS写成一个文件,在HTML文档头通过文件引用来进行风格控制. 也就是把写好的CSS属性的文件保存为文件扩展名为.CSS文件. CSS文件的引用是在HTML的标记之间写下列语句: <link rel="stylesheet" href="

三种CSS样式的引用方式

CSS样式 3种引用样式的好处及区别: 外部引入样式 优点:代码易于管理和维护,一个CSS能控制多个页面.提高加载速度. 缺点:当外部CSS过多时会造成服务器的请求压力. 头部引入样式: .  优点:加载速度最快,并且不会造成服务器的压力. 缺点:不利于维护和改版.代码量大显得乱. 行内样式: .  优点:优先级最高. 缺点:代码乱.不利于改版和维护.影响开发成本 优先级: 选取一个或多个标签进行操作 常用的选择器有三种:标签名选择器.类名选择器.ID名选择器.(在起名的时候要尽量起和内容有关的

ruby中sass和compass的下载与安装以及css样式的引用

用scss来书写css还是很方便的.首先是ruby的下载与安装,下载地址是http://rubyinstaller.org/downloads/ .下载完以后,我们打开安装文件,点击下一步安装即可,注意 在这里下面打上勾,防止以后运行命令的时候找不到. 安装完成后,点击后打开. 运行命令 gem install sass 然后等待安装完成,第一次安装可能会花费时间比较长,也有可能是被屏蔽了,多试几次 就可以. 下一步我们安装compass,运行命令 gem install compass 然后也

用JS改变的元素CSS样式

CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000&qu

CSS基础知识总结之css样式引用的三种方式

在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>天蓝蓝</title> <!--tag标签的图标--> <link rel=&

CSS基础概念 第一节 引用CSS样式表

引用CSS样式有四种方法,它们包含了:文档内部样式的引用.文档外部样式表的引用. 1.LINK 元素 LINK元素在HTML和XHTML中创建,用来引用外部样式表到当前文档中 通用的语法 <link rel="..." type="text/css" href="..." media="..."> 属性 rel="..." 此属性描述当前文档与链接文件的关系.对于外部样式表,有两种可能的值:st