CSS随记

CSS简史

1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯(Bert Bos)当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计CSS。

哈肯于1994年在芝加哥的一次会议上第一次展示了CSS的建议,1995年他与波斯一起再次展示这个建议。当时W3C刚刚创建,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。哈肯、波斯和其他一些人(比如微软的托马斯·里尔登)是这个项目的主要技术负责人。1996年底,CSS已经完成。1996年12月CSS要求的第一版本被出版

1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结果是1998年5月出版的第二版要求。

1998年5月W3C发表了CSS。之后CSS2.1修改了CSS2中的一些错误,删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。

从 2011 年开始 CSS 被分为多个模块单独升级,统称为 CSS 3。

参考资料:CSS历史-维基百科(英文)

引入CSS的四种方式

引入css的方式有四种, 我们目前常用的有三种。

内联样式

当我们在写html文件时, 又是需要少量的css做辅助工作, 那么我们可以在标签直接加入css的语法。
假如我们想给<p>添加红色边框, 那么我们可以像下面这样做:

<p style="border: 1px solid red;">通过内联样式给p标签添加红色边框</p>

通过<style>标签

若我们想对一个html文件中的多个标签应用css规则, 那么通过内联样式的写法就显的麻烦了。 为此我们可以通过<style>标签来引用css样式规则。

<style>在<head> 标签中写才有效。

<head>
  <style>
    /*CSS规则 在这里写 */
  </style>
</head>

通过<link>标签

当我们需要引入多个css文件或者css规则非常多时, 我们可以使用<link>标签。

<link rel="stylesheet" href="./css/example.css">

href的值时css文件的地址, 一个html文件可以引入多个css文件。

import url(path)

import url(path)方式也是引用css文件最常用的方式。path为css文件的路径。
与前三种方式不同的是, import url(path)方式是从一个css文件中引入其他的css文件。
假设有样式文件a.css,我们在此文件中引入其他css文件。

@import url(b.css);
@import url(c.css);

我们在a.css文件中又引入了b.css和c.css文件

清除浮动

我们知道<div>是块级元素,默认从上到下排列。现在看看这样的情况,一个div父元素中又两个div子元素, 这两个div子元素排在一行, 一个向左, 一个向右。通常的方法是给子元素一个向左的浮动, 一个向右的浮动。

<div class="parent clearfix">
  <div class="child first"></div>
  <div class="child second"></div>
</div>
div {
  padding: 2px;
  border: 2px solid green;
}
div.first {
  border: 1px solid red;
  height: 20px;
  float: left;
}
div.second {
  border: 1px solid red;
  height: 20px;
  float: right;
}

显示如下:
图片

可以看到父元素无法包住子元素, 那么用什么方法解决呢?我们可以给父元素设置clear: both来避免此类现象。
我们在上免得css规则中添加下面的代码:

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

添加之后的显示如下:
图片

从上面可以看出, 若想清除子元素浮动所带来的不好效果, 我们可以给父元素设置上面的css规则解决问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值