# 转载请留言联系

我们都知道html写出来的东西是一个文本内容，很单调。和我们平时刷网页看到的内容不一样。那普通的网页是怎样对html超文本进行装饰的呢？没错，就是CSS。

  • css的基本语法

选择器{
  样式属性:样式值;
  样式属性:样式值;
  样式属性:样式值;
}

实际效果，例如：
div{
    width:100px;
    height:100px;
    background:gold;
}

  • CSS的引入方式

1.内联式：通过标签的style属性，在标签上直接写样式。

<!DOCTYPE html>

<html lang="en">

<head>             <!--在<head></head>>里面写CSS样式-->

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p style="font-size: 50px;

            color:greenyellow;

            background: black;

            height:150px;

            width: 250px;">我是段落1</p>

    <p>我是段落2</p>

    <p>我是段落3</p>

</body>

</html>

这种方式会使HTML源代码过于杂乱，而且不能进行拓展，所以基本不用。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.嵌入式：通过style标签，在网页上创建嵌入的样式表。

<!DOCTYPE html>

<html lang="en">

<head>             <!--在<head></head>>里面写CSS样式-->

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            font-size: 50px;

            color:greenyellow;

            background: black;

            height:150px;

            width: 250px;

        }

    </style>

</head>

<body>

    <p>我是段落1</p>

    <p>我是段落2</p>

    <p>我是段落3</p>

</body>

</html>

这种方式也会是HTML代码过于冗长，也很少用。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3.外链式：通过link标签，链接外部样式文件到页面中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="demo.css"/>

</head>

<body>

    <p href="http://www.baidu.com">百度</p>

    <p class="odd">第一段</p>

    <p class="bg">第二段</p>

    <h1 class="odd bg">大标题</h1>

    <div class="onediv">

        <p>啦啦啦</p>

        <p>bibibi</p>

        <h3>pipipi</h3>

    </div>

    <div class="twodiv">

        <p>嘟嘟嘟</p>

        <p>jijiji</p>

    </div>

</body>

</html>
div{             <----------------标签选择器，使用标签名作为选择器，意指给同名的标签统一加上外观样式。

    width: 250px;

    height: 250px;

    background: aqua;

}

.odd{             <----------------类选择器，可以使用class的属性，把html网页中的标签进行指定分类，选择器就是分类名称。

    color: crimson;

}

.bg{

    background: darkcyan;

    color: aquamarine;

}

div p{        <---------层级选择器，我们可以多个不同的范围的选择器写在一起，来控制样式的效果范围。层级选择器可以有2层，3层或者多层，例如，div  p  则表示是div包含的p标签会被指定样式。

    font-size: 60px;

}

.onediv{

    color: coral;

}

注意：

1. 使用类名作为选择器的时候，类名左边必须有一个英文的圆点( . )
2. 类名的设置，是不区分标签，也就是说，p和h1之类的标签，都可以设置为同一个类
3. 同一个标签，可以在class属性中，设置属于多个类的，类名之间使用空格隔开
4. 如果同一个标签中，存在同样的样式属性，但是值不一样，则采用最后声明的那一个

怎样用css来美化一个html页面的更多相关文章

  1. CSS之美化页面

    CSS之美化页面 <span></span> 标签 <span>行内定义一个区域 就是说一行可以被<span>划分多个小区域,从而实现某种特定效果.&l ...

  2. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  3. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  4. 使用css全面美化input标签

    做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 input { border:1px solid #B3D6EF; ...

  5. 小试ASP.NET MVC——一个邀请页面的实现

    上篇博客我们大体介绍了ASP.NET MVC以及如何去新建项目,这篇博客我们讲点干货.小试ASP.NET MVC,我们来写一个简单的邀请WEB. 先来建立一个Models,叫GuestResponse ...

  6. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  7. html+css实现小米商城首页静态页面

    学了一个星期的html和css,用新学的东西写点东西,仿照小米商城的首页按照它的页面布局盗用它的图片写了个小米商城的静态页面. 源代码:链接:https://pan.baidu.com/s/1qf63 ...

  8. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  9. css背景精华所在+前端页面开发流程

    background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

随机推荐

  1. ACM训练大纲

    1. 算法总结及推荐题目 1.1 C++ STL • STL容器: set, map, vector, priority_queue, queue, stack, deque, bitset• STL ...

  2. 【转】Virtual DOM

    前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...

  3. winform timer时间间隔小于执行时间

    如果SetTimer的时间间隔为t,其响应事件OnTimer代码执行一遍的时间为T,且T>t.这样,一次未执行完毕,下一次定时到,这时候程序会如何执行? 可能的情况:1.丢弃还未执行的代码,开始 ...

  4. 最小生成树（MST）

    原创 今天来说说最小生成树问题,我们知道最小生成树有两种求法,一种是prim算法,另一种是kruskal算法,关于两种算法的定义以及证明,请查看相关资料,这里不多说,理解起来也相当容易,我们来看一个问 ...

  5. 我的python计划

    一直想学习一种脚本语言.现在主流的脚本语言,比较先接触的是python 刚开始了解了一下python,感觉挺适合自己的感觉,学习了一段时间,之中感觉,就好象C++一样,把面向对象和面向过程编程结合了起 ...

  6. 详细介绍javascript中的几种for循环的区别

    偶然间见到了forEach循环,感觉很新奇,就研究了一下,顺带着把js中的几种for循环做了一个比较. 首先,简单说一下,js中一共大概有四种for循环:(1).那种简单常见的for循环:(2).fo ...

  7. 使用ExecutorService实现线程池

    ExecutorService是java提供的用于管理线程池的类. 线程池的作用: - 控制线程数量 - 重用线程 当一个程序中创建了许多线程,并在任务结束后销毁,会给系统带来过度消耗资源,以及过度切 ...

  8. servletContext的定义

  9. 【bzoj3122】[Sdoi2013]随机数生成器 BSGS思想的利用

    题目描述 给出递推公式 $x_{i+1}=(ax_i+b)\mod p$ 中的 $p$.$a$.$b$.$x_1$ ,其中 $p$ 是质数.输入 $t$ ,求最小的 $n$ ,使得 $x_n=t$ . ...

  10. BZOJ4560 JLOI2016字符串覆盖（kmp+贪心+状压dp+单调队列）

    首先kmp求出每个子串能放在哪些位置.接下来的两部分贪心和状压都可以,各取比较方便的. 最大值考虑贪心.考虑枚举子串的左端点出现顺序,在此基础上每个子串的位置肯定都应该尽量靠前,有是否与上个子串有交两 ...