CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS的语法

CSS语法可以分为两部分：

#1、选择器

#2、声明

声明由属性和值组成，多个声明之间用分号分隔，如下图

CSS的四种引入方式

#1、行内式

<p style="color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人</p>

#2、嵌入式

<head>

    <style>

        p {

            color: red;

            font-size: 50px;

            text-align: center

        }

    </style>

</head>

#3、外部样式表之导入式

<head>

    <style>

        /*形式一：*/

        /*@import "css/mystyle.css";*/

        /*形式二：*/

        @import url("css/mystyle.css");

    </style>

</head>

#4、外部样式表之链接式（企业开发中使用这种方式）

<head>

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

</head>
#1、行内式

行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人</p>

#2、嵌入式

嵌入式是将CSS样式集中写在网页<head></head>标签内的的<style></style>标签对中。格式如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        p {

            color: red;

            font-size: 50px;

            text-align: center

        }

    </style>

</head>

<body>

<p>Egon是一个非常了不起的人</p>

</body>

</html>

#新建外部样式表，然后使用导入式和链接式引入

首先在与html文件同级目录下有一个css文件夹，该文件夹下新建一个外部样式表mystyle.css,内容为

p {

    color: red;

    font-size: 50px;

    text-align: center

}

#3、导入式

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        /*形式一：*/

        /*@import "css/mystyle.css";*/

        /*形式二：*/

        @import url("css/mystyle.css");

    </style>

</head>

<body>

<p>Egon是一个非常了不起的人</p>

</body>

</html>

#4、链接式（推荐使用）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

</head>

<body>

<p>Egon是一个非常了不起的人</p>

</body>

</html>

#导入式与链接式的区别:

1、<link/>标签属于XHTML,@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

2、导入式的缺点：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，用户体验差。

3、链接式的优点：

使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

#！！！注意点！！！

1、style标签必须放到head内 ,type="text/css"代表文本类型的css

2、type属性其实可以不用写，默认就是type="text/css"

3、设置样式时必须按照固定的格式来设置，key:value;

    其中;不能省略，最后一个属性其实可以省略，但我们可以简单地统一记成不

    能省略就行了

详细解释

详细解释

css注释

/*这是注释*/

前端之CSS介绍的更多相关文章

  1. 前端之CSS介绍--选择器

    一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等 ...

  2. 前端学习之路-CSS介绍，Html介绍，JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

  3. 前端 CSS 介绍

    CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML标签的样式需要为每个HTML标签单独定义样 ...

  4. 前端部分-CSS基础介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和 ...

  5. 前端基础之css介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  6. 前端路由vue-router介绍

    一.前端路由vue-router介绍 Vue-Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模 ...

  7. 4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍

    4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍 天涯明月笙 关注 2018.02.20 19:23* 字数 762 阅读 135 ...

  8. web前端开发——css

    一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...

  9. 第二章、前端之css

    目录 第二章.前端之css 一.css介绍 二.css语法 三.css几种引入方式 四.css选择器 五.css属性相关 六.css盒子模型 第二章.前端之css 一.css介绍 css(Cascad ...

随机推荐

  1. ApacheFlink简介

    对无界数据集的连续处理 在我们详细介绍Flink之前,让我们从更高的层面上回顾处理数据时可能遇到的数据集的类型以及您可以选择处理的执行模型的类型.这两个想法经常被混淆,清楚地区分它们是有用的. 首先, ...

  2. IOS系统设置页面跳转

    目录: 跳转 iOS10- 版本跳转url转 iOS10+ 版本跳转url转 跳转符 跳转到系统设置界面代码: // 自己应用的设置界面:url = UIApplicationOpenSettings ...

  3. NPOI简单的给某个单元格字体设置颜色

    参考文档有: https://www.cnblogs.com/gossip/p/4307486.html https://bbs.csdn.net/topics/391042064?page=1 效果 ...

  4. CentOS_mysql8.0_错误

    #参考资料 CSND:https://blog.csdn.net/y_server/article/details/78781177 博客园:http://www.cnblogs.com/testwa ...

  5. （转载）RecyclerView之ItemDecoration由浅入深

    RecyclerView之ItemDecoration由浅入深 作者 小武站台 关注 2016.09.19 18:20 字数 1155 阅读 10480评论 15喜欢 91赞赏 3 译文的GitHub ...

  6. Xshell调整终端显示的最大行数(缓冲区)

    1 选择会话,按顺序点击文件->属性 ,打开"会话属性"窗口 如下 在"会话属性"窗口中选择“终端” 修改缓冲区大小的值:其范围为0~2147483647 ...

  7. 3dmax实例教程-使用3ds Max 创建一个完整的场景

    本篇教程讲述了利用3ds max创建一个完整的场景. 灵感来源:当我在遇到一些事情睡不着觉的时候我便在努力想象一些别的事情,于是我便想到了这个场景,其实对于我的这个角色我即没有参考图也没有草稿图,有的 ...

  8. BZOJ 4199: [Noi2015]品酒大会 后缀自动机_逆序更新

    一道裸题,可以考虑自底向上去更新方案数与最大值. 没啥难的 细节........ Code: #include <cstdio> #include <algorithm> #i ...

  9. 路飞学城Python-Day4

    29.二进制转换计算机使用的语言就是二进制古时候,人们使用信鸽.书信.千里马等方式.但是这样的方式是不可靠的,时间也长.古时候的军方,通过烽火狼烟进行简单的信息交流 30.二进制的转换(II)8 4 ...

  10. POJ-1113 Wall 计算几何 求凸包

    题目链接:https://cn.vjudge.net/problem/POJ-1113 题意 给一些点,求一个能够包围所有点且每个点到边界的距离不下于L的周长最小图形的周长 思路 求得凸包的周长,再加 ...