HTML5&CSS3网页制作：CSS继承性.pptx

CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin 使用标记定义各种按钮时，通常需要清除其边框 通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框 1 2 3 CSS控制表单样式 实战：实现如下登录表单 总结 02 了解掌握CSS控制表单样式时的注意事项 通过实战项目掌握CSS 表单样式规则 总结 THANKS

CSS控制视频的宽高 video元素自身控制 01 通过元素自身属性控制 在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。 通过元素自身属性控制 例：加载一个视频并设置视频尺寸宽为200、高为300。 注意：当不设置大小时，默认为视频的大小 通过元素自身属性控制 通过CSS改变视频宽高 02 通过CSS改变视频宽高 例：加载一个视频使用CSS设置视频的宽为400，高为300。 基本语法格式 通过CSS改变视频宽高 总结

CSS核心基础--CSS样式规则 CSS样式 如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。 CSS样式 在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有不同的呈现效果。 未设置css样式 设置css样式 单击此处添加副标题内容 CSS样式规则 01 CSS样式规则 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。 图1-1 属性的书写形式 02 属性的书写形式 在上面图1-1中： 1.选择器用于指定CSS样式作用的HTML对象。花括号内是对该对象设置的其体样式。 2.属性和属性值以“键值对”的形式出现， 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等， 4.属性和属性值之间用英文”:”连接 5.多个“键值对”之间用英文”;”进行区分 总结 03 通过CSS样式简介了解 CSS样式是什么 通过CSS样式规则简介了解 CSS样式规则 了解掌握属性的书写形式 总结 小任务 要求： 1、规范使用CSS样式规则实现如下图样式： 感 谢 聆 听 BUSENESS ACT

CSS高级特性--CSS优先级 CSS优先级 01 CSS优先级 网页制作时，对统一元素，应用不同的背景，会出现什么情况？ 思考 background-color:pink; background-color:blue; background-color:red; 【结论】 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。 CSS优先级 来看一个例子：

文本的颜色

p strong{ color:black} /*权重为:1+1*/ strong.blue{ color:green;} /*权重为:1+10*/ .father strong{ color:yellow} /*权重为:10+1*/ p.father strong{ color:orange;} /*权重为:1+10+1*/ p.father .blue{ color:gold;} /*权重为:1+10+10*/ #header strong{ color

datalist 元素 datalist 元素 01 datalist 元素 datalist 元素 datalist元素用于定义输入框的选项列表，列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。 描述 语法格式 datalist 元素 在使用

盒子模型概述--div标记 div标记 01 div标记 （1）