一、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与类名命名规则

  1. 名称不能是纯数字、数字开头,可以数字结尾
  2. 名称不允许使用中文
  3. 名称不能用特殊字符(- _ 除外)
  4. 起名字时最好见名知意

软件测试 学习之路 CSS(一)相关推荐

  1. 软件测试 学习之路 CSS (三)

    一.CSS文件存放位置 css代码可以放在许多地方,习惯性有三种说法:内嵌css.外链css.行内css. 1.内嵌css指的是将css代码写在html网页中 2.外链css指的是将css代码写在外部 ...

  2. 软件测试 学习之路 CSS (二)

    一.元素展示类型 HTML中本身定义许多元素有自己默认在网页中显示的样式,如有些元素默认情况下,你设置的宽高属性不起作用,有些元素独占一行.这种现象我们称为元素展示类型,为了方便记忆将元素展现类型分为 ...

  3. 软件测试 学习之路 基本介绍

    一.软件测试定义 通过手工或者工具对 "被测对象"进行测试操作,从而验证实际结与预期结果之间是否存在差异 . 二.软件测试的作用 1.通过测试工作可以发现并修复软件当中存在的缺陷, ...

  4. 软件测试学习之路-----文本编辑器和计算机基本命令笔记

    前言:为什么软件测试要学习文本编辑器,还有计算机基本命令这些奇奇怪怪的东西?亲,上一节系统都装了,啥系统记得不?Linux系统是吧?那不得用起来吗?留着卖给收废品的么???咋用知道不?可不就是这些奇奇 ...

  5. 前端学习之路---CSS

    CSS学习内容                                                            下一篇        javascript基础(1) 1. 学会使 ...

  6. 软件测试学习之路-----DOS命令与Linux系统笔记

    前言:软件测试为什么要学习DOS命令与Linux系统呢?这个问题,咱们来这么想.软件测试,是不是只要有个软件就行?那肯定不是,没了计算机啥都白瞎.然后现在人用的计算机通常都是Windows系统.那有W ...

  7. 前端学习之路CSS基础学习二

    CSS属性相关 样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{width: 30px;height: ...

  8. 月入10k的软件测试学习之路

    1.什么是软件测试 1.1软件测试的定义: 什么是软件测试: 在规定条件下对程序进行操作,从而发现问题,对软件质量进行评估的过程. 软件测试的目的: 以最少的人力.物力.时间找到软件中的缺陷并修改,从 ...

  9. 软件测试 学习之路 MYSQL安装

    安装环境:win10 1.下载安装包 mysql8.0.16 windows .zip下载地址:https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql- ...

最新文章

  1. Docker 入门系列(6)- Docker 互联
  2. js获取 浏览器,手机内核
  3. 【剑指offer-Java版】09斐波那契数列
  4. python官网下载步骤64位-电脑64位怎么下载python
  5. 时间戳转格式化日期,日期转换成时间戳
  6. AppWidgetServiceImpl: Widget Error: widget.host.callbacks is null
  7. ubuntu18.04搭建 kubernetes(k8s)集群
  8. LaTeX:Texlive 2019和TeX studio
  9. Federated Machine Learning: Concept and Applications
  10. 华为手机助手上架流程_2019年各大安卓应用商店上架经验,含流程,物料,方法,建议收藏...
  11. HIVE 1.1.0 启动时报错: Unsupported major.minor version 51.0
  12. TIF图片转bitmap的两种方式(C#)
  13. 【AD封装】TF(micro SD)卡座封装大全(带3D)
  14. golang struct数组排序_go语言中排序sort的使用方法示例
  15. 【财富空间】像先知一样思考,如拳手般战斗
  16. 『outlaws』西部狂徒服务器架设
  17. 阿里云的认证费用是多少?考试要多长时间?
  18. ROS软路由加eNSP模拟华为交换机模拟环境测试
  19. python爬虫遇见needs to review the security of your connection before proceeding绕过 Cloudflare
  20. js执行oracle函数吗,执行javascript函数

热门文章

  1. C/C++笔试经典——链表倒序
  2. Linux的Makefile简单实例教程
  3. Go面试题 | []int 能转换为 []interface 吗?
  4. 企业级SpringBoot教程(十一)springboot集成swagger2,构建Restful API
  5. nginx与PHP配置
  6. eclipse生成boolean型变量的getter是is开头
  7. SpringMVC输入验证
  8. Gallery 相册管理系统项目将不再维护
  9. ecshop 订单-》订单状态 2
  10. Java多线程中Sleep与Wait的区别