HTML第二课——css
请关注公众号：自动化测试实战
先给大家提个建议，就是用sublime编辑器来编写。用其他的也无所谓，我只是建议，因为这个会帮你自动补全很多代码。
css概念
css叫层叠样式表。意思就是一层一层的叠加。作用就是让页面中的可视化标签变得好看。
css的三种写法
-
内联式
通过标签里的style属性设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
</head>
<body>
<!-- 这是注释 -->
<!--通过css改变文字颜色：color属性 -->
<div style="color: red; border: 1px solid red; display: inline;">This is a div tag</div>
<div style="color: rgb(15, 20, 220);">This is a div tag</div>
<div style="color: #ccff66;">This is a div tag</div>
</body>
</html>颜色的书写方式：
-
英文直接书写
-
rgb r: red, g: green, b: blue，所有颜色都是红绿蓝。取值0-255,
rgb(0，0，0)就代表黑色，rgb(255, 255, 255)代表白色，rgb(0, 255, 0)代表绿色 -
十六进制：前面要加
#，比如#ccff00
以后都用十六进制写颜色。
-
嵌入式
写在<head>里的<style>标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<style type="text/css">
/*
css的注释写法
*/
div{
border: 1px solid red;
display: inline;
}
</style></head><body>
<!-- 这是注释 -->
<!--通过css改变文字颜色：color属性 -->
<div>This is a div tag</div>
</body>
</html>-
引用式
通过head标签里的link标签的href属性引入外部的css文件。rel="stylesheet"是固定值，就这么写，如果你用sublime编辑器，这个是自动补全的。
文件结构：
css文件夹里面有一个index.css文件。
lesson2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<!--
<style type="text/css">
/*
css的注释写法
*/
div{
border: 1px solid red;
display: inline;
}
</style>
-->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 这是注释 -->
<!--通过css改变文字颜色：color属性 -->
<div>这是一个div标签</div>
</body>
</html>index.css
div{
font-family: 'Microsoft Yahei';
font-size: 20px;
border: 1px solid red;
display: inline;
}以后写css只用引用式；以后写css只用引用式；以后写css只用引用式
注意：如果你在css里写了样式，也在div标签里写了style，那样会有限选择div里面的style，这就是就近原则。
明天接着讲css剩下的知识点，大家先消化一下上面的知识。
