人机交互实践03-课堂笔记

Ekko丶 Ekko丶     2022-09-27     153

关键词:

课堂笔记

1.样式单的优点

  • 只需稍加编辑,就能够改变文档的整个外观
  • 同一个样式单可应用于多个文档
  • 标记简洁可维护

2.样式单的三种插入方式

  • 外联式样式单      <link>标记
  • 内联式样式单      <style>标记
  • 嵌入式样式单      style属性 (慎用)

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。

当单个文档需要特殊的样式时,就应该使用内部样式表。

 

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外联式样式单
  3. 内联式样式单(位于 <head> 标签内部)
  4. 嵌入式样式单(在 HTML 元素内部)

因此,嵌入式样式单(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

3.CSS基本属性

(1)字体属性

属性 描述
font-family 设置字体系列
font-size 设置字体尺寸
font-style 设置字体风格
font-weight 设置字体粗细
line-height 设置行高
color 设置字体颜色

 

 

 

 

 

 

 

(2)背景属性

属性 描述
background-color 设置元素背景颜色
background-image 把图像设置为背景
background-repeat 设置背景图像是否及如何重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 设置图像初始位置
 
 
 
 

 

 

人机交互实践03-课堂作业2

body{background-image:url("https://www.cuishuo.net/homework/css/stage1/h2/bg.gif");background-attachment:fixed}图片不随文字下滑而移动图片不随文字下滑而移动图片不随文字下滑而移动图片不随文字下滑而移动图片不随文字下滑而移动图片不随文字下滑... 查看详情

人机交互实践04-定位作业

div{width:200px;height:200px;float:left}#i1{background-color:red}#i2{background-color:green}#i3{background-color:blue}d1d2d3 查看详情

人机交互实践006—边框等设置

img{float:right;border-style:solid;border-color:black}p{text-indent:2em;clear:left}dfghghhgghjfhghhfghhjthfhghftghjjg;fghbghjdfghghhjyhgyhjhjhjfyhjgyhjdfghhfggdfhhhhff;cvbbvfghggvfghddrtgfgffgh;fgfgdg 查看详情

人机交互实践005—网页布局

body{background:gray;text-align:center;margin:0;padding:0}#wrapper{width:1024px;background:white;margin:0auto}#branding{background:#aaaaaa;height:100px;line-height:100px;font-size:2.5em;text-align:cen 查看详情

人机交互实践004—网页字体设置

testp{color:darkred}div{color:deepskyblue}.x1{color:lightseagreen;font-size:200%;font-style:italic}.x2{color:yellow;font-weight:bold}a:hover{font-size:200%;color:red}divp{color:ghostwhite}span{text-de 查看详情

人机交互实践04-图像浮动至右边

img{float:right}樱花性喜阳光,喜欢温暖湿润的气候环境,对土壤的要求不严,以深厚肥沃的砂质土壤生长最好,根系浅,对烟尘、有害气体及海潮风的抵抗力均较弱。不耐盐碱土。根系较浅,忌积水低洼地。有一定的耐寒和耐旱... 查看详情

javase基础笔记513

JavaSE笔记整理java概述1. 人机交互人机交互:是指人与计算机之间使用某种对话语言,以一定的交互方式,为完成确定任务的人与计算机之间的信息交换过程。交互方式图形化界面:这种方式简单直观,使用者易于接受,容易... 查看详情

《ros理论与实践》学习笔记机器人语音交互(代码片段)

《ROS理论与实践》学习笔记(七)机器人语音交互课程内容1.讯飞开放平台使用2.ROS语音识别与语音输出3.语音交互本讲作业结语在学习《ROS理论与实践》课程时,记录了学习过程中的编程练习,课后作业以及发现... 查看详情

0012人机交互第2次作业

个人简历姓名梁哲能性别男民族汉族身高170cm体重51kg政治面貌团员学制四年制学历本科毕业时间2019.07户籍湖南邵阳出生年月1998.03专业软件工程毕业学校北京联合大学  外语水平 计算机水平 奖励情况 通讯地址x... 查看详情

03软件构架实践阅读笔记之三

03软件构架实践阅读笔记之三   在上一次的阅读笔记当中,提到了很多关于软件构架的东西,例如:软件构架的周期性等,但是大部分的都是系统的说明,现在,下面看的都是详细的介绍。   在刚开始是构... 查看详情

人机交互作业2

刘哲2015080360040这是表格biaoge 查看详情

人机交互第二次作业0014

人机交互第二次作业lalalaqqqqq 查看详情

0055人机交互第一次作业

0055人机交互第一次作业最爱吃的月饼枣泥月饼伍仁月饼豆沙月饼最爱喝的奶茶coco都可贡茶熹茶 查看详情

人机交互第三次作业

2015080360023钟陈昊个人简历姓名:zch年龄:20性别:男专业:软件工程专业课程C语言C++Java人机交互操作系统 查看详情

《angularjs深度剖析与最佳实践》笔记:第二章概念介绍

...2.1什么是UI?用户界面包括内容(静态信息+动态信息),外观,交互.在前端技术栈中分别由HTML,CSS和JS负责.进一步抽象,分别对应于MVC三个主要部分:Model,View和Controller对应到AngularJS中, 内容:静态内容---模板动态内容---scope交互---Controll... 查看详情

敏捷软件开发:原则模式与实践(笔记)

一、敏捷软件开发宣言1、个体和交互>过程与工具a)人是获得成功最为重要的因素;b)合作、沟通以及交互能力要比单纯的编程能力更为重要;c)团队的构建要比环境的构建重要。 2、可以工作的软件>面面俱到的文档a)文档... 查看详情

人机交互第二次作业

2015080360023钟陈昊 跳转至百度   跳转至微博  查看详情

[人机交互]第二次作业2015080360018邱硕

2015080360016邱硕 跳转至百度   跳转至微博  查看详情