注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Casa Baths N' shower

www.jacuzzi-bathtub.com

 
 
 

日志

 
 

div+css   

2009-10-06 10:59:15|  分类: 网站 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、IE浏览器默认文字大小为16px;

CSS教程学习-第2部分CSS基础篇

7.2 CSS基本选择器 第92页

1、css的作用就是设置网页主题内容BODY标记以内的各个组成部分的“表现形式”。例如:这一句文字的CSS表现形式为字体14PX,颜色蓝色,"背景色:灰色,在HTML属性中是无法对<span>标记使用bgcolor属性的”;

2、用CSS对HTML标记进行选择称为CSS选择器,应该就是CSS必须配合HTML使用的原因。

  • css基本选择器分为三种
    1. 标记、选择器:就是声明哪些HTML标记采用哪种CSS样式。
      • 如:P、标记、选择器,就是用于声明页面中所有<p></p>标记的样式风格。
      • h1{color:#000000;font-size:25px;}每个css选择器都要用{}括起来,“标记选择器”h1的“属性”color的“值”#000000;每一句以“;”结束为一句声明(也即:声明属性color的值是#000000,然后这个声明属于h1标记选择器)。
    2. 类别选择器:用“.”开头、后面是用户自定义名称并且第一个字符不能是数字,如:“.one”“.two”一个HTML标记可以使用多个类别选择器,如:<p class="one two">。
    3. ID选择器:用“#”开头、后面是用户自定义名称并且第一个字符不能是数字,一个ID选择器最多只能赋予一个HTML标记,如:“#span”<p id="span">,赋予给了许多段落p标记中的一个P,这个ID就不能再使用第二次了。ID选择器也不支持像类别选择器那样多风格同时使用。

在HTML中使用CSS的方法主要分为四种:

1、行内样式:即直接将CSS代码写在HTML标记中。如:<p style="color:#000; font-size:12px;">;

2、内嵌样式:即将CSS代码用<style type="text/css"></style>标记写在<head></head>之间。如:

<head>

<style type="text/css">

p{

color:#000;

font-size:12px;}

</style>

</head>

3、链接样式:就是将2、中style标记之间的CSS样式复制粘贴到一个记事本中,然后另存为扩展名是CSS的文件。

如:<head><link href="/1.css" type="text/css" rel="stylesheet"></head>

head标记之间的语句是固定格式,只需将1.css修改为自己创建的CSS文件名及所在路径。

4、导入样式:@import url(1.css)不懂在什么时候使用导入式合适;

☆重点:1、各种方式的优先级:行内样式>嵌入样式>外部样式(链接和导入样式);层叠特性优先级:行内样式>ID选择器>类别选择器>标记选择器。

2、外部样式优先级:外部样式中,出现在后面的样式>出现在前面的样式;

第102页其他优先级方式不常用。“我在写网页的时候,已经养成了一个习惯,先通过嵌入式CSS样式编写,在网页测试完成后再写进.CSS文件”

DW中新建CSS样式:菜单→窗口→CSS样式→控制面板右下方新建css样式。CSS属性面板右击选择器选择编辑进行CSS样式的修改。

☆重点:第9章 CSS的高级特性 第117页

9.1复合选择器

复合选择器就是由两个或多个基本选择器,通过不同方式连接而成的选择器。

  1. “div.class”交集选择器:是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集(将选中同时满足前后二者定义的元素,也就是包含在“标记选择器DIV”中的“类别选择器.class”下的元素才会被选中<div class="class">)。
  2. 并集选择器:是多个选择器通过逗点连接而成的也可以叫做集体声明。它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标记选择器、类别选择器、id选择器等)都可以做为并集选择器的一部分。div,h1,p{colo:red;}含义:所有div、h1、p标记下的字体颜色为红色。

第三种 后代选择器(也可以说是一种标记嵌套时使用的选择器)

例如:这句文字就是后代选择器的效果。其实直接把span设置CSS样式也是一样的,这样做的好处是当网页内容复杂时可以将一个CSS样式通过,交集选择器、并集选择器、后代选择器三种选择器的配合在多个标记中使用。

后代选择器非常常用,一定要理解用法。“我认为可以想象为资源管理器一样,嵌套就像一级一级的目录,更改了根目录其下所有的目录路径就都发生了改变,若只修改其中一个子目录只影响子目录下的目录而不会影响到根目录和其他目录,就很像后代选择器的效果。”

还有另外一种复合选择器,称为“子选择器”,也就是只对直接后代有影响的选择器,而对“孙子”以及多个层的后代不产生作用。P>span只对span内的元素起作用,对span下的标记无作用。

  • css的继承特性
    • 简单的说就是将各个HTML标记看作一个个容器
    • 其中被包含的小容器
      • 会继承包含它的大容器的风格样式。
    • 继承关系
      • 从继承 角度 考虑各个标记之间的“树”型关系
      • 树在123页
    • css继承的运用
      • CSS继承指的是子标记会继承父标记的所有样式风格;
      • 并且可以在父标记样式风格的基础上再加以修改
        • 产生新的样式,
        • 而子标记的样式风格完全不会影响父标记。像这里是li li li li{}也就是说一层一层的找每一对<><>折叠一下。
  • CSS的层叠特性:层叠特性不能和“继承特性”相混淆,二者有本质的区别,实际上,层叠可以简单的理解为“冲突”的解决方案。

