初识CSS

2018-06-03 本文已影响0人 HDhandi

认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。

CSS的优势

缩减页面代码，提高访问速度
结构清晰，有利于SEO搜索引擎优化
缩短改版时间，对网站的重构有很好的支持
弥补HTML语言的不足

CSS 语法

选择符 { 属性：属性值 }
```
例：p { font-size:12px; color:red; }
```
说明：

1、每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2、属性必须放在花括号中，属性与属性值用冒号连接；
3、每条声明用分号结束；
4、当一个属性有多个属性值的时候，属性值与属性值部分先后顺序。
5、在书写样式的过程中，空格、换行等操作不影响属性显示。

CSS新建格式

1. 内部样式表

语法

  <style type="text/css">
        <!-- css语句 -->
  </style>

说明

使用 style 标记创建样式时，最好将该标记写在<head></head>中。

2. 内联样式

语法

  <div style="属性1:值1; 属性2:值2; 属性3:值3;……" ></div>

说明

直接写在HTML标签style属性的属性值里。

3. 引用外部样式表文件（两种方式）

1）直接引用（link）

  <link href="目标文件的路径及文件名全称" rel="stylesheet" type="text/css" />

使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。

href： CSS文件的路径及文件名全称
rel：用于定义文档关联，表示关联样式表
type：定义文档类型

2）导入（@import）

  <style type="text/css">
        @import url("目标文件的路径及文件名全称");
  </style>

@和import之间没有空格；
url和小括号之间也没有空格；
括号内部加引号，必须以分号结束。

4. 样式表优先级说明

内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写顺序有关，后书写的优先级别高。