# 转载请留言联系

我们都知道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. [leetcode-655-Print Binary Tree]

    Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...

  2. Spring 学习笔记（八）—— 注解使用整合

    @Autowired  —— 自动装配 需先在配置文件中,配置一个org.springframework.beans.factory.annotation. AutowiredAnnotationBe ...

  3. 配合JAVA的AJAX使用

    概要 Ajax是“Asynchronous JavaScript and XML”的简称,即异步的JavaScript和XML. readyState属性用来返回当前的请求状态,有五个可选值.分别是0 ...

  4. 多线程 调用多线程的方法 Runtime与ProcessBuilder

    一般我们使用Java运行其他类中的方法的时候,无论是静态调用还是动态调用,都是在当前的进程中执行的.也就是只有一个Java虚拟机实例在运行.有时候需要通过Java代码启动多个Java子进程,这样做会消 ...

  5. Hibernate基本演示

    保存一个对象到数据库中 目录结构 hibernate.cfg.xml <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hi ...

  6. 【题解】APIO2007动物园

    首先一眼感受到这题特别的性质……5个?这么小的,感觉就像是状压.脑补了一下,如果没有环的话应该很好做吧……有环怎么办?5真的很小的,随便乱搞肯定也可以.那就放在外面暴力枚举吧.然后正解就出来了. 然而 ...

  7. [bzoj] 2694 Lcm || 莫比乌斯反演

    原题 定义整数a,b,求所有满足条件的lcm(a,b)的和: 1<=a<=A 1<=b<=B ∀n>1,n2†gcd(a,b)(即任意n>1,\(n^2\)不是gc ...

  8. [Leetcode] subsets ii 求数组所有的子集

    Given a collection of integers that might contain duplicates, S, return all possible subsets. Note: ...

  9. centos关闭ipv6

    1.使用lsmod查看ipv6的模块是否被加载. lsmod | grep ipv6 [root@dmhadoop011 ~]# lsmod | grep ipv6 ipv6              ...

  10. 对Office文档进行授权

    Microsoft.Office.Interop.Word.ApplicationClass app = new Microsoft.Office.Interop.Word.ApplicationCl ...