HTML5 Web基础及其开发 5_第1页
已阅读1页，还剩30页未读， 继续免费阅读

下载本文档

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

文档简介

第3章CSS基础响应式Web开发（HTML5+CSS3+Bootstrap）高等教育出版社重难点重点:（1）CSS样式语法规则（2）样式三种常用存储位置的创建和应用（3）常用选择器的创建和应用（4）常用网页元素的样式应用难点:（1）三种常用位置样式的创建和应用（2）常用选择器的创建和应用目录01CSS基本认识03字体属性02CSS选择器04文本属性06背景属性05边框属性07样式优先级别01CSS基本认识没有使用CSS我们以前是如何控制字体的颜色和大小以及所使用的字体的？在一个页面里频繁地更替字体的颜色、大小等内容，生成的HTML代码长度会臃肿不堪，CSS为了简化这样的工作诞生了，当然其功能决非这么简单。

网页设计时采用CSS技术，可以快速统一地对网站页面的布局、字体、颜色、背景和其它效果实现更加精确的修改和控制。CSS技术在几乎所有的浏览器上都可以使用，服务器字体、图标文字使页面字体变得更漂亮；以前通过设计图片或动画实现的功能，现在只要用CSS就可以轻松创建和修改，从而更快地下载页面。界面美化的界面CSS1.1

为什么使用CSS1.2CSS语法格式熟练地使用CSS样式对网页进行修饰，首先需要了解CSS样式规则，根据CSS样式定义的位置和种类不同，规则语句格式会不同。语法格式:选择器{属性:属性值;}选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}1.2CSS语法格式英文大括号{}左侧的名称被称为选择器，{}内的内容称为声明，声明由一个或多个属性和属性值定义，两者合起来称为CSS规则。选择器：选择器用于指定CSS样式作用于哪个HTML元素，{}是对该元素设置的具体样式内容。属性和属性值：属性和属性值通常以“键值对”的形式出现，指定元素设置的样式属性，也有省略写法，如视频的自动循环播放可直接写属性值。属性和属性值之间用英文冒号“:”连接，多个“键值对”之间用英文分号“;”进行区分。1.3CSS引入位置常用的三种CSS样式引入的方式:（1）行内式在<body>标签内的任一元素标签内添加style属性，定义属性及属性值，样式效果只作用于改元素。语法格式:<标签style="属性1:属性值1;属性2:属性值2;属性3:属性值3;…"></标签>1.3CSS引入位置（2）内嵌式样式定义在HTML文档<head>或<body>中的<style>标签中，内嵌式样式与行内式样式不同的是内嵌式可以同时修改多个元素的样式属性。语法格式:<styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}</style>1.3CSS引入位置（3）外链式使用<link>标签将以“.CSS”为扩展名定义的外部样式文件，链接到HTML文档<head>标签内，具体选择器和属性等样式内容按照规则格式写入外部文件。语法格式:<linkrel="stylesheet"type="text/css"href="样式文件.css"/>02CSS选择器选择器用于选择要应用样式的一个或多个元素。常用的CSS选择器有哪些呢？2.1选择器1.元素选择器根据HTML元素标签名称来选择元素，自动应用样式。语法格式:标签名称{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.ID选择器根据HTML元素id属性选择元素，调用该属性应用样式。由于id属性在页面的唯一性，选择器可以选择一个唯一元素。定义样式时选择器名称前面添加“#”。语法格式:#选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器3.类选择器根据HTML元素class属性来选择元素，应用样式。语法格式:.选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}4.交集选择器根据HTML元素class属性来选择元素，应用样式。语法格式:标签名称.选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}标签名称#选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器5.通用选择器根据HTML元素class属性来选择元素，应用样式。语法格式:*选择器名{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}6.并集选择器多个元素共用一个样式。语法样式：选择器名1,选择器名2,选择器名3{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器7.后代选择器根据文档上下文结构选择元素，应用样式。语法格式：选择器名1,选择器名2,选择器名3{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}8.子代选择器根据文档上下文里紧挨着的位置选择多个元素，应用样式。语法结构：选择器1>选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}2.1选择器9.相邻兄弟选择器根据文档上下文里平行的位置选择多个元素，应用样式。语法结构：选择器1+选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}10.属性选择器根据元素的某个属性选择元素，应用样式。语法样式：例如选择包含href属性的<a>元素应用文字颜色绿色样式:a[href]{color:red;text-decoration:none;}03字体属性字体设置是网页设计中的重要组成部分，添加相应属性的字体会使页面更加美观，提升用户体验，CSS中提供了一系列用于设置文本字体样式的属性。3.1字体属性1.font-family属性选择器{font-family:字体名称;}2.font-style属性选择器{font-style:normal|italic|oblique;}3.font-weight属性选择器{font-weight:normal|bold;}4.font-variant属性选择器{font-variant:normal|small-caps;}5.font-size属性选择器{font-size:px|em|%|vw;}3.2服务器字体服务器字体@font-face{font-family：name；src:url()format();}04文本属性网页中的文本除了设置如字体大小的字体属性外，还需设置字体颜色、对齐方式等文本属性美化网页效果。4.1文本属性1.color属性color:颜色英文名称|十六进制值|RGB值；2.text-align属性text-align:left|center|right|justify；3.vertical-align属性vertical-align:top|middle|bottom；4.text-decoration属性text-decoration:none|overline|line-through|underline；5.text-transform属性text-transform:uppercase|lowercase|capitalize；6.间距属性text-indent:em|像素；letter-spacing:em|像素；word-spacing:像素；line-height:倍数|像素；white-space:normal|nowrap|pre|pre-wrap|pre-line|break-spaces；7.text-shadow属性text-shadow:h-shadowv-shadowblurcolor；4.1文本属性05边框属性设置网页文档中的元素边框样式，包含宽度、线形和颜色等属性，边框属性和四个方向属性可以分别设置，也可以合起来简写定义。5.1边框属性1.简写边框属性border:border-widthborder-styleborder-color；2.边框宽度属性border-width:像素|thin|medium|thick；3.边框线型属性border-style:none|solid|dotted|dashed|double|groove|ridge|inset|outset；4.边框颜色属性border-color:颜色英文名称|十六进制值|rgb()|rgba()|transparent；5.圆角边框属性border-radius:像素|%；6.图形边框属性border-image:border-image-source|border-image-slice|border-image-width|border-image-outset|border-image-repeat；06背景属性设置网页文档中的元素背景，背景属性不具备继承性。6.1背景属性1.background-color属性background-color:颜色英文名称|十六进制值

|rgb()|rgba()|transparent；2.background-image属性background-image:url();3.background-size属性border-radius:像素|%；4.background-position属性background-position:x|y；5.background-repeat属性background-repeat:no-repeat|repeat-x|repeat-y；background-repeat:no-repeat;6.background-attachment属性background-attachment:scroll|fixed；07样式优先级别!important可以获得最高优先级别行内样式>内嵌样式>外链

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

温馨提示

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

最新文档

评论

0/150

提交评论