- 相关推荐
网页设计css教学
网页设计，是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。以下是小编整理的网页设计css教学，欢迎阅读，希望大家能够喜欢。
网页设计css教学
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
代码：
.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/
意，一定要指定容器的宽度，不然的话是没有用的。
注意word-break 是IE5+专有属性
语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
关于CSS网页样式设计方法
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法结见附》，这里就不展开描述。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如: width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写旌闲矗?胱邢溉啡夏阍贑SS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content?{?/*?declarations?*/?}?
fieldset.details?{?/*?declarations?*/?}?
网页设计div css为何加载失败
1、真正CSS加载失败
一、有时网页能完整打开网页布局完整，有时网页像没有CSS控制一样显示没有任何布局样式的网页。
造成此原因有空间IIS不够多、空间速度慢、浏览者网速慢等
二、网页打开显示完全没有CSS控制的原始显示。
造成此原因有链接CSS文件路径错误、CSS代码不兼容等
2、if造成失败
有的CSS制作时候可能用了使用if判断语句对什么浏览器调用什么CSS文件或CSS代码，而疏忽造成if调用的混乱，造成在某些浏览器上显示正常，有的浏览器不能显示CSS控制布局，解决方法好好检查自己造成CSS加载失败的if判断设置。
3、另类CSS加载失败
此类最为复杂可能本身的CSS代码写法有问题没有设置好造成在各浏览器显示不同布局差距效果，可以说是另类加载失败，我们这里可称为CSS hack。解决办法可以进入css hack教程了解与解决你的CSS加载失败问题。
【网页设计css教学】相关文章：
CSS网页设计技巧03-27
CSS让网页设计简单的方法12-11
网页设计中css怎么学习12-03
用Dreamweaver设计网页时组织CSS的建议11-26
提高CSS网页渲染效率的技巧12-04
如何用css进行网页布局03-20
网页制作教学设计11-30