3.1 css概述-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.1 CSS概述 PART 01 什么是CSS 主要内容 CONTENTS PART 03 网页引入CSS的方法 PART 02 CSS的基本语法 2 什么是CSS CSS 指层叠样式表 (Cascading Style Sheets)，简称样式表，最初提出于1994年，1996年12月CSS第一版本由W3C组织发布，到目前为止版本有CSS1.0、CSS2.0、CSS3.0，与采用表格进行布局的网页相比，采用CSS+DIV进行网页布局有三大显著优势： 1.表现和内容相分离 所谓内容是通过HTML文件存放网页相关信息，表现是通过CSS将样式设计部分剥离出来放在一个独立样式文件中，使页面对搜索引擎更加友好。　　 什么是CSS 2.提高页面浏览速度　 对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器不用去编译大量冗长的标签。　　 3.易于维护和改版 相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，只要简单修改几个CSS文件就可以重新设计整个网站的页面。 CSS的基本语法 CSS 语法规则集由选择器和声明块两个部分组成，下面以h1选择器设置颜色和字号两种样式为例子，来分析其CSS语法的详细结构，如下图：　 CSS的基本语法 包含一条或多条声明，声明之间用分号分隔。 每条声明由一个属性和一个值组成，属性和值之间用冒号分隔。 所有声明块通过花括号括起来，形成当前选择器的CSS样式。 3位或6位十六进制值表示的颜色代码：3位各用1位表示红绿蓝三原色的值，6位各用2位表示红绿蓝的值。 声明块 通过选择器选中需要改变样式的HTML元素或元素组合。 CSS 选择器 Link方式加载 网页引入CSS的方法 <style type="text/css"> @import url( “外部样式表路径”); </style> Link方式加载 　所谓外部样式表是专门创建一个CSS文档来存放网页元素的所有样式内容，扩展名为.css。 <link href="外部样式表路径" rel="stylesheet" type="text/css" /> @import方式加载 一、外部样式表 7 网页引入CSS的方法 　当单个网页文档需要特殊的样式时，可以使用内嵌式样式表，创建的方式是使用<style>标签在文档头部定义内嵌式样式表，简称内嵌式。 加载方式 二、内嵌式样式 <style> p { font-family:"宋体"; font-size:20px; } </style> 网页引入CSS的方法 行内式也称内联样式，这种方式由于内容和样式在一起，违背结构与表现分离的原则，不提倡过多使用，但它拥有最高的优先权，它优先于内嵌式样式表、外部样式表或浏览器的默认样式 加载方式 二、行内式样式 <p style="font-family:'宋体';font-size:20px;"> 利用行内式设置p标签样式 </p> 感谢观看 $