第一段是单纯标记选择器:层叠特性的例子

第二段是标记+类别:这里P有定义,然而又定义了类别所有产生了冲突,CSS的解决方案是按照选择器的优先级、类别>标记,所以显示类别的设置。可以看到标记+类别有别于交集选择器。

第三段标记+ID+类别:这样排列的选择器的优先级是ID>类别>标记。

行内样式+ID+标记:优先级是行内样式>ID样式。这里引出另一段:行内样式>嵌入样式>{后面的外部样式>前面的外部样式}

两个或多个类别选择器不会冲突但是两个或多个类别选择器中的颜色属性值会冲突:优先级:前者purple优先。

总结:层叠特性:行内样式>ID选择器>类别选择器>标记选择器;层叠?应该就是一个<>符号中存在多个选择器时产生的效果,也就是通过优先级解决产生冲突的过程应该就是层叠了。

设置字体粗细

.ziticuxi{ font-weight:lighter;} /*字体粗细:normal正常、bold粗体、bolder加粗、lighter比正常粗细还细。多数浏览器只能支持bold和normal*/

☆重点:<b>标记和<strong>标记表面上都是加粗显示,但存在语义的区别,前者是一个单纯的表现标记,没有语义,而后者含有语义,表示“突出”和“加强”的含义。大多数搜索引擎都对网页中的<strong>标记很重视,因此如果即需要网页中的文字加以强调、突出,又希望文字不以粗体显示,则需要对<strong>标记使用“font-weight:normal”,这样可以恢复粗细(在浏览器中显示效果跟正常字体一样只是达到突出内容的效果,好像就为搜索引擎优化。)又不影响语义效果。这一段文字(并没有强调strong只能表示单词)很重要也是用的突出显示!

英文字母大小写转换属性:text-transform 不常用。控制文字大小:使用EM属性,font-size:3em;文字装饰效果:text-decoration 不常用;

常用:段落首行缩进:“text-indent”,设置文字间距:letter-spacing和word-spacing分别控制字母间距和单词间距。对于中文,需要设置letter-spacing属性。设置行高:line-height第136页 设置段落距离:margin!!!看来每一个封闭的元素都可以看做是一个盒子。

10.16 设置段落的垂直对齐方式 第138页

☆重点:在CSS中有一个用竖直方向对齐的属性vertical-align。在目前的浏览器中,只能对表格单元格中的对象进行竖直方向的对齐设置,而对于一般的块级元素,例如:div等,都不起作用。也就是说,如果一些文字在一个表格的单元格中,且对该单元格使用vertical-align:middle,那么该单元格中的内容将以垂直居中对齐,而如果文字放在一个DIV中,那么将不会有任何效果。

如果文字只有一行则设置块级元素的高度和行高line-height相同,就可以垂直居中但是多行无效。第139页(div内段落文本垂直居中对齐方式)直接引用书中代码。

这里的DIV区块设置了垂直居中。无效果!!

用CSS设置图像边框:border:1px red solid;缺一不可。

图文混排:主要是通过浮动设置文字环绕图片。

图片与文字的对齐方式:需注意字母对齐方式,第152页。

设置背景图像平铺:background-repeat:repeat:沿水平和竖直两个方向平铺,也是默认值。

no-repeat:不平铺,只显示一次。

repeat-x,-y:水平平铺和竖直平铺。

比较重要:设置背景图像的位置,background-position:left top;具体长度值见第160页3个表格。

背景图片相对浏览器的定位:background-attachment;

设置标题的图像替换:<h1><span>head line</span></h1>css样式部分:h1{background-image:url(123.jpg);}span{display:none;}这样做没办法加超级链接,找不到方法。除非h1不设置背景图像而是直接插入IMG,那就不是替换了,这个地方不是很明白。

h3标题文字(宽)

使用滑动门设置标题第166页 光盘中资料“第12章/12-11.htm”

所谓“滑动门”就是两个嵌套的元素,各自使用一个背景图像,二者中间部分重叠,两端不重叠,这样两端的花纹就被显示出来,中间部分的宽度可以自动适应,因此宽度变化时依然可以保证左右两端的图案不变。需要再阅读仔细理解。这一节需要了解后面的盒子大小的计算方法和padding,(盒子大小=content+padding+border+margin,h3有设定padding属性40px它的花纹部分是40px,通过padding从左上角开始显示出来图像(也就是说h3有背景图像,但是span也有背景图像如果h3不设置padding那么浏览器显示的是span的背景图像,然后当h3设置了padding也就是内容缩进了40px;自然就露出了H3的背景色这里是背景图片所以显示了H3的背景图片的内容),图像总宽度为339px;h3标题设置了宽度300px,根据盒子大小计算应该是300px+padding的40px=h3的总宽度340px;span没有设置宽度,背景默认宽度339px(这个地方因为span是h3里面的内容,它里面的文字内容并不多,那span的大小肯定不会超过H3的大小,而背景图像好象会根据内容的宽度自动隐藏直到符合最小的显示限度才会显示出来,;通过background-position:right;设置表现形式为右边开始显示、背景图像『好象就是这样一句css属性的定义把span左边的40px挤出去了从而不会显示』,显示图像的范围是padding-righ:40px,这里是span的背景图像通过padding-right:40px,显示的是span的背景图像,span的盒子大小是40+300,display是表现形式block是以块的形式展现;好像不对还不是很了解)。

  评论这张
 
阅读(373)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017