HTML第二课——css

时间 2019-12-05

标签 html 第二 css 栏目 HTML 繁體版

原文原文链接

请关注公众号：自动化测试实战css

先给你们提个建议，就是用sublime编辑器来编写。用其余的也无所谓，我只是建议，由于这个会帮你自动补全不少代码。html

css概念

css叫层叠样式表。意思就是一层一层的叠加。做用就是让页面中的可视化标签变得好看。less

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>

颜色的书写方式：spa

英文直接书写code
rgb r: red, g: green, b: blue，全部颜色都是红绿蓝。取值0-255, rgb(0，0，0)就表明黑色，rgb(255, 255, 255)表明白色，rgb(0, 255, 0)表明绿色htm
十六进制：前面要加#，好比#ccff00ip

之后都用十六进制写颜色。utf-8

嵌入式

写在<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剩下的知识点，你们先消化一下上面的知识。

1. HTML第二课——css【2】
2. HTML第二课
3. 第二天HTML&CSS
4. HTML第三课——css盒子
5. HTML+CSS第一课：初识HTML
6. html第二课html图像标记与css入门
7. Html+CSS 学习第二天
8. html第十二课input
9. HTML+CSS第三课：表格与表单
10. CSS+HTML(二)------HTML标签（二）
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• RxJava操作符（二）Transforming Observables
• Kotlin学习（二）基本类型