css概述

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

css知识点

注释

/* 注释内容 */

css四种引入方式

1.行内式

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

   <p style="background-color: red">hello yuan</p>

</body>

</html>

2.嵌入式

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       p{

            background-color: aqua;

            color: red;

            font-size: 40px;

        }

   </style>

</head>

<body>

    <p>测试 p</p>

</body>

</html>

3、链接式

将一个.css文件引入到HTML文件中，做项目时最常用

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

#创建一个test.css文件

p {

    background-color: aqua;

    color: red;

    font-size: 40px;

}

#创建index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link href="test.css" rel="stylesheet" type="text/css"/>

</head>

<body>

    <p>测试 p</p>

</body>

</html>

4、导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中

做项目一般不用

#创建一个test.css文件

p {

    background-color: aqua;

    color: red;

    font-size: 40px;

}

#创建index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    @import "test.css";

    </style>

</head>

<body>

    <p>测试 p</p>

</body>

</html>

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

这是导入式固有的一个缺陷。

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

前端-----css（1）的更多相关文章

  1. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  2. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  10. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

随机推荐

  1. keepalived初次安装体验

    keepalived主要有两大功能,一个是LB,一个是VRRP+failover,其中LB功能和LVS的功能类似,都是通过在LB上配置RS,监控RS的状态,将从client来的请求发送给对应算法的RS ...

  2. python第三次周末大作业

    ''' s18第三周周末⼤作业 模拟博客园系统: 1. 启动程序, 显⽰菜单列表 菜单: 1. 登录 2. 注册 3. ⽂章 4. ⽇记 5. 退出 2. ⽤户输入选项, ⽂章和⽇记必须在登录后才可以 ...

  3. asp.net mvc cshtml （VIEWS）中怎么提供URL参数：

    其实,没有必要,只要在view中这样获取就可以: <%=Html.ViewContext.RouteData.Values["id"]%> 就算没有id的参数也不会报错 ...

  4. vee-validate表单验证组件

    vee-validate是VUE的基于模板的验证框架,允许您验证输入并显示错误 安装 npm i vee-validate --save 引入 import Vue from 'vue'; impor ...

  5. 032、学容器必须懂bridge网络（2019-02-19 周二）

    参考https://www.cnblogs.com/CloudMan6/p/7066851.html   docker安装时会创建一个名为 docker0 的linuxbridge.如果不指定 --n ...

  6. 网易PM599产品笔试题

    前几天做了网易PM599的云计算领域产培生的笔试题目,下面整理了一下各个方向的笔试题和我对这些题目的解答. 云计算领域: 1.对工业互联网的理解,结合自身优势谈谈自己应该怎么去创业. 工业互联网是一次 ...

  7. python科学计算

    windows下python科学计算库的下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/(由于C运行库的问题,scipy在linux下可以用pip安装,而 ...

  8. 如何使用Cygwin在Windows上运行OpenSSH SSHD服务器

    记录几款非常有趣, 但不怎么耳熟的软件: Cygwin 是可以安装 OpenSSH server 和 client 的, Mosh 也可以, 这对于 Linux 用户而言就非常方便了. 如何使用Cyg ...

  9. 开源框架.netCore DncZeus学习（一）npm安装

    今天看到一个不错的开源项目DncZeus, https://github.com/lampo1024/DncZeus 整个界面挺漂亮,而且权限做到了按钮级别,功能也较容易扩展,刚好学习VUE纯看文章很 ...

  10. VS WebDev.WebServer40

    vs2010下有一个WebDev.WebServer40工具,可以直接拿来当服务器用,这样就不用再安装iis了.位置在 C:\Program Files (x86)\Common Files\micr ...