码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2014-08-31 18:31:21      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   os   使用   io   java   strong   ar   

可以用元素标签加类来选择对应元素

如 :

<html>
<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>

<body>
<p>
<span class="highlight">这是文本。</span> 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 <span class="highlight">这是文本。</span>
</p>
</body>
</html>

 

几种背景颜色的设置方法

如:

<html>
<head>

<style type="text/css">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>

</body>
</html>

 

 

Ext中初始化配置项iconCls的使用方法

使用过Ext(http://www.extjs.com)的同志都应 该知道,每一个组件(Component)在初始化的时候,都会有一个配置参数(Config){在Ext2中,基本上所有的组件的构造函数只接受一个参 数,这个参数或者是一个Config Object或都是一个Array of Config Object},其中,许多组件,如Menu,Button都有一个配置选项iconCls,很明显,这个是用来配置按钮等的图标的,所以假设我们要初始 化一个Button,我们在JS里这样写:
var button = new Ext.Button({
        text: "Hello",
        iconCls: "hello-button"
});

然后我们再在CSS中写下如下规则:
.hello-button {
        background: url(images/hello.png) left top no-repeat;
}

 

使用这个方法是给一个空间显示图标用。

 

通过CSS样式设置文字样式的单词是color:red;

举例来讲:
1.
<input type=baidu type=text style="font-size:12px;color:red">

2.
<style type="text/css">
<!--
.style1 {color: #FF0000}
-->
</style>
<span class="style1">应用的时候是红色的哟</span>

 大小单位解释

◆px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
◆em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
因此用px来定义字体,就无法用浏览器字体放大的功能。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。
为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,
也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
◆CSS中em属性有如下特点
1.em的值并不是固定的;
2.em会继承父级元素的字体大小。
◆所以我们在写CSS的时候,需要注意
1.body选择器中声明Font-size=62.5%;
2.将你的原来的px数值除以10,然后换上em作为单位;
3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,
而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,
而是稍大一点。这个问题Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。
原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。


html中竖线实现方法
1.用|
2.用div+CSS制作出一个,也就是用边框线来拉一个出来,宽高度由你自己定。参考如下:
<div style="height:100px; width:1px; border-left:1px #000 solid"></div>
3.用hr标签 设置长和款属性达到目的

设置隐藏 ul li 隐藏
隐藏整个ul
<ul style="display:none">
<li>aaaaa</li>
<li>bbbbb</li>
</ul>

隐藏一个li
<ul>
<li>aaaaa</li>
<li style="display:none">bbbbb</li>
</ul>
display:block;
是让对象成为块级元素(比如a,span等)

display有很多对象,具体可以参考http://www.w3school.com.cn/css/pr_class_display.asp

一般都是用display:none和display:block来控制层的显示


CSS text-align 属性

设置 h1、h2、h3 元素的文本对齐方式:

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}


position:absolute是将div的位置固定的,也就是用浏览器的绝对位置的显示div,只是浏览器的解释稍微不同,所以位置也不同了
position: relative则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),
无父级则以 BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他 框。

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览 器的左上角为原始点,不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然 有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间 而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空 间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。其 实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的,而绝对定位是”相对于“最近的已经定位的祖先元素。

href="javascript:void(0)"

javascript:是伪协议,表示url的内容通过javascript执行。
void(0)表示不作任何操作,这样会防止链接跳转到其他页面。
这么做往往是为了保留链接的样式,但不让链接执行实际操作,具体的操作交给链接的onclick事件处理

CSS

标签:style   http   color   os   使用   io   java   strong   ar   

原文地址:http://www.cnblogs.com/plzdaye/p/3947872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!