正文

CSS插入XHTML方式:2012-11-22 17:16:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/edwardguo/53900.html

分享到:

外部样式表-独立的一个文件(myStyles.css)


<head><link rel="myStyles"
type="text/css" href="样式表的URL"/></head>


内联样式表


<h1
style="color:red;">……</h1>


嵌入式样式表


<head><style
type="text/css">…………<style></head>


<head><style type="text/css">@import
url(myStylses.css);<style></head>


——在嵌入表中引入外部表


link


@import——当你的网页须要引入多个外部CSS文件时.你可以运用
link引入一个CSS,然后在这个CSS文件中用@import形式引入其它多个 CSS文件



  • 样式继承

不可继承——margin、padding、border、background


可被继承——


计算值继承——front-size



  • 样式层叠

优先级



浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)


排放次序判断




  1. 找出选择器对特定元素的所有声明


  2. 根据样式声明重要性(!import)和来源进行优先级排序——浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)


  3. 特殊性排序-制定更详细的选择器将覆盖更一般的选择器。特殊性:a(内联)>b(id选择器数量)>c(属性(类、伪类)选择器数量)>d(元素(元素、伪元素)选择器数量)


  4. CSS规则在文档中出现顺序——后出现的>先出现的>@import(样式表本身规则前出现)

z-index


z-index在设置了position=absolute/relative时有效


值较高的覆盖较低的


z-index=-1时元素在默认文本下


<style
type="text/css">


middle{position:absolute;left:60px;top:60px;z-index:2;background-color:orange;}


</style>



  • 效果控制:

制定裁剪区域(clip)


<style
text="text/css">


img{position:absolute;clip:rect(50px 200px
auto auto);}


</style>


设置元素可见性


display——none、block(块级)、inline(内嵌级)


visibility——visible(可见)、hidden(影藏)、inherit(继承;默认值)


两者的区别在于visibility属性定义的元素任然保留原来的显示空间



  • CSS控制的区域:
单位











































长度单位


绝对长度——用于打印输出设备


mm



in



pt



pc


picas


相对长度——浏览器的系统默认值


em


ems 当前字体中M字母宽度


px


像素


ex


exes当前字体中X字母高度


颜色单位


百分比


rgb


整数值


rgb


十六进制


#fc0eab;#c96==#cc9966


颜色名


aqua水绿/black/blue/ fuchsia紫红/ gray/ green绿/lime浅绿/ maroon/navy深蓝/ olive橄榄/purple/red/silver/teal深青/white/yellow/transparent(透明


URL单位




字体


font-style(倾斜程度)normal、italic=oblique


font-variant(字体变形)normal、small-caps


font-weight(粗细)100、200、300、400=normal、500、600、700=bold、800、900、lighter、bolder


font-size(大小)xx-small、x-small、small、medium、large、x-large、xx-large


font-family(字体名)times new Roman、Arial、Verdana


元素内容文本属性


text-indent(首行缩进)


text-algn(对齐方式)left、right、center


vertical-align


text-decoration(文本装饰)none、underline、overline、line-through、blink


text-shadow(文本阴影)none、color值


line-height(行高)normal、auto


word-spacing(词间距)——空格为词的分割线


letter-spacing(字间距)


text-transform(大小写形式)capitalize(词首大写——空格为分隔符)、uppercase、lowercase、none


white-space
normal pre nowrap(不换行)


背景和颜色


color 16进制、rgb()、颜色名字


background


#idDiv{bachground:red url(rdl_cup.jpg) no-repeat scroll right
bottom}


background-color transparent


background-image


background-repeat repeat no-repeat repeat-x
repeat-y


background-position {1,2}
top/center/buttom||left/center/right


background-attachment scroll fixed


定位


在正常流中,文本元素按从上到下、从左到右的格式布局。——块级元素从上到下,内嵌元素从左到右。


正常流中的元素影响其相邻元素的位置


容器快




  1. 初始化容器快——根元素(html)


  2. 块级元素、表格单元的内容区——静态或相对定位的费根元素


  3. 不是静态定位(relative、absolute、fixed)的祖先元素——绝对定位的非根元素——祖先元素为块级元素:容器块扩充到该元素的padding边缘;祖先元素是内嵌元素的容器快为内容区;无祖先元素的为初始化块

定位(position top、right、bottom、left



  • 静态定位(static)——系统默认,按照它们在HTML的出现顺序生成。
  • 相对定位(relative)——相对于他在正常情况下的默认位置。去而留其位(不影响文本流中接下来的其它层的位置),可能覆盖其它元素
    <style
    type="text/css">
    div{position:relative;height:80pc;width:80px;}
    .style1{left:30px;top:30px;border:1px solid
    black;margin-bottom:10px;background-color:#acd373;}
    </style>
  • 绝对定位(absolute)——孤立(脱离流)、空间被释放、相对其容器块定位
    <style
    type="text/css">
    .style{position:absolute;top:10px;left:10px;}</style>
    溢出(overflow)
    visible——默认值;不裁剪、无滚动、强制显示全部内容
    hidden——裁剪多余内容、
    scroll——裁剪多余内容、有滚动
    auto


<style
type="text/css">


<div{width:250px;height250px;position:absolute;overflow:scroll;}


</style>



  • 固定定位(fixed)——孤立、相对视口=viewpoint(浏览器窗口)定位——永远显示在视区内。

浮动(float)——none、left、right


功能:多列的网页布局、从无序列表创建导航工具条、不使用表格而创建内饰表格的对齐方式




  1. float!=none时,元素被视为块级元素


  2. 浮动文本类型元素必须制定width


  3. 浮动元素margin不会重合


  4. 浮动元素在内容区内,不进padding


  5. 相邻的浮动元素向同一方向移动——直到碰到父级内边缘或前面的浮动元素


  6. 超过容器宽度的元素向相反方向浮动


  7. 浮动的内嵌元素顶部低于前面的块级元素


  8. 浮动元素顶部低于前一浮动元素


  9. 清除浮动clear:none/left/right/both

<style>img
{float:right;margin:2opx;


clear:ri}


</style>


布局


网页鈥斺攃ss表现形式


元素盒:每个元素都会产生一个矩形盒子围绕在元素类容之外


元素的背景(颜色和图)在内边距区域可见,且延伸到边框下


元素盒总宽度=margin+border+padding+width


网页鈥斺攃ss表现形式


padding—防止边框挤压内容,


背景填充padding;padding不重合


border:1个到4个围绕在元素内容和内边距的线


边框样式


none


double


groove


ridge


inset


outset


dotted


>dashed


solid



  1. 非可替换内嵌元素不受border影响
  2. 可替换元素受影响
  3. 上、右、下、

<h1
style="border:.5em(border-width) outset(border-style) red(border-color)"hello</h1>


margin{margin-top margin-right
margin-bottom margin-left}:




  1. 外边距是透明的,其上显示的是父级的背景。


  2. margin为负数时,突破父级元素与页面其它元素重叠


  3. 正常文档流中相邻块级元素垂直外边距重合——取其大。


  4. 浮动元素、绝对定位元素、内嵌元素垂直外边距不会重合

h1{margin:3px
20px 3px 20px;}


网页鈥斺攃ss表现形式width和height:——可以设置块级元素和内嵌可替换元素(图片);不可以设置内嵌文本元素=不可替换元素(文本)


不可替换元素+display:block—>块级元素


列表格式


项目图片


list-style-image


项目符号


list-style-type disc/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper-aloha/none

阅读(1311) | 评论(1)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

loading...
您需要登录后才能评论,请 登录 或者 注册