网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-在HTML中使用CSS的方法.pptx

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

目录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=text/css选择符1{属性:属性值;属性:属性值…}/*注释内容*/选择符2{属性:属性值;属性:属性值…}…选择符n{属性:属性值;属性:属性值…}/*注释内容*//stylestyle…/style标签对用来说明所要定义的样式。type属性指定style使用CSS的语法来定义。4.2在HTML中使用CSS的方法

2．组合选择符的格式其格式为：styletype=text/css选择符1,选择符2,…,选择符n{属性:属性值;属性:属性值…}选择符a,选择符b,…,选择符m{属性:属性值;属性:属性值…}/style4.2在HTML中使用CSS的方法

【例4-2】使用内部样式设计网页。本例文件4-2.html在浏览器中的显示效果如图4-3所示。4.2在HTML中使用CSS的方法

!DOCTYPEhtmlhtmlheadmetacharset=utf-8title个人博客网站/titlestyletype=text/cssbody{font-size:11pt;}/*设置主体字体大小*//*设置区块宽度780px、边框2px虚线绿色*/div{width:780px;border:1pxdashedgreen;}/*设置h3标题的字体、颜色、对齐方式*/h3{font-family:黑体;font-size:25pt;color:blue;text-align:center;}h3.title{font-size:18pt;font-weight:bold;color:#666;text-align:center;}/*设置h3