来自:衡庐科技 发布时间:2019/11/16 14:30:53 浏览次数:
CSS 概述:CSS 是什么?
CSS代表级联样式表。CSS是一种标准的样式表语言,用于描述网页的表示(即布局和格式)。
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS优势:CSS 能做什么?
1. CSS样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容,通过使用如下标签来表达"这是标题”这是段落”之类的信息
实例:
<h1>这是标题</h1>
<p>这是段落</p>
同时文档布局由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题,万维网联盟(W3C)在 HTML 4.0 之外创造出样式(Style),所有的主流浏览器均支持层叠样式表。
2. CSS 样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
css语法
语法构成
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
selector {declaration1; declaration2; ... declarationN }
选择器主要是需要改变样式的 HTML 元素。
每条声明是由一个属性和一个值组成。
属性(property)是希望设置的样式属性(style attribute),每个属性有一个值。属性和值被冒号分开
CSS示例
实例:设置div的背景颜色为粉色
div{
background:pink;
}
注:CSS声明总是以分号(;)结束,声明组以大括号({})括起来
实例:
.test{
width:350px;
height: 250px;
background: red;
text-align: center;
line-height: 200px;
font-size: 40px;
}
运行实例:
CSS 注释:
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束,
实例:
.test{
/*这是一个注释*/
width:600px;
height: 400px;
background: yellow;
text-align: center;
line-height: 300px;
font-size: 50px;
}
运行实例: