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. Kettle和ETL的基本构成

    不多说,直接上干货! 这里,我说的通俗易懂点,好方便大家的理解. ETL解决方案就像业务流程一样,具有输入.输出,以及一个或多个工作环节,处理步骤.同样的,这些步骤也具有输入和输出,并可以执行将一个输 ...

  2. Chrome浏览器查看SSL证书信息

    1.https使用f12打开,选中security 如果F12打不开,可以通过最右端的自定义及控制chrome菜单,打开"更多工具"-->"开发者工具" ...

  3. MapReduce 程序：WordCount

  4. CentOS 6.9 CentOS 7.4 自动安装系统 kickstart

    通过ks文件 实现 CentOS 6.9 & 7.4 自动安装系统 环境: VMware 14.0 Pro版 光盘镜像: CentOS-6.9-x86_64-minimal.iso ks文件生 ...

  5. for 的相关用法

    forEach() <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. JQ 添加节点和插入节点的方法总结

    转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...

  7. POJ 2228 Naptime（DP+环形处理）

    题解 这题一眼望去DP. 发现自己太智障了. 这题想的是O(n^3m)的. 环形处理只会断环成链....然后DP也想的不好. 我们先考虑如果除去环这题该怎么做? dp[i][j][0/1]代表到第i小 ...

  8. HDFS架构与原理

    HDFS HDFS 全称hadoop分布式文件系统,其最主要的作用是作为 Hadoop 生态中各系统的存储服务 特点 优点 • 高容错.高可用.高扩展 -数据冗余多副本,副本丢失后自动恢复 -Name ...

  9. Maven搭建之后的设置

    Maven搭建之后的设置 1,设置环境变量M2_HOME=D:\Java\apache-maven-3.3.9, MAVEN_OPTS=-Xms128m -Xmx512m 在path中,添加D:\Ja ...

  10. Implement Stack using Queues 用队列实现栈

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...