您的位置：首页 > Web前端 > CSS

CSS学习01-概述

2017-11-08 21:20 309 查看

一、什么是CSS

CSS指层叠样式表 (Cascading Style Sheets)，用于给HTML页面标签添加各种样式。

1.样式

样式定义如何显示 HTML 元素。

HTML 标签原本被设计为用于定义文档内容。通过使用

<h1>、<p>、<table>

这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

2.样式表

样式通常存储在样式表中。

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

所有的主流浏览器均支持层叠样式表。

3.层叠

多重样式将层叠为一个。

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

二、CSS和HTML的结合方式

1.行级样式表：采用style属性来完成。

2.内部样式表：采用

<style>

标签来完成。

3.外部样式表：采用外部的css文件完成，用

<link></link>

标签来引入。

三、CSS的导入方式

1.style属性方式（行内方式）：利用标签中style属性来改变每个标签的显示样式。如：

<p style="background-color:#ff0000;color=#ffffff">内容</p>

2.style标签方式（内嵌方式）：在head标签中加入style标签，对多个标签进行统一修改。如：

<head>
<style  type="text/css">p{color:#ff0000;}</style>
</head>

3.链接方式：head标签中的link标签来实现，前提是先要有一个已定好的css文件，可以引进多个css文件，重复样式以最后进来的css样式为准。如：

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

4.导入方式：有一个css文件，网页一部分用的到

url括号后面必须加分号结束，如果导入的与本页面定义的重复，以本页面为准。如：

<style type="text/css">
@import url(css_3.css);
div{color:#ff0000;}
</style>

四、CSS样式优先级（层叠次序）。

由上到下，由外到内，优先级由低到高。

1.行级（内联样式）>内部（内部样式表）>外部（外部样式表）

2.id>类选择器>标签选择器（无论写在内外）

3.就近原则（定义的位置）

4.引入多个选择器 class=”1 2 3”（空格隔开）

五、CSS中的单位

1.绝对单位：1in,2.54cm,25.4mm,72pt（点或磅）,6pc（派卡）。

2.相对单位：px（像素）,%（相对于周围字体）em（十二个点）。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航