# 转载请留言联系

我们都知道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. EasyUI 布局 - 动态添加标签页（Tabs）

    首先导入js <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"&g ...

  2. bootstrap和elementUI真的会冲突

    前两天,做了一个支持markdown的功能: http://www.cnblogs.com/XHappyness/p/8097756.html 后面发现预览效果某些标签需要bootstrap的支持才能 ...

  3. Flink之状态之savepoint

    1.总览 savepoints是外部存储的自包含的checkpoints,可以用来stop and resume,或者程序升级.savepoints利用checkpointing机制来创建流式作业的状 ...

  4. Win10上部署Apollo配置中心

    基于Docker在Win10上部署Apollo配置中心 https://www.jianshu.com/p/a1215056ce75 http://nobodyiam.com/2016/07/09/i ...

  5. 【bzoj3813】奇数国 线段树

    题目描述 给出一个长度为n的序列,每个数都可以由前60个质数的乘积表示,初始每个数都是3.支持两种操作:(1)修改一个数 (2)查询一段区间内所有数的乘积的欧拉函数值模19961993. 输入 第一行 ...

  6. MySQL in查询优化

    https://blog.csdn.net/gua___gua/article/details/47401621 MySQL in查询优化<一> 原创 2015年08月10日 17:57: ...

  7. taotao前台页面显示登录用户名的处理

    思路: 在每个页面上都引入一个 jsp,这个 jsp 可以是页面的头 head 或者脚 footer.jsp 然后在这个 jsp 中引入 一个 js,这个 js 中 有个 随页面加载 而执行的 方法, ...

  8. 怎么把centos虚拟机zip文件导入vm虚拟机中

    执行以上三步就可以将一个压缩的centoszip文件导入到虚拟机中

  9. 存储过程-----DECLARE---实用注意事项

    定义与使用变量时需要注意以下几点: ◆ DECLARE语句必须用在DEGIN…END语句块中,并且必须出现在DEGIN…END语句块的最前面,即出现在其他语句之前. ◆ DECLARE定义的变量的作用 ...

  10. 使用Spring AOP实现读写分离（MySql实现主从复制）

    1.  背景 我们一般应用对数据库而言都是“读多写少”,也就说对数据库读取数据的压力比较大,有一个思路就是说采用数据库集群的方案,其中一个是主库,负责写入数据,我们称之为:写库: 其它都是从库,负责读 ...