# 转载请留言联系

我们都知道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. JavaScript - Standard built-in objects

    标准对象分类 Value Properties 以下全局属性返回一个简单的值:它们没有属性或者方法: Infinity NaN undefined null literal Function Prop ...

  2. 并查集——poj2492（带权并查集入门）

    一.题目回顾 题目链接:传送门 题意:给定n只虫子,不同性别的可以在一起,相同性别的不能在一起.给你m对虫子,判断中间有没有同性别在一起的. 二.解题思路 种类并查集 和poj1073的本质一样 详见 ...

  3. 使用ZSetOperations（有序）操作redis

    方法 c参数 s说明 Boolean add(K key, V value, double score); K key:集合key V value:key对应的值 double score:分数  向 ...

  4. laydate日期控件

    <!-- laydate 日期时间控件 下载地址 http://www.layui.com/laydate/ 这里用到版本为 layDate-v5.0.2 下载后将 laydate 文件夹放到项 ...

  5. Chromium之工程依赖关系.

    Chromium各版本可能有差异,我的版本是chromium.r197479,2013/08前后下载的source code. Visual Studio Ultimate版本有工具可以自动生成项目依 ...

  6. input标签与label标签的“合作关系”

    一直忽略了input和label的关系.一次在做自定义单选框的时候又重新捡起来这对“兄弟”. label的for属性和input的id值一致的话,input和label就会组成一个组.例如: < ...

  7. 【题解】SHOI2008仙人掌图

    本质上还是树形dp.建立圆方树,遇到圆点的时候直接求(和树形dp一样即可),遇到方点做中转点的时候要考虑会从圆的另一侧通过(需满足最短路径的原则).原本是对于圆上的点进行 \(n^{2}\) 的匹配, ...

  8. [洛谷P4949]最短距离

    题目大意:给一棵基环树,两种操作: $1\;x\;y:$把第$x$条边长度改成$y$ $2\;x\;y:$查询$x$到$y$的最短距离 题解:发现最短距离只有两种可能,第一个是树上的距离,第二种是经过 ...

  9. STL map、set中key为结构体的用法

    下面是map定义的结构: // TEMPLATE CLASS map template<class _Kty, class _Ty, class _Pr = less<_Kty>, ...

  10. 图解WinXP局域网共享设置步骤

    原文链接地址:http://blog.csdn.net/jackinzhou/article/details/8468208 第一章:共享的前提工作 1.更改不同的计算机名,设置相同的工作组! 2.我 ...