BlogJava-大漠驼铃-随笔分类-css

HTML连续英文字符串强制换行

草原上的骆驼 — Wed, 04 Aug 2010 09:38:00 GMT

大家都知道在table的某一格里插入文本时,如果是中文当然是没有问题,当到达指定宽度时会自动换行,但如果是英文或数字之类的就会有问题了.因为它是以空格为英文单词间的区别,但是如果输入一长串英文,中间不含空格时,表格就变形了.但事实table的style 里有一项可以让英文强制换行的,就是word-break,当把这项设为break-all时大家就可以看到效果了.

示例代码：

< table width="100%" style="word-break:break-all">

< td width="20%">

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

< /td>< td width="80%">< /td>< /table>

把这copy到body里预浏看看.

word-break还有两个选项:normal就是通常的,不设置时的效果了。

keep-all:则是和break-all相反,是不管什么字符在没有空格和换行符的情况下都不换行。

草原上的骆驼 2010-08-04 17:38 发表评论

CSS中的层叠和继承

草原上的骆驼 — Wed, 10 Mar 2010 12:12:00 GMT

元素被继承的原则：
1、影响元素的位置，边界，背景和边框的属性不会继承。
2、浏览器会使用它们自己的继承样式来格式化某些元素，比如标题（h1-h6）文字显示为粗体且字体较大，链接文字(a 元素)的颜色为蓝色等。这些元素相应的属性也不会继承它们祖先元素的属性。
3、当样式继承存在冲突时，采取就近原则。后代元素会继承距离自己最近的祖先元素的相应属性。

text-align:center在Firefox 浏览器中不起作用。如果使IE和Firefox中可以正确显示
margin-left:auto; margin-right:auto;

inhert继承
明确指定

div#menu{
border:2px solid black;
padding:5px;
background-color:#909090;
}
div#menu div{
border:inherit;
padding:inherit;
background-color:#DEDEDE;
}

border:inherit 明确指定继承父类的border

@import 规则

@import url("stylesheet1.css");
@import url("stylesheet2.css");

或者

@import "stylesheet1.css";
@import "stylesheet2.css";

@import 作用

CSS层叠：

确定度：多个样式直接应用到同一元素上的情况，例如：

test 确定度

p{color:red;}
p#para1{
color:blue;
}
p.normal{
color:white;
}
body{
color:yellow;
}

显示的颜色确实是哪一个规则？

选择符的确定度由4位逗号相隔的数字组成，形式为0,0,0,0. 这里分别用a,b,c,d代表四位数。
1 若样式由元素style属性确定而不通过选择符，a=1，否则a=0;
2 计算id选择符的字数，赋给b
3 计算属性选择符或者伪类的个数，赋给C
3计算类型选择符或者伪类的个数，赋给D
只要通过比较确定度的大小就可以判断出优先级的最高规则，比较方式是从左端的a位开始逐位比较，数值较大的确定度最高。

!import 声明
声音该属性比其他属性的优先级高

草原上的骆驼 2010-03-10 20:12 发表评论

Css中的度量

草原上的骆驼 — Wed, 10 Mar 2010 11:04:00 GMT

1、表示绝对长度的单位
in(inch, 英寸，1英寸=2.54厘米)
cm(厘米)
mm(毫米)
pt(point 点， css2.1中规定点相当于1/72英寸)
pc(pica, 12点字, 相当于12点)

2、相对长度值
em
ex
px

单位em表示元素自身font-size属性的相对值, 当元素font-size属性也采用em作为单位时, 这个值就是其父元素的font-size的相对值。

<div id="one">3 月10日15时，十一届全国人大三次会议举行记者会，由全国人大环境与资源保护委员会主任委员汪光焘、国家发展和改革委员会副主任解振华、环境保护部副部长张力军就节能减排和应对气候变化问题答记者问。新华网、中国政府网进行现场直播div>
<div id="two">女士们、先生们，下午好！十一届全国人大三次会议今天举行第三场专题记者会，我们非常高兴地请到了全国人大环境与资源保护委员会主任委员汪光焘；国家发展和改革委员会副主任解振华；环境保护部副部长张力军。请大家就节能减排和应对气候变化回答大家的提问。现在请各位记者提问。div>

