怎么定义1个DIV的CSS样式?

作者&投稿:景仲 (若有异议请与网页底部的电邮联系)
div+css如何让一个div块不受整体的css样式控制~

1、首先,新建一个新html文件,写好html基本结构。在body区域中先写一个div盒子,用来装导航菜单里面的所有内容。

2、接着,做下拉列表的内容,是一串链接内容,把它放在一个盒子里面,方便后续写样式进行调整。

3、接着,用浏览器打开,就可以看到把大概的结构给搭建好了。

4、接着,开始写css样式,先美化下菜单导航(下拉菜单暂时先不动)。

5、把要下拉的菜单内容做美化,并调整菜单的排版。

6、接着,把要在下拉显示的内容做隐藏处理,如图。

7、接着,开始制作鼠标经过的时候,把下方的内容显示出来。

8、最后预览一下看看,就完成了。

两个DIV,ID分别是aa,bb,则:


那么分别给这两个div加上样式,可以这样写:
#aa{color:#f00;}---这个定义了id为aa的div的样式
#bb{color:#0f0;}---这个定义bb的样式

使用符号“#”则对应了div的id属性。

如果不是根据id属性来定义,例如多个div需要使用同样的样式的话,由于同一个页面id属性是唯一的,所以需要通过下面方式来定义样式:

