BTC-CS-HTML-01-第5章 CSS基础知识 .pptxVIP

第5章 CSS基础知识本章目标了解CSS的概念及发展史掌握CSS的基本语法掌握CSS选择器掌握CSS创建方法掌握CSS常用属性，并灵活运用这些属性设计页面样式CSS概述CSS简介CSS (Cascading Style Sheets，层叠样式表，也称作级联样式表)用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。1996年通过W3C审核认证，并推荐使用。CSS解决了网页界面排版布局的难题。HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)CSS概述CSS发展史CSS经历了CSS1、CSS2、 CSS2.1、CSS3，CSS3是正在进行中的标准。1996年12月17日，CSS1正式推出,CSS1中主要定义了具体的颜色、字体、文本样式、外边距、边框、背景等最基本的样式。1998年5月12日，CSS2正式推出，CSS2定义了许多高级特性（如，浮动和定位）以及一些高级的选择器（如，子选择器、相邻同胞选择器、通用选择器）。 2010 年，推出了一个全新的版本CSS3。CSS3是CSS规范的必威体育精装版版本。CSS概述 CSS特点在制作网页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。可以用多套样式,使网页有任意样式切换的效果。降低服务器的成本等。CSS概述 CSS优势页面表现力加强HTML标签的外观样式比较单一。字体颜色只有黑白，字体类型和大小无变化，而CSS可以更加精确地控制网页内容的格式。提高页面浏览速度传统的HTML中控制网页布局样式比较麻烦，倘若引入CSS网页布局将会事半功倍，大大缩减页面代码，提高页面浏览速度，缩减带宽成本。内容与样式的分离将设计部分剥离出来放在一个独立样式文件中，可以减少网页无效的可能，缩短改版时间，只要简单地修改几个CSS文件就可以重新设计一个有成百上千页面的站点，方便团队开发。CSS语法选择器（Selector）{Property ：Value; 属性1：属性1的值; 属性2：属性2的值; ……….}CSS基本语法CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。CSS语法body{ background-color:red; }CSS基本语法选择器（Selector）指这组样式编码所要针对的对象。可以是一个HTML标签，如body、h1；也可以是定义了特定id或class的标签。属性（Property）指这组样式要设置对象的属性样式。对于每一个HTML标签，CSS都提供了丰富的属性样式，如颜色、大小、定位、浮动方式等。值（Value）是指属性的值。形式有两种，一种是指定范围的值，如float属性，只能用left、right、none三种值；另一种为数值，如width能够使用0~9999px或其他数学单位来指定。CSS语法 /*这是多行注释，CSS文件名为：test.css功能描述：定义样式*//*单行注释 样式规则 应用于段落p*/p{ background-color：red; /*行尾注释 定义背景颜色*/ font-size:10px; /*行尾注释 定义字体大小*/ color:black; /*行尾注释 定义字体颜色*/}CSS注释注释即代码的解释和说明，一般放在代码的上方或者尾部。CSS注释以“/*”开始，以“*/”结束。CSS语法CSS编辑方式主要有两种：第一种是在HTML文件中直接编写CSS规则；在指定的某个元素的style属性直接赋值；在head标记对中，通过style标记包含。第二种是在单独的文件中编写CSS规则，然后在需要使用此应用规则的HTML文件中引用此CSS文件。在单独的文件中编写CSS规则，这种文件我们称之为CSS文件，是一个纯文本文件，文件的后缀名为.css。在使用此应用规则的HTML文件中引用此CSS文件即可，实现了内容与样式的分离。CSS语法htmlhead titlemy first page/title style type=text/css /* 选择了页面中的body元素作为操作对象 */ body { /*属性和属性值，设定网页的背景色为红色*/ background-color: red } /style/headbody 山东浪潮优派科技教育有限公司欢迎您/body/htmlCSS语法案例CSS语法位置-大小-文字系列 -背景 - 其他 例如：.class{width:200px;height:100px}。例如：padding,margin,font等复合属性CSS编写规范CSS属性书写规范：书写顺序按照元素模型由外及内，由整体到