软件测试 学习之路 CSS (三）
一、CSS文件存放位置
css代码可以放在许多地方，习惯性有三种说法：内嵌css、外链css、行内css。
1.内嵌css指的是将css代码写在html网页中
2.外链css指的是将css代码写在外部的独立css文件中。
3.行内css指的是将css代码写在具体的html标签上。
注：
01 为了让我们网页能够更快的被浏览器处理呈现给用户，我们一般讲css代码卸载html靠前的位置。
02 使用外链css写法时，外部独立的css文件不需要写style标签，但需要通过link标签将css文件导入到具体的html文件中，rel属性不能省略。
例：<link rel="stylesheet" type="text/css" href="css/1.css"/>
这一句也是写在head之间，title之下；
03 对于上述三种文件存放位置，优先级最高的是行内css，而内嵌与外链css优先级一样，对于当同时使用内嵌和外链时显示什么样式时看其使用的选择器的权重。.
04 另外如果想将某一样式优先级提到最高，可在该句css代码后设置
!important.
例：div{color：pink！important}
二、多媒体标签
- 音频标签
例：
<audio controls autoplay loop><source src="Justin Bieber-Love Yourself.mp3"/></audio>
注:audio 为双标签，用来定义声音资源模块，其通常的设置这几个属性：01 autoplay 用来自动播放（部分浏览器不支持）
02 controls 调用当且设备的播放控制模块
03 loop 循环播放
04audio的标签之间的文字默认不显示，只有在浏览器不支持此标签时候才会把内容显示出来，通常用来提示我们浏览器版本过低，让用户升级等等。
- 视频标签 video
属性如同audio一样可设置，例示代码：
<video width="800" height=""><source src="myvideo.mp4" type="video/mp4"></source><source src="myvideo.ogv" type="video/ogg"></source><source src="myvideo.webm" type="video/webm"></source><object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&file=myvideo.swf" /></object>当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a></video>
三、常见文字样式
- 行高：line-height，当我们将行高的大小设置成当前元素的高度时，可实现单行文本在当前元素垂直方向居中显示的效果。
- 水平对齐方式：text-align：left | center | right 分别对应文字在当前元素中的靠左对齐，中间对齐，靠右对齐。
- 字体大小：font-size,单位是px，一般情况下浏览器会有最小的默认字体，一般为12px。
- 字体粗细：font-weight，可设置关键字，数值可用（100-900）也可用normal 、bold表示正常或者加粗。
- 字体名称：font-family，一般常用 就是“微软雅黑”“黑体”
- 字体颜色：color，其值可用颜色单词，也可用十六进制数。
文字样式代码示例：
<style type="text/css">div{line-height:200px;color:#fff;background-color: red;width: 200px;height: 200px;text-align: center;font-size: 20px;font-weight: bold;}</style>
软件测试 学习之路 CSS (三）相关推荐
- 软件测试 学习之路 CSS (二）
一.元素展示类型 HTML中本身定义许多元素有自己默认在网页中显示的样式,如有些元素默认情况下,你设置的宽高属性不起作用,有些元素独占一行.这种现象我们称为元素展示类型,为了方便记忆将元素展现类型分为 ...
- 软件测试 学习之路 CSS（一）
一.CSS与HTML关系 HTML是网页的骨架,只有简单的内容框架,而CSS提供内容的样式,而我们所看到的网页都是经过CSS美化呈现出来的 . css代码分布在html的head标签之间title标签 ...
- 前端学习之路---CSS
CSS学习内容 下一篇 javascript基础(1) 1. 学会使 ...
- 数据清洗的基本流程_数据分析小白学习之路（三）——Excel多练熟能生巧
谈到数据分析,我们可能第一时间想到python.SQL.Tableau.帆软.R等,但是这些软件.语言要入门掌握.系统学习起来耗时较长.这时候不得不提到excel这个"平平无奇数分小能手&q ...
- excel取整函数_数据分析小白学习之路（三）——Excel多练熟能生巧
谈到数据分析,我们可能第一时间想到python.SQL.Tableau.帆软.R等,但是这些软件.语言要入门掌握.系统学习起来耗时较长.这时候不得不提到excel这个"平平无奇数分小能手&q ...
- Maui学习之路（三）--Winui3深入探讨
Maui的学习之路 --- Winui3深入探讨 学习Maui已经有一段时间,随着不断地深入,对Maui有了一些初步的了解. 我们都知道Maui为了保持平台原生特性,所以在每一个平台都使用了平台自身的 ...
- 软件测试 学习之路 linux 基础命令 （三）
一.linux扩展命令 1.who 查看当前登录用户 admin pst/0 admin tty1 pts 代表一个终端 tty代表用户登录了操作系统 pkill -kill -t tty1 2.切换 ...
- 软件测试 学习之路 基本介绍
一.软件测试定义 通过手工或者工具对 "被测对象"进行测试操作,从而验证实际结与预期结果之间是否存在差异 . 二.软件测试的作用 1．通过测试工作可以发现并修复软件当中存在的缺陷, ...
- 软件测试学习之路-----文本编辑器和计算机基本命令笔记
前言:为什么软件测试要学习文本编辑器,还有计算机基本命令这些奇奇怪怪的东西?亲,上一节系统都装了,啥系统记得不?Linux系统是吧?那不得用起来吗?留着卖给收废品的么???咋用知道不?可不就是这些奇奇 ...
最新文章
- linux 中 timeval结构体 - Neddy11 - 博客园
- Android 的Parcelable接口
- 使用牛刀云开发微信小程序（问题集锦）
- Docker安装redis 设置密码
- AttributeError: module 're' has no attribute 'sub'
- linux搭建rabbitmq环境,RabbitMQlinux-centos环境配置
- intellij idea如何打包
- 思科Smart Software Manager高权限登录凭证遭暴露
- Running SharePoint on Windows 7(转)
- Docker 架构原理剖析，万字详解！
- php100网站怎么了
- 【进阶版】 机器学习之聚类算法原理详解+案例解说（14）
- 基于CCII+的电流模式二阶带通滤波器仿真
- 【前端框架】当前基于bootstrap框架的几种主流前端框架
- 为影像数据去除无效值
- 容器 I/O 性能诊断：到底哪个应用是带宽杀手？
- c语言数字的写法田字格,正确书写数字1-10的方法，实用！
- IDEA 在DEBUG模式下如何不执行后续代码直接停止程序？
- rabbitMQ实例(java)
- 百钱百鸡（详解版）——多重循环