《使用HTML5实现响应式布局》第五章-CSS3基础-理论学习资料_第1页
《使用HTML5实现响应式布局》第五章-CSS3基础-理论学习资料_第2页
《使用HTML5实现响应式布局》第五章-CSS3基础-理论学习资料_第3页
《使用HTML5实现响应式布局》第五章-CSS3基础-理论学习资料_第4页
《使用HTML5实现响应式布局》第五章-CSS3基础-理论学习资料_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第五章CSS3基础理论内容CSS3简介CSS3语法在页面添加CSS3选择符CSS3继承性CSS3优先级1.CSS简介CSS是CascadingStyleSheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，简称为“样式表”。本书介绍的CSS版本是CSS3。它可以定义于HTML5文档的标签中，也可以在外部编写CSS3文件（.css），附加到HTML5文档中作为外部引用文件引用CSS前的百度首页引用CSS后的百度首页2.CSS3语法CSS3的基本语法：选择符{属性:值;}body{color:black;}定义body标签的样式这段代码定义了页面主体部分的样式，color属性表示主体部分文字的颜色属性，black是color属性的属性值。因此，这段样式代码实现的功能是将页面中的文字显示为黑色。3.在页面添加CSS3在HTML5文档中插入样式表的方法有链入外部样式表文件内部样式表定义内嵌样式链入外部样式表文件链入外部样式表是将样式表单独保存为一个CSS文件（*.css），然后在HTML5文档中用link标签链接link标签必须放置于HTML5文档的<head>和</head>之间的区域内<linkrel="stylesheet"type="text/css"href="样式表文件的地址">使用的是外部样式表引用的文件类型是样式表文件CSS文件的地址链入外部样式表文件在DreamweaverCC中新建HTML5文件和CSS3文件，将CSS3文件保存为style.csshr{ border:2pxdashed#5151A2}p{ color:red; font-size:36px; font-family:"宋体";}设置边框样式设置文字颜色设置文字字体设置文字字号链入外部样式表文件CSS3常见的单位和标识见下表单位说明px像素（pixel）em类似于当前对象内文本的字体尺寸#rrggbb颜色单位Colorname颜色名称链入外部样式表文件编写HTML5代码，并链接style.css文件<head><linkhref="style.css"rel="stylesheet"type="text/css"></head><body><p>通过使用CSS来提升工作效率！</p><hr><p>开始学习CSS！</p></body>链入外部样式表<styletype="text/css">选择符{样式属性:属性值;样式属性:属性值;……}选择符{样式属性:属性值;样式属性:属性值;……}……</style>内部样式表定义内部样式表是将样式表的内容直接放置于HTML5文档的<body>和</body>区域中，通过style标签定义内部样式表<head><styletype="text/css">/*省略*/</style></head><body><!--省略--></body>内部样式表定义内部样式表内嵌样式内嵌样式是混合在HTML5标签中定义的，用这种方法可以对某个元素直接定义样式。内嵌样式的使用是直接在HTML5标签中加入style参数，其内容即为CSS3的属性和属性值<html标签style="样式属性:属性值;样式属性:属性值;……">style参数引号的内容类似于样式表大括号中的内容。每个样式属性之间用分号间隔内嵌样式内嵌样式<body><pstyle="color:red;font-size:36px;font-family:"宋体";">通过使用CSS来提升工作效率！</p><hrstyle="border:2pxdashed#5151A2"><p>开始学习CSS！</p></body>内嵌样式内嵌样式4.选择符常用的CSS3选择符包括id选择符元素选择符类选择符选择符组包含选择符伪类选择符选择符id选择符对于网页而言，其中的每个标签都可以使用id属性，指定标签的标识。在一个页面中每个id只能使用一次。在CSS3样式中，id选择符使用#标识。使用id选择符有唯一性的指派含义，有助于代码的阅读及使用#id名称{样式属性:属性值;}#top{color:red;}Id=top的文字为红色选择符元素选择符以HTML5标签作为选择符，实现了让同类标签共享相同样式的效果标签名称{样式属性:属性值;}h1{

color:red;}h1的文字为红色选择符类选择符可以作用于一个或多个元素，使这些元素有相同的样式。需要为HTML5标签设置class属性.类名称{样式属性:属性值;}.warning{color:red;}Class=warning的文字为红色选择符选择符组将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组.选择符1,选择符2{样式属性:属性值;}h1,h2{color:red;}h1和h2的文字为红色选择符包含选择符前一个对象包含后一个对象，对象之间使用空格作为分隔符。样式作用于后一个对象.选择符1选择符2{样式属性:属性值;}diva{color:red;}Div包含的a标签的文字为红色选择符伪类选择符超链接的伪类样式的语法及说明如下a:link{样式属性:属性值;}a:visited{样式属性:属性值;}a:hover{样式属性:属性值;}a:active{样式属性:属性值;}超链接在未被访问前的样式在被用户激活（在鼠标点击与释放之间发生）时的样式在其鼠标悬停时的样式超链接在其链接地址已被访问的样式选择符<styletype="text/css">h1,h2{color:red;}h1span{ font-size:10px; font-weight:normal;}</style><h1>ThisisH1</h1><h2>ThisisH2</h2><h1><span>包含选择符</span></h1>选择符组包含选择符选择符<styletype="text/css">.warning{ font-style:italic;}#top{ font-size:36px; text-align:right;}</style><pclass="warning">RealWarning!</p><spanclass="warning">CommonWorning</span><pid="top">id选择符</p>类选择符id选择符选择符<styletype="text/css">a:link{ color:#06F; text-decoration:none;}a:visited{/*

省略*/}a:hover{/*

省略*/}a:active{/*

省略*/}</style><ahref="#">这里是链接</a>超链接未被访问前超链接已被访问过超链接鼠标悬停超链接被激活选择符<styletype="text/css">#down{ font-size:14px; line-height:1.5;}#down:first-letter{ font-family:"microsoftyahei"; line-height:1; font-size:40px;}</style><pid="down">

<!--省略--></p>字号14px，行高1.5设置段落的首文字下沉效果5.CSS3继承性CSS3的继承性，亦称为样式表的层叠性。样式表的继承规则是，所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起，但另行更改除外<styletype="text/css">body{ font-size:12px;

font-style:italic;}#p1{ font-size:30px;}</style><p>段落文字</p><pid="p1">段落文字</p>斜体p1没有继承body的字号样式6.CSS3优先级如果在同一选择符上使用几个不同的样式表时，该属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准body{color:red;font-size:12px;}p{color:blue;}段落文字会继承body定义的12像素大小，颜色则按照最后p定义的蓝色显示。CSS3优先级CSS3的选择符优先级从高到低依次为：id选择符优先级最高其次是类选择符最后是元素选择符CSS3优先级CSS3的定义优先级依照后定义优先的原则，依次为：优先级最高的是内嵌样式其次是内部样式表链入外部样式表和内部样式表之间，则根据定义的先后顺序评定，即最后定义的优先级高CSS3优先级<styletype="text/css">p{ color:black;}.blue{ color:blue;}#p1{ color:red;}</style><body>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论