web网页搭建:HTML与CSS(三)

CSS基础样式

  • 生成css独立文件并在html中引用

<head>
       <style type="text/css">
       //css代码
       </style>
......

可改为:

<head>
       <link type="style/css" rel="stylesheet" href="style.css">
......

说明:
1.type:文件类型
2.rel==relation:指明链接的文件与html的关系
3.href:文件路径

  • 代码格式

1.对元素属性设置

h1,h2{
     font-family: sans-serif;
     color:gray;
     }

2.对类中元素属性设置

h2.green{     //若对类中所有元素设置,则改为: .green
  color: red;
}

说明:
green为类名,h2为该类的一个元素。可为一个元素设置多个类,格式如下:

<h2 class="green undert rect">...</h2>

3.属性的继承
将整个html看成一棵树的话,假如对其中某个元素p设置一属性,则p元素中的元素都会从p中继承了这一属性。css总是会优先匹配最特定的设置。

  • 字体与颜色

1.字体
字体代码格式:

font-family:verdana,geneva,arial,sans-serif;

说明:后三种字体依次为备用字体,按顺序优先级
自定义字体:

@font-face{
font-family: "new font";      //自定义字体名称
src: url("http://.....");          //url链接
}

字体大小设置技巧(便于缩放,若设置为px格式,缩放会改变格式):

body{font-size: small; }
h1{font-size: 150%; }     //或 h1{font-size: 1.5em; }   

说明:默认字体为small,其他基于small改变比例,可缩放不变形
2.颜色
css中颜色采用rgb模式,颜色指定方法有:
①直接指定

background-color: silver;

②rgb百分比指定

background-color: rgb(80%,40%,0);

③rgb值指定(0-255)

background-color: rgb(204,102,34);

④十六进制码指定

background-color: #cc6600;  //cc,66,00依次为红蓝绿
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 1,857评论 0 17
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 9,431评论 2 17
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,085评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,037评论 1 4