网页设计与制作教程——Web前端开发 第7版 课件 第4章 CSS3基础.pptx

CSS（CascadingStyleSheets）中文名为级联样式单、层叠样式单，简称为样式表，CSS是用于定义如何显示HTML元素，控制网页样式并将样式与网页内容分离的一种标记性语言。第4章CSS3基础4.1CSS简介

目录第4章CSS3基础4.1CSS设计与编写原则4.2在HTML中使用CSS的方法4.3CSS的两个主要特性4.4CSS的基本语法4.5CSS的选择器4.6属性值的写法和单位4.7HTML文档结构与元素类型4.8实训——制作内容详情页习题4

4.1CSS设计与编写原则1．文件夹结构命名规范存放CSS样式文件的文件夹一般命名为style或css。2．CSS样式文件的命名规范这个文件一般命名为style.css或css.css。

4.1CSS设计与编写原则3．CSS选择符的命名规范所有CSS选择符必须由小写英文字母、“_”下划线、数字组成，必须以字母开头，不能为纯数字。与程序设计语言中的变量名相似。读者可以参考表4-1中的样式命名。

4.1CSS设计与编写原则

例如以下定义页面导航菜单选择符的CSS代码：#nav_logo{…}#nav_logo_ico{…}4.1CSS设计与编写原则

4．CSS代码注释在CSS中添加注释非常简单，它是以“/*”开始，以“*/”结尾。（1）结构性注释例如以下代码：/*header（定义网页头部区域）----------------------------------*/4.1CSS设计与编写原则

（2）提示性注释例如以下代码：.news_listlispan{ float:left;/*设置新闻发布时间向左浮动，与新闻标题并列显示*/ width:80px; color:#999;/*设置新闻发布时间为灰色，弱化发布的时间在视觉上的感觉*/}4.1CSS设计与编写原则

非常棒的你！又开始学习新的内容《网页设计与制作教程Web前端开发第7版》刘瑞新主编配套资源

在HTML文件中使用CSS的方式有4种：行内样式、内部样式表、链入外部样式表和导入外部样式表。第4章CSS3基础4.2在HTML中使用CSS的方法

目录第4章CSS3基础4.1CSS设计与编写原则4.2在HTML中使用CSS的方法4.3CSS的两个主要特性4.4CSS的基本语法4.5CSS的选择器4.6属性值的写法和单位4.7HTML文档结构与元素类型4.8实训——制作内容详情页习题4

4.2.1行内样式行内样式的格式为：标签style=属性:属性值;属性:属性值……/标签【例4-1】使用行内样式设计网页。本例文件为4-1.html。4.2在HTML中使用CSS的方法

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title个人博客网站/title/headbodydivstyle=width:800px;!--行内样式定义的div样式--h3style=font-size:25pt;color:blue;text-align:center;如何快速建立自己的个人博客网站/h3!--行内样式定义的h3样式，不影响其他h3标题--4.2在HTML中使用CSS的方法

pstyle=text-align:center;imgsrc=images/blog.jpgstyle=width:200;height:160;border:1pxsolid;color:skyblue/ppstyle=font-size:11pt;text-indent:2em;各大博客门户网站相继关闭，做一个独立的个人博客网站是将来的趋势。越来越多的个人站长倾向于独立建站，那如何快速建立自己的个人博客网站呢？/p!--行内样式定义段落文字为11磅大小，段落首行缩进2字符--/divp个人博客应该简单、优雅、稳重、大气、低调，采用HTML5+CSS3设计，nav导航实现鼠标悬停渐变显示英文标题的效果，banner部分，选择大图作为背景，利用CSS3中的animation属性结合文字图片实现文字从左到右的渐变效果。/p!--本段没有使用行内样式，段落采用默认排列--/body/html4.2在HTML中使用CSS的方法

4.2在HTML中使用CSS的方法

4.2.2内部样式1．内部样式表的格式内部样式表的格式为：styletype