# 转载请留言联系

我们都知道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. django视图之分页

    在网站开发时,肯定会遇到分页的事情需要处理,在django中也是如此,在Django中处理分页一般会使用到两个类django.core.paginator.Paginator和django.core. ...

  2. MySQL初始4--去重

    更新表中的字段: update 表名 set 字段=新值,… where 条件: UPDATE语法可以用新值更新原有表行中的各列.SET子句指示要修改哪些列和要给予哪些值.WHERE子句指定应更新哪些 ...

  3. 【iOS开发】字典的快速赋值 setValuesForKeysWithDictionary

    前言 在学习解析数据的时候,我们经常是这么写的:PersonModel.h文件中 @property (nonatomic,copy)NSString *name; @property (nonato ...

  4. lintcode-100-删除排序数组中的重复数字

    100-删除排序数组中的重复数字 素只出现一次,并且返回新的数组的长度. 不要使用额外的数组空间,必须在原地没有额外空间的条件下完成. 样例 给出数组A =[1,1,2],你的函数应该返回长度2,此时 ...

  5. SIP初步

    http://blog.sina.com.cn/s/blog_6b10255301012db7.html 1.什么是SIP SIP(会话发起协议)属于IP应用层协议,用于在IP网上为用户提供会话应用. ...

  6. 大数据Hadoop-2

    大数据Hadoop学习之搭建Hadoop平台(2.1) 关于大数据,一看就懂,一懂就懵. 大数据的发展也有些年头了,如今正走在风口浪尖上,作为小白,我也来凑一份热闹. 大数据经过多年的发展,有着不同的 ...

  7. Eclipse中构建scala开发环境的步骤

    Eclipse是一款非常使用的开发工具,熟悉它的童鞋应该都知道,它不仅是最常用的android开发工具,还是最常用的Java开发工具.既然eclipse如此重要,本文小编就和大家一起来扒一扒在ecli ...

  8. BZOJ1982 [Spoj 2021]Moving Pebbles 【博弈论】

    题目 Moving Pebbles Two players play the following game. At the beginning of the game they start with ...

  9. 【COGS 1534】 [NEERC 2004]K小数 &&【COGS 930】 [河南省队2012] 找第k小的数 可持久化01Trie

    板子题,只是记得负数加fix最方便 #include <cstdio> ,N=; namespace FIFO { <<],*S=B,*T=B; #define getc() ...

  10. 从零开始学习MXnet（一）

    最近工作要开始用到MXnet,然而MXnet的文档写的实在是.....所以在这记录点东西,方便自己,也方便大家. 我觉得搞清楚一个框架怎么使用,第一步就是用它来训练自己的数据,这是个很关键的一步. 一 ...