Web开发教程之CSS

1、CSS:层叠式样式表,对布局、字体、颜色、背景和其他图文效果实现更加精确的控制
规则

2、继承性样式表的规则可以从母体延伸到子体,如<b><i>haha</i></b>对于<i>标签没有设定样式,但因为<i>位于<b>中,所以他将可以继承母体<b>设定样式。

3、将样式表加入到网页中方法有四种:
植入样式表:所有的样式表信息都位于HTML文件的顶部,与<body>分列,对网页一次性执行该规则
            type="text/css":设定采用MIME(多用途互联网邮件扩展,一种电子邮件技术规范),这样写之后,不支持            css的浏览器就会忽略样式表。
            注释标签<!--and-->更重要,在一些老的浏览器中及时设定了type="text/css"属性也不能忽略样式表继续执            行下面的命令,而且还会显示样式表的代码,而使用注释标签可以避免这种情况。
链接到样式表:将多个HTML文件都链接到一个中心样式表文件,这个外部样式表文件将设定你所有网页的规则,如果改变              样式表文件中的某一细节,所有的页面都会随之改变。
               使用方法:产生一个普通网页,不是使用<style>规则,而是在<head>中的使用<Link>标签如:
  <head>
  
  <title>
   <Link rel=stylesheet href="mystyles.css" type="text/css">
  </title>
  </head>
  使用时链接样式表无需注释标签,现在还要生成一个额外的样式表文件,暂时命名为mystyles.css,该文  件中内容如 H4{color :green;font-size:37px;font-family:impact}
      P{text-indent:1cm;background;yellow;font-family:courier}
  href属性中可以选择相对或者绝对URL
输入样式表:与链接法相似,不同之处在于:链接法不能同其他方法使用,但是输入法可以
            在<style>内的注释标签中可以加入@import url(company.css);
     当植入样式表和外部样式表产生冲突时,会按照植入样式表表现网页的内容

加入样式表:直接在HTML中加,在<body><h1 style="color:orange;font-family;impact">hahahaha</h1></body>

4、分类引用 :p.first{color:green}
       <p class=first>哈哈</p>
       或者生成任何不加HTML标签的分类:.first{color:green}  然后将class=first用于任何Html标签处,而设       定的文字将以绿色显示

5、按名称调用字体:如h2{font-family:helvetica,impact,sans-serif}首先寻找在计算机中安装的字体helvetica,找到则使用它,找不到则移向下一个字体(impact),如果这种字体也没有安装,则移向第三种字体(sans-serif),sans-serif参数是浏览器可以依据的最后一种参数,他告诉浏览器使用任何一种缺省的sans-serif字体。
       如果一种字体的名称不只是一个单词,则用引号包含该字体名称


6、字号控制:使用font-size可以对文字的尺寸进行无限的控制,如p{font-size:16pt}

7、字体风格:斜体字:h3{font-style:italic}  粗体p{font-weight:bold},可用数值加粗,正常字体值400,900是加粗字体的最大值

8、文字修饰(text-decoration):下划线,上划线,删除线,链接不以下划线形式显示

9、字间距:字体之间加入更大的距离:h3{word-spacing:10px}、字母间距h3{letter-spacing:10px}
 
10、行高:控制刚刚之间的垂直距离:b{line-height:16pt}、b{font-size:12pt;line-height:2}这里行高将是24点、 b<font-size:10pt;line-height:140%>这里行距是14points。

11、文字对齐:h4{text-align:center}只用于块内容,left,right,center;

12、控制垂直对齐:h4{vertical-align:top}

13、文字缩行:只应用于整块的内容,p{text-index:40%}该属性只用于整块的内容,如果被赋予一个负值,则文字第一行起始位置比其正常位置还偏左。

14、在HTML中,背景图像会随页面的滚动而滚动,可以利用CSS的固定背景属性,建立不滚动的背景图像,即页面滚动时,背景图像还是可以保持固定的,如body{background-attachment:fixed;background-image:url(background.gif)}

15、当一个要素被隐藏后,他仍然要占据浏览器窗口中的原有空间,所以你将文字包围在一幅被隐藏的图像后面,那么,其显示效果将是文字包围着一块空白区域。h4{visibility:hidden}


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值