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

先给大家提个建议，就是用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剩下的知识点，大家先消化一下上面的知识。

HTML第二课——css的更多相关文章

  1. HTML第二课——css【2】

    请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head>    <meta charset= ...

  2. 萌新接触前端的第二课——CSS

    前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...

  3. Html标签第二课css

    css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div  style=& ...

  4. CI(CodeIgniter)框架入门教程——第二课 初始MVC

    本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...

  5. 【Web探索之旅】第二部分第二课：服务器语言

    内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...

  6. 如何用webgl(three.js)搭建一个3D库房-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

  7. js项目练习第二课

    百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...

  8. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  9. 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

随机推荐

  1. es6模块 nodejs模块和 typescript模块

    es6模块 import和export nodejs模块 require和module.exports typescript模块 module和export

  2. 利用Py-Socket模块做的一个不登陆windows服务器自动实现替换或者调用自动拨号功能

    xu言: 最近,有个朋友让我帮忙“搞点事情”,然后正好在学习socket模块,这个模块666啊,基本上可以实现远程服务器cmd shell的大部分功能.好,话不多说,直接上码~ 由于很多电信运营商都会 ...

  3. 012 - jstat命令查看jvm的GC情况 | jvm

    jstat命令可以查看堆内存各部分的使用量,以及加载类的数量. 命令的格式如下: jstat -<option> [-t] [-h<lines>] <vmid> [ ...

  4. codeforces 578b//"Or" Game// Codeforces Round #320 (Div. 1)

    题意:n个数字,最多操作k次,每次乘x,要使结果数组的与值最大. 能推断出结果是对一个元素操作k次,并且这个元素的二进制最高位比较大.并不一定是取最大的,比如1100和1010,乘以一次2,两种选法分 ...

  5. Linux中su、su -和sudo的区别

    su 切换到root用户,但是并没有转到root用户家目录下,即没有改变用户的环境. su - 切换到root用户,并转到root用户的家目录下,即改变到了root用户的环境. 这个涉及到不同用户下的 ...

  6. python-day27--configparser模块

    1.来看一个好多软件的常见文档格式如下: [DEFAULT] ServerAliveInterval = 45 Compression = yes CompressionLevel = 9 Forwa ...

  7. Eclipse已经安装了SVN插件，但是在获取SVN代码时，一直处于progress....

    Eclipse已经安装了SVN插件,但是在获取SVN代码时,一直处于progress.... 后来升级把SVN插件升级到了1.10x,在获取就看轻轻松松搞定了 由此得出: 在安装EclipseSVSN ...

  8. C# 值类型与引用类型 (上)

    1. 主要内容 类型的基本概念 值类型深入 引用类型深入 值类型与引用类型的比较及应用 2. 基本概念 C#中,变量是值还是引用仅取决于其数据类型. C#的基本数据类型都以平台无关的方式来定义,C#的 ...

  9. asp.net MVC html.ActionLink的几种参数格式

    一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, ...

  10. bzoj2209

    题解: splay打标机 往下传递 记录x,y为化简后,区间有多少(,) 代码: #include<bits/stdc++.h> ; using namespace std; ],sum[ ...