CSS样式
定义:就是给网页中的内容设置样式:样式表、级联样式表、层叠样式表
书写代码的步骤:
1、css代码要写在style标签中
2、style标签放在head中间的最后位置(title标签的下面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*px作为单位像素点*/
div{ 100px;height: 100px;background: red;}
</style>
</head>
<body>
<div>nihao</div>
</body>
</html>
注意:px是像素单位
标签选择器
选择器定义:在页面中查找元素、标签、标记的方法
标签选择器:只需要写要找的标签名字即可
例:h1{}
id选择器
给标签设置id属性,在css代码中使用#id属性值的方式来寻找页面中的元素、标签、标记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{background: red;}
#div2{background: green;}
#div3{background: yellow;}
</style>
</head>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
</body>
</html>
注:id的命名规则,不允许使用数字开头、不允许使用中文、不允许使用除了中划线- 和下划线_
类选择器
给标签设置class属性,在css中设置 .class名字:
例:
.div{}
<div class="mmm1 mmm2">XXX</div>
细节:
1、id命名不能冲突
2、id命名不能一个标签设置多个
3、class命名可以冲突
4、class命名还可以给一个标签设置多个
注意:不管是id还是class命名规则一致2
CSS特性
继承性:
给祖先元素设置的样式,可以继承给儿孙元素,如果儿孙元素有自己的样式,那么一定是听儿孙元素自己的(继承的样式,权重较低!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*文字颜色:color*/
/*继承性*/
div{color: red;}
span{color: yellow;}
/*继承所占的权重较低,小标签可以执行,可以不执行*/
</style>
</head>
<body>
<div>
<span>
hello
</span>
</div>
</body>
</html>
覆盖性:
先写的代码会被后写的代码覆盖,代码的运行是由上而下
注意:需要在在权重相同的前提
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{color: red;}
span{color: yellow;}
</style>
</head>
<body>
<span>hello</span>
</body>
</html>
优先级(权重对比)
在给同一个标签设置样式的时候,才有所谓的优先级权重对比:
id选择器 > 类选择器 > 标签选择器
100 10 1
CSS的书写方式(引入方式)
1、 内嵌式css:代码写在style标签中,放在head标签的里面,title标签的下面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--css为内嵌方式-->
<style type="text/css">
span{font-size: 100px;}
.logo_g{color: blue;}
.logo_red{color: darkred;}
.logo_o2{color: cornflowerblue;}
.logo_g2{color: palegreen;}
.logo_l{color: yellowgreen;}
</style>
</head>
<body>
<!--见名知意-->
<span class="logo_g">G</span>
<span class="logo_red">o</span>
<span class="logo_o2">o</span>
<span class="logo_g2">g</span>
<span class="logo_l">l</span>
<span class="logo_red">e</span>
</body>
</html>
2、外链式css:css代码单独写在css文件中,通过林肯标签,里面的href设置路径来选中
.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css外链式.css"/>
</head>
<body>
<!--见名知意-->
<span class="logo_g">G</span>
<span class="logo_red">o</span>
<span class="logo_o2">o</span>
<span class="logo_g2">g</span>
<span class="logo_l">l</span>
<span class="logo_red">e</span>
</body>
</html>
.css文件
span{font-size: 100px;}
.logo_g{color: blue;}
.logo_red{color: darkred;}
.logo_o2{color: cornflowerblue;}
.logo_g2{color: palegreen;}
.logo_l{color: yellowgreen;}
注意:此种写法实现了css代码和HTML代码的分离,修改代码更容易查找
3、行内式css:css代码写在HTML标签的身上,此种语法强烈不推荐使用,因为修改不方便,还会造成带纳凉的增多,从而降低页面的打开速度,影响用户的体验
测试点:电商网站的首页,必须使用内嵌式(外链式打开速度比内嵌式慢);其他页面要求使用外链式(实现代码分离,修改方便)
后代选择器
语法:
div span{}
解释:在css选择器中如果出现空格,代表寻找后代
并列、并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1,h2,div,#span1,.span2{color: red s;}
</style>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<div>我是div</div>
<span id="span1">我是span1111</span>
<span class="span2">我是span2222</span>
</body>
</html>
解释:使用英文状态下的都好连接想要一起设置的元素
引入方式(书写位置)权重对比
(内嵌=外链) < 行内
注意:程序员可以添加 !important 来设置提高权限
例: {color: red;!important}
高级权重对比
id 100 ,class 10 ,标签 1
只要是给同一个标签设置同样的样式,就会在根据最后的数值相加的结果来决定优先级,数值越大,优先级越高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{color: yellow;}
/*#p_id span{color: yellow;}*/
.p1 span{color: pink;}
p span{color: blue;}
span{color: red;}
</style>
</head>
<body>
<div id="div1">
<p class="p1" id="p_id">
<span>
hello
</span>
</p>
</div>
</body>
</html>
了解边框属性
就是页面中的元素添加的外围边框线属性
程序员称为“边框”,UI设计师称为”描边“
盒子模型
盒子模型:边框+内容+内边距(内填充、padding)+外边距(外填充,margin)
掌握下图中的内边距(内容和边框之间的距离)、外边距(盒子与其他盒子之间的距离)在哪里:
HTML5新标签
音频标签和视频标签是html5才出现的新标签,他们都有兼容性问题,在进行测试的时候,要打开IE、谷歌、火狐三大浏览器来查看是否可以正常运行
IE浏览器版本
IE浏览器使微软公司Windows系统自带的浏览器,他不允许软件管家来更新版本,只能自己去官网下载,导致很多的用户一直使用的是低版本的IE,这就造成很多的兼容性问题,因为ie9以上的版本兼容性才稍微好一些,ie9yixia各种不过,作为测试人员必须要测试IE低版本(7、8、9、10)