怎么定义1个DIV的CSS样式?
比如2个DIV的ID分别是aa和bb,如何给DIV内的元素添加CSS样式?是定义了样式(比如样式C和D)然后选中要加入样式的DIV内的元素,并赋予样式;还是在编辑CSS样...
比如2个DIV的ID分别是aa和bb,如何给DIV内的元素添加CSS样式?
是定义了样式(比如样式C和D)然后选中要加入样式的DIV内的元素,并赋予样式;还是在编辑CSS样式的时候,通过对CSS样式命名的不同,来让软件自动识别这个CSS是对哪个DIV起作用的?
!!!如果是命名不同 怎么命名来区分?谢谢 展开
是定义了样式(比如样式C和D)然后选中要加入样式的DIV内的元素,并赋予样式;还是在编辑CSS样式的时候,通过对CSS样式命名的不同,来让软件自动识别这个CSS是对哪个DIV起作用的?
!!!如果是命名不同 怎么命名来区分?谢谢 展开
6个回答
展开全部
加入样式可以有两种途径,1是适用ID,2是适用CLASS
如果DIV的ID是AA那么代码会显示为<div id="aa"></div>
class则为<div class="aa"></div>
那么CSS应该写在哪里呢
如果页面是引入了CSS文件,那么你就找到CSS文件中
id的定义样式格式为#aa{background:red;}
class的定义样式格式为.aa{background:red;}
没错 就是#和.的区别
那么如果没有引入CSS文件应该放在哪里呢
看到页面代码头部有个<head>标签么
在<head>和</head>之间加入
<style>#aa{background:red;}</style>
即可。
同样也可以写多个
<style>
#aa{background:red;}
#bb{background:red;}
</style>
by--精通css
如果DIV的ID是AA那么代码会显示为<div id="aa"></div>
class则为<div class="aa"></div>
那么CSS应该写在哪里呢
如果页面是引入了CSS文件,那么你就找到CSS文件中
id的定义样式格式为#aa{background:red;}
class的定义样式格式为.aa{background:red;}
没错 就是#和.的区别
那么如果没有引入CSS文件应该放在哪里呢
看到页面代码头部有个<head>标签么
在<head>和</head>之间加入
<style>#aa{background:red;}</style>
即可。
同样也可以写多个
<style>
#aa{background:red;}
#bb{background:red;}
</style>
by--精通css
展开全部
先看看CSS的使用方法吧!
CSS, 教程
在上一节介绍了什么是CSS,并用一段简单的代码解释了CSS代码中最核心的三个部分,现在这篇帖子将讲述如何讲上一篇文章里提到的代码使用到网页页面上。
首先再回顾一下上一节中所写的代码,这里为了能够更明显的看到效果,我们将字体的颜色改为红色,代码如下:
body {
font-size: 12px;
color: #FF0000;
}
body {
font-size: 12px;
color: #FF0000;
}要把这样的样式使用到页面上,有三种方法,也就是CSS使用的方法。
1.In-line 行内(只是讲解,绝对不推荐使用这种方法)
行内样式是在html标签里直接使用style属性
所以使用该方法就是直接在body标签里面书写样式,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
</head>
<body style="font-size:12px;color:#FF0000">
CSS使用方法教程
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
</head>
<body style="font-size:12px;color:#FF0000">
CSS使用方法教程
</body>
</html>可能你会提问,和之前介绍的代码有些不相符合。是的,当然这只是CSS使用的一种方式,不推荐这样做,所以你完全可以跳过这段,进入下面的学习。
2.Internal 内部
这种方式是直接把CSS定义的样式写在html页面内部,更准确的说是写在<head></head>之间,并包含在<style type="text/css"></style>之间。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<style type="text/css">
body {
font-size: 12px;
color: #FF0000;
}
</style>
</head>
<body>
CSS使用方法教程
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<style type="text/css">
body {
font-size: 12px;
color: #FF0000;
}
</style>
</head>
<body>
CSS使用方法教程
</body>
</html> 3.外部引用方式
外部引用方式,就是将写好的CSS代码单独存成一个.css文件,然后在需要使用的页面上引用这个css文件,引用的时候在页面的<head></head>之间添加这样一行代码:
普通浏览复制代码打印代码
<link rel="stylesheet" type="text/css" href="example.css" />
<link rel="stylesheet" type="text/css" href="example.css" />其中href后面的属性值为指明.css文件所保存的路径,这个路径可以是绝对路径,也可以是相对路径。
例如,现在将刚才的那段css代码
普通浏览复制代码打印代码
body {
font-size: 12px;
color: #FF0000;
}
body {
font-size: 12px;
color: #FF0000;
}单独保存成example.css文件,并且和测试的html文件放在相同的文件夹下,这时使用外部引用的代码如下:
普通浏览复制代码打印代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
CSS使用方法教程
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
CSS使用方法教程
</body>
</html>此时在该页面中将完全看不到CSS的相关定义。
总结
在CSS使用的三种方式中,第一种已经被淘汰,也很好被使用,写在这里只是为了理论的完整性。
第二种和第三种在实际应用中都会被使用到,不过第三种被使用的情况会更多一些,把一个CSS文件单独独立出来,显而易见的好处就是它可以被很多个html或者xml文档所引用,而不必在每个需要使用相同css的页面里添加重复的代码,同样在维护的时候也会方便很多。
CSS, 教程
在上一节介绍了什么是CSS,并用一段简单的代码解释了CSS代码中最核心的三个部分,现在这篇帖子将讲述如何讲上一篇文章里提到的代码使用到网页页面上。
首先再回顾一下上一节中所写的代码,这里为了能够更明显的看到效果,我们将字体的颜色改为红色,代码如下:
body {
font-size: 12px;
color: #FF0000;
}
body {
font-size: 12px;
color: #FF0000;
}要把这样的样式使用到页面上,有三种方法,也就是CSS使用的方法。
1.In-line 行内(只是讲解,绝对不推荐使用这种方法)
行内样式是在html标签里直接使用style属性
所以使用该方法就是直接在body标签里面书写样式,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
</head>
<body style="font-size:12px;color:#FF0000">
CSS使用方法教程
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
</head>
<body style="font-size:12px;color:#FF0000">
CSS使用方法教程
</body>
</html>可能你会提问,和之前介绍的代码有些不相符合。是的,当然这只是CSS使用的一种方式,不推荐这样做,所以你完全可以跳过这段,进入下面的学习。
2.Internal 内部
这种方式是直接把CSS定义的样式写在html页面内部,更准确的说是写在<head></head>之间,并包含在<style type="text/css"></style>之间。代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<style type="text/css">
body {
font-size: 12px;
color: #FF0000;
}
</style>
</head>
<body>
CSS使用方法教程
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<style type="text/css">
body {
font-size: 12px;
color: #FF0000;
}
</style>
</head>
<body>
CSS使用方法教程
</body>
</html> 3.外部引用方式
外部引用方式,就是将写好的CSS代码单独存成一个.css文件,然后在需要使用的页面上引用这个css文件,引用的时候在页面的<head></head>之间添加这样一行代码:
普通浏览复制代码打印代码
<link rel="stylesheet" type="text/css" href="example.css" />
<link rel="stylesheet" type="text/css" href="example.css" />其中href后面的属性值为指明.css文件所保存的路径,这个路径可以是绝对路径,也可以是相对路径。
例如,现在将刚才的那段css代码
普通浏览复制代码打印代码
body {
font-size: 12px;
color: #FF0000;
}
body {
font-size: 12px;
color: #FF0000;
}单独保存成example.css文件,并且和测试的html文件放在相同的文件夹下,这时使用外部引用的代码如下:
普通浏览复制代码打印代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
CSS使用方法教程
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS引用方法</title>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
CSS使用方法教程
</body>
</html>此时在该页面中将完全看不到CSS的相关定义。
总结
在CSS使用的三种方式中,第一种已经被淘汰,也很好被使用,写在这里只是为了理论的完整性。
第二种和第三种在实际应用中都会被使用到,不过第三种被使用的情况会更多一些,把一个CSS文件单独独立出来,显而易见的好处就是它可以被很多个html或者xml文档所引用,而不必在每个需要使用相同css的页面里添加重复的代码,同样在维护的时候也会方便很多。
参考资料: http://www.51webz.cn/Html/?2889.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
例如,下面这几行代码,先看css是类,还是id,然后在里面写样式就行
<div class="foot"></div>
.{
border:0px;
margin:0px;
padding:0px;
background-color:00FF00;
}
<div class="foot"></div>
.{
border:0px;
margin:0px;
padding:0px;
background-color:00FF00;
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
费话不多说 解决办法是创建#aa{这里则是aa的样式;} #bb{这里则是bb的样式;} 像这一类样式一般是控制DIV的样式和内元素的整体样式,如DIV定位、内元素居中等等 #aa或#bb就是控制其对应的DIV,一般来说对其他DIV不受影响 本人也算不上很会 愿交个朋友交流236823049
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
#aa{font-size: 12px; } 对应ID标签
.aa{font-size: 12px; }对应class标签
<div id="aa">我来回答</div>
<div class="aa">我来回答</div>
.aa{font-size: 12px; }对应class标签
<div id="aa">我来回答</div>
<div class="aa">我来回答</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询