1.引入CSS样式表（书写位置）

行内式（内联样式）
内部样式表（内嵌样式表）
外部样式表（外链式）

（1）行内式（内联样式）

概念：

称行内样式、行间样式.

是通过标签的style属性来设置元素的样式

其基本语法格式如下：

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

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

案例：

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

注意：

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

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

概念：

称内嵌式

是将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中可以省略。
只能控制当前的页面
缺点：没有彻底分离

（3）外部样式表（外链式）

概念：

称链入式:是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

其基本语法格式如下：

<head><link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意：
- link 是个单标签
- link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

2.CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，

具体格式如下：

选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。

CSS基础——CSS样式的引入和规则【学习笔记】相关推荐

CSS基础-标签显示模式（display）【学习笔记】
标签的三种显示模式三种显示模式的特点以及区别三种显示模式的相互转化什么是标签显示模式什么是标签的显示模式? 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个作 ...
《python基础教程（第二版）》学习笔记基础部分（第1章）
<python基础教程(第二版)>学习笔记基础部分(第1章) python常用的IDE: Windows: IDLE(gui), Eclipse+PyDev; Python(comman ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
CSS基础（样式声明、引用（行内样式、内部样式、外部样式、导入样式）、样式优先级）
目录什么是CSS 为什么使用css css样式规则 css引用(行内.内部.外部link链入.导入式@import) css三种使用方法的区别 ***网页三大元素*** ***什么是CSS*** ...
CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点: 列表最大的特点就是整齐 .整洁. 有 ...
《零基础学Python》——极客时间——学习笔记
第二章 Python基础语法 Python程序的书写规则基础数据类型类型判断 type() 强制类型转换目标类型(要转换的数据) 变量的定义和常用操作习题题目: 练习一变量的定义和使用定 ...
Oracle DBA学习基础篇（一） Oracle体系结构学习笔记
这里是我通过Oracle DBA实战这本书学习的 Oracle体系结构,大部分是我对书中的内容做的总结,还有遇到不理解的知识点,通过查询资料做的整合.通过这篇博客希望可以让你对Oracle的一些内部原 ...
前阿里大佬干货分享，0基础小白，转行必看Python学习笔记（七）
Python学习笔记7 异常处理包和模块包和模块的一般操作导入操作的本质模块检索的路径导入模块的场景第三方包和模块的安装异常处理系统内部一开始已经内置了一些特定的错误场景,当我们触发了 ...
CSS基础（三）引入CSS的方式
在html文件中引入CSS有三种方式: 内联样式嵌入样式外部样式 1.内联样式也叫行内样式,顾名思义,就是在写html元素的那个行中直接引入CSS样式. 这种引入方式的优先级较高(对同一元素同时 ...

CSS基础——CSS样式的引入和规则【学习笔记】

1.引入CSS样式表（书写位置）

（1）行内式（内联样式）

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

（3）外部样式表（外链式）

三种样式表总结（位置）

2.CSS样式规则

CSS基础——CSS样式的引入和规则【学习笔记】相关推荐

最新文章

热门文章

CSS基础——CSS样式的引入和规则【学习笔记】

1.引入CSS样式表（书写位置）

（1）行内式（内联样式）

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

（3）外部样式表（外链式）

三种样式表总结（位置）

2.CSS样式规则

CSS基础——CSS样式的引入和规则【学习笔记】相关推荐

最新文章

热门文章

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