div#one{
    font-size:12px;
    line-height:1.2em;
    background-color:#999;
    width:490px;
    }
div#two{
    font-size:12px;
    line-height:3em;
    background-color:#fff;
    width:490px;
    }

上图：规定字体的大小为12px, 两个P元素的行距分别为字体大小的1.2倍和3倍, 行距是上一行与下一行的距离。

使用em可以作为单位的数值在小数点后面可以拥有三位有效位，另外通过em单位可以达到外部元素根据内部元素大小动态变化的效果。

ex 相对于字符"X"的高度，这个值会随着X字体的大小和字体族的不同而不同。

px相对长度是像素，有些站点的元素会随着浏览器分辨率的变化而变化，因而可以使用em或百分比一类的单位。

草原上的骆驼 2010-03-10 19:04 发表评论

CSS 学习之一选择符

草原上的骆驼 — Wed, 10 Mar 2010 09:23:00 GMT

选择符就是一系列的模式，只要页面上有完全匹配这个模式的元素存在，样式就会自动应用到该元素上。比如P,h1等就是一个简单的元素。

Css语法：
一个简单的选择符包含一个通用的选择符或是一个类型选择符，它的后面跟有0个或者多个id选择符、属性选择符或者伪类，三者顺序可以任意。

一个选择符可以由一个或者多个简单的选择符构成，中间用连接符相隔。

连接符可以是(空白，大于号> 加号+)

基本的选择符：

1 通用的选择符

*{
background-color:red;
}

* .title{
border:1px solid;
}

.title{

border:1px solid;
}

类型选择符：(一般为html元素的名称)

h1{
font-size:9em;
color:#999FFF;
}

p{
margin:0;
border:2px solid;
}

组选择：

h1{
font-size:10px;
color:#999;
}

h2{
font-size:10px;
color:#999;
}

p#title{
font-size:10px;
color:#999;
}

#hutitle{
font-size:10px;
color:#999;
}

上面的可以用以下组选择符来代替(中间用（，）来区分)

h1,h2,p#title,#hutitle{
font-size:10px;
color:#999;
}

id(#) 和 class(.) 选择符

1 id 选择符
id 是唯一的，可以唯一的标识一个元素。

<h1 id="h1Title">开学通知h1>
<p id="pContent">请同学们先到教务处来报道p>
<h1 id="h2Title">开课通知h1>
<p id="p2Content">好好学习Cssh2>

h1#h1title{
color:white;
background-color:silver;
}
p#pContent{
color:yellor;
background-color:maroon;
}

只改变特定的元素。

class 选择符

class属性不要求唯一而id属性要求唯一，多个元素可以共享一个class的值，而且多个元素可以设置多个class的值.

<h1 id="h1Title" class="h1Title">开学通知h1>
<p id="pContent" class="pContent">请同学们先到教务处来报道p>
<h1 id="h2Title" class="h2Title">开课通知h1>
<p id="p2Content" class="pContent">好好学习Cssh2>
<p >每天学习一章节，早点把css学会h2>

h1.h1Title{
color:white;
background-color:silver;
}
p.pContent{
color:yellor;
background-color:maroon;
}

h1.h2Title{
color:red;
}

多重class
id 属性是唯一的，class属性是多对多的关系，同一个class也可赋给多个元素，一个html可以有多个相同的class。

a.class1{
font-size:12px;
}
a.class2{
color:red;
}

上面这种css会对所有属于class1或者class2的a元素进行作用，而如果只对同时对class1 class2的a元素有作用只能是下面的方式

a.class1.class2{
color:red;
}
或者

a.class2.class1{
color:red;
}

是选择class还是选择id?

如果是给任意数量、任意类型的元素指定class属性，而一个id属性值只能赋值给唯一的元素。

草原上的骆驼 2010-03-10 17:23 发表评论

BlogJava-大漠驼铃-随笔分类-css

HTML连续英文字符串强制换行

CSS中的层叠和继承

Css中的度量

CSS 学习之一 选择符

CSS 学习之一选择符