css基础语法
CSS样式
定义：就是给网页中的内容设置样式：样式表、级联样式表、层叠样式表
书写代码的步骤：
1、css代码要写在style标签中
2、style标签放在head中间的最后位置（title标签的下面）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*px作为单位像素点*/
div{width: 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）