红色
红色
蓝色
----样式定义这样写:
.red{color:#f00;}
.blue{color:#00f;}

这里样式名称前面的符号是".",则通过div里面的class属性来匹配样式不过,在HTML如果是这样。

dfsad




adasdfas

如果要控制id为a中的p的话,可以把CSS的选择器写成

#a p{
各种样式;
}

CSS中用空格来表示是在#a当中的p

加入样式可以有两种途径,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

先看看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是类,还是id,然后在里面写样式就行
<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>


怎么定义1个DIV的CSS样式?
加入样式可以有两种途径,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{backgro...

怎样定义一个div中的文字位置啊?
1、padding内边距:例如:将div容器中的文字内容放在距离容器的左侧边框的20px,顶部边框的100px的位置。代码:效果:不过,在容器里使用了padding的话,会改变容器的大小,所以在写代码之前要先计算好容器的大小及padding。2、margin外边距:代码:效果:3、绝对定位position:absolute; top:50px; left...

怎么定义1个DIV的CSS样式?
<div id='bb'><\/div> 那么分别给这两个div加上样式,可以这样写:aa{color:#f00;}---这个定义了id为aa的div的样式 bb{color:#0f0;}---这个定义bb的样式 使用符号“#”则对应了div的id属性。如果不是根据id属性来定义,例如多个div需要使用同样的样式的话,由于同一个页面id属性是唯一的,...

怎样定义一个DIV里的元素的CSS样式
有三种常用方式:1、通过id 例:<style>#test{color:red;}<\/style><div id="test" >test<\/div> 2、通过类名 例:<style>.test{color:blue;}<\/style><div class="test" >test<\/div> 3、直接放在div标签里 例:<div style="color:purple" >test<\/div> ...

一个DIV里,一边靠左,一边靠右,怎么实现?
定义和用法:position属性规定元素的定位类型。 说明:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 具体实现步骤如下: 1、设计一个html页面,一个标签元素div或者ul里,放入多行数据...

如何将一个div设为绝对定位,而且两个div一样?
relaitve。第一个小DIV属性设置成为position:absolute; z-index:1。第二个小DIV属性设置成为position:absolute; z-index:2。width、height、left和top视情况而定。注:1、父级div用相对定位position:relative,子级div用绝对定位position:absolute。2、z-index的值,从小到大代表着从下到上。

怎么指定一个div引用指定外部CSS
在header.tpl添加:<style>.extraDiv{\/\/css code}<\/style><div class="extraDiv">\/\/codding<\/div>

怎样用jquery为div添加一个div
(obj_div).prop('id',id_name);实例演示如下:点击按钮设置div标签的id为test,为了便于观察效果,css中设置了id为test的样式为红色 1、HTML结构 <style> test{color:red !important; font-weight:bold;} <\/style> <div>我是示例DIV<\/div> <input type="button" value="设置上一个div的id为...

想在一个div里面添加图片,用js怎么写啊?
1、新建一个HTML文件,保存为test.html,用于编写代码实现拖放功能 。2、在test.html添加一个div标签,并且给它一个id,用于下面编写样式。3、通过div的id , 给div定义CSS样式,例如,把div定义为一个带边框的长方形。下面将实现将图片拖放在这个长方形中。4、在div的下面定义一张被拖放图片,并设置...

如何定义一个绝对高度div
foldDIV{ margin:0 0;padding:0 0;width: 160px;font-size: 14px;height:0;line-height:0;font-size:0;border:4px #ccc double;background:#eee;} top{ height:0;line-height:0;font-size:0;height:20px;margin:0 0;padding:0 0;display:none;} content { height:0px;line-height:0...

天镇县18581045495: 怎么定义1个DIV的CSS样式? -
钟青野马: 实在没看明白你的意思.不过,在HTML如果是这样.<div id="a"> <p>dfsad</p></div><div id="b"> <p>adasdfas</p></div> 如果要控制id为a中的p的话,可以把CSS的选择器写成#a p{ 各种样式; } CSS中用空格来表示是在#a当中的p

天镇县18581045495: 怎样定义一个DIV里的元素的CSS样式 -
钟青野马: DIV里的元素也可以使用id或者class来定义样式 没有什么区别的 样式里写span的时候可以这样#11 my {...;}

天镇县18581045495: 如何单独定义一个div中的css -
钟青野马: 例:.abc{} 即可~~~

天镇县18581045495: 怎样单独定义div中的标签样式 -
钟青野马: 定义一个css样式:.width{width:200px;} 给标签引用样式:<div class="width"></div> 如果要样式唯一可用“#”:#width:{width:200px;} 引用:<div id="width"></div>

天镇县18581045495: 怎么利用div css定义一个div中的img都是固定大小啊!!急 -
钟青野马: 1. 给div定义一个名称,例如:#mycontent 2. 设定此div中img的大小: #mycontent img{width:200px;height:200px;overflow:hidden;}3. 如果有多个div都需要如此设置,那么可以简写,例如,又有一个div名称为#header,那么可以这样写,#header img,#mycontent img{width:200px;height:200px;overflow:hidden;}

天镇县18581045495: 如何用css单独定义div标签呢
钟青野马: 给每一个div定义为不同的名称,,,,然后再给你想要设置的div加样式,,, 例: #con{width:400px; margin:0 auto} 这是给外层的div加样式,,,,和#son没关系

天镇县18581045495: css控制某个div里的超链接的样式怎么设置? -
钟青野马: 要在新窗口打开链接 就在a标签里面加入一个target属性,设置属性值为_blank; css写样式就是.singlea a{样式}//这是默认样式 还有a:link{};a:visited{};a:hover{};a:active{}几个鼠标效果

天镇县18581045495: 如何给动态生成的div加css样式 -
钟青野马: 动态生成的div也是要放在一个父级元素中的吧 假设动态生成的div欲放在id="a1"或class="b1"的元素中时,可以用包含包含选择符定义样式,如下:#id div{width:100px; height:100px;}.b1 div{width:100px; height:100px;} 如果层级比较多的,还是建议在动态生成时将样式选择符加在标签中.

天镇县18581045495: css+div 在不同分辨率下固定在页面的同一个位置 如何实现? -
钟青野马: 如果你的页面都是包在一个div下的话,那给这个div定义一个样式就可以了.div {width:你页面的宽度; margin:0 auto; ...} 注意几点:1、页面必须有DTD文档类型申明;2、外围div要设宽度;3、再加上margin:0 auto就可以了.

天镇县18581045495: div css语法 怎么用? -
钟青野马: 这个很简单的,首先你要创建一个CSS文件 然后在网站<head>之间引入CSS文件的路径,写法如下:<link rel="stylesheet" type="text/css" href="***/test.css" /> 最后在CSS根据你网站文件的DIV选择器 <div id="testid" class="testclass"> 通过#testid{} 或者.testclass{} 在{}里写入对应的样式就行了

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网