软件测试 学习之路 CSS(一)
一、CSS与HTML关系
HTML是网页的骨架,只有简单的内容框架,而CSS提供内容的样式,而我们所看到的网页都是经过CSS美化呈现出来的 。
css代码分布在html的head标签之间title标签之下;
二、CSS语法及其常见元素属性
width定义元素宽度 单位px
height 定义高度 单位同上
background 设置背景颜色
CSS固定语法:
选择器{CSS 代码}
建议:开发阶段将css分行写,并且注意每行结尾都用:结束语句。
三、选择器
1. 定义:选择器就是CSS 中已经定义好的用来选中HTML中的元素固定语 法。他的作用就是选中我们想要设置样式的元素。
2. 选择器分类:CSS选择器有许多,大致分为两大类:简单选择器+复合选择器
3. 简单选择器:标签选择器:通过html标签名选中元素、 类名选择器: 通过标签类名选择元素、 id选择器:通过ID名选择元素
标签选择器很简单,通过相同的标签就可以调用如:
p{width: 100;height: 100;background-color: red;}
类名选择器:
想同时将多个目标元素设置为相同样式时,选择类名选择器时较省时的优选。类名选择器使用步骤:在HTML中body里的所需元素设置相同的类名,然后在style标签内调用类名。
如:以下代码中 在body标签内的元素input的类名全部设置为c1,然后在head的style标签内使用 .c1注意有个点来调用类名选择器
<style type="text/css">.c1{width: 200;height: 50;background-color: gold; }</style>
<br /><br /><input type="submit"class="c1" /><input type="radio" name="sex"class="c1" />男<input type="radio" name="sex"class="c1" />女
注:允许一个标签设置多个类名,类名之间用空格隔开。
ID选择器:当需要从一堆元素中选中某一元素,那么可以选则id选择器,而这个id就如同身份证一样。
步骤:在我们想选中元素身上设置id属性 并给与属性值即id号。在style中使用#id 名{}调用
如:
调用
#a1{width: 100;height: 100;background-color: red;}
设置id <p id="a1">内容</p>
注:id不允许重复使用,要求id唯一,标签可以同时又类名和id名,且二者属性值可以相同。
三、ID与类名命名规则
- 名称不能是纯数字、数字开头,可以数字结尾
- 名称不允许使用中文
- 名称不能用特殊字符(- _ 除外)
- 起名字时最好见名知意
软件测试 学习之路 CSS(一)相关推荐
- 软件测试 学习之路 CSS (三)
一.CSS文件存放位置 css代码可以放在许多地方,习惯性有三种说法:内嵌css.外链css.行内css. 1.内嵌css指的是将css代码写在html网页中 2.外链css指的是将css代码写在外部 ...
- 软件测试 学习之路 CSS (二)
一.元素展示类型 HTML中本身定义许多元素有自己默认在网页中显示的样式,如有些元素默认情况下,你设置的宽高属性不起作用,有些元素独占一行.这种现象我们称为元素展示类型,为了方便记忆将元素展现类型分为 ...
- 软件测试 学习之路 基本介绍
一.软件测试定义 通过手工或者工具对 "被测对象"进行测试操作,从而验证实际结与预期结果之间是否存在差异 . 二.软件测试的作用 1.通过测试工作可以发现并修复软件当中存在的缺陷, ...
- 软件测试学习之路-----文本编辑器和计算机基本命令笔记
前言:为什么软件测试要学习文本编辑器,还有计算机基本命令这些奇奇怪怪的东西?亲,上一节系统都装了,啥系统记得不?Linux系统是吧?那不得用起来吗?留着卖给收废品的么???咋用知道不?可不就是这些奇奇 ...
- 前端学习之路---CSS
CSS学习内容 下一篇 javascript基础(1) 1. 学会使 ...
- 软件测试学习之路-----DOS命令与Linux系统笔记
前言:软件测试为什么要学习DOS命令与Linux系统呢?这个问题,咱们来这么想.软件测试,是不是只要有个软件就行?那肯定不是,没了计算机啥都白瞎.然后现在人用的计算机通常都是Windows系统.那有W ...
- 前端学习之路CSS基础学习二
CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{width: 30px;height: ...
- 月入10k的软件测试学习之路
1.什么是软件测试 1.1软件测试的定义: 什么是软件测试: 在规定条件下对程序进行操作,从而发现问题,对软件质量进行评估的过程. 软件测试的目的: 以最少的人力.物力.时间找到软件中的缺陷并修改,从 ...
- 软件测试 学习之路 MYSQL安装
安装环境:win10 1.下载安装包 mysql8.0.16 windows .zip下载地址:https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql- ...
最新文章
- Docker 入门系列(6)- Docker 互联
- js获取 浏览器,手机内核
- 【剑指offer-Java版】09斐波那契数列
- python官网下载步骤64位-电脑64位怎么下载python
- 时间戳转格式化日期,日期转换成时间戳
- AppWidgetServiceImpl: Widget Error: widget.host.callbacks is null
- ubuntu18.04搭建 kubernetes(k8s)集群
- LaTeX:Texlive 2019和TeX studio
- Federated Machine Learning: Concept and Applications
- 华为手机助手上架流程_2019年各大安卓应用商店上架经验,含流程,物料,方法,建议收藏...
- HIVE 1.1.0 启动时报错: Unsupported major.minor version 51.0
- TIF图片转bitmap的两种方式(C#)
- 【AD封装】TF(micro SD)卡座封装大全(带3D)
- golang struct数组排序_go语言中排序sort的使用方法示例
- 【财富空间】像先知一样思考,如拳手般战斗
- 『outlaws』西部狂徒服务器架设
- 阿里云的认证费用是多少?考试要多长时间?
- ROS软路由加eNSP模拟华为交换机模拟环境测试
- python爬虫遇见needs to review the security of your connection before proceeding绕过 Cloudflare
- js执行oracle函数吗,执行javascript函数