黑马程序员技术交流社区

标题: 手把手教你玩转CSS——入门 [打印本页]

作者: 沐夕风 时间: 2018-9-15 00:32
标题: 手把手教你玩转CSS——入门
本帖最后由沐夕风于 2018-9-15 00:46 编辑

我们先来说说html的局限性：

说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，

比如<h1>表明这是一个大标题，用<p> 表明这是一个段落，用<img> 表明这儿有一个图片，用<a> 表示此处有链接。

很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。

这个是一个外国比较早的购物网站[attach]250010[/attach]

有些人就忍受不了了，你就不能把自己打扮得漂亮一点吗？

HTML说，我试试.....如果要改变下高度或者变一个颜色，就需要大量重复操作:给行更改高度只能一行一行的更改：

</tr>

</tr>

</tr>

</tr>

</tr>

这样重复给值就太过繁琐。

所以：

HTML满足不了设计者的需求
操作html属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

CSS 网页的美容师

让我们的网页更加丰富多彩，布局更加灵活自如。
CSS的最大贡献就是：让 HTML 从样式中脱离，实现了 HTML 专注去做结构呈现，样式交给css

而且。。。。。 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师。

CSS初识

概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表（书写位置）行内式（内联样式）

概念：
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式

其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

案例：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

注意：
- style其实就是标签的属性
- 样式属性和值中间是:
- 多组属性值之间用;隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
缺点：
- 没有实现样式和结构相分离

内部样式表（内嵌样式表）

概念：
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
其基本语法格式如下：

<head><style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }</style></head><style> div { color: red; font-size: 12px; }</style>

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type="text/css" 在html5中可以省略。
- 只能控制当前的页面
缺点：
没有彻底分离

综合案例<style> /*选择器{属性:值；}*/ p { color:#06C; font-size:14px; } /*文字的颜色是蓝色*/ h4 { color:#900; } h1 { color:#090; font-size:16px; } body { background:url(bg2.jpg); }</style>
外部样式表（外链式）

概念：
      称链入式
      是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，
      通过link标签将外部样式表文件链接到HTML文档中
其基本语法格式如下：

注意：
- link 是个单标签。

CSS的样式表，你们学会了吗？看看下面这张图，你们就知道CSS的强大功能作用啦~~~~~

222.jpg (74.63 KB, 下载次数: 3)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2