阅读目录

一、 什么是CSS

CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。

样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等

层叠属于CSS的三大特性之一，我们将在后续内容中介绍

表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

二、 为何要用CSS

在没有CSS之前，我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性，如下

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

<h1 align="center">

    <font color="pink" size="5">天净沙·秋思</font>

</h1>

<p align="center">

    <font color="pink" size="5">锦瑟无端五十弦，一弦一柱思华年。</font>

</p>

<p align="center">

    <font color="pink" size="5">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</font>

</p>

<p align="center">

    <font color="pink" size="5">沧海月明珠有泪，蓝田日暖玉生烟。</font>

</p>

<p align="center">

    <font color="pink" size="5">此情可待成追忆，只是当时已惘然。</font>

</p>

</body>

</html>

HTML演示

这么做的缺点是

#1、记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关的属性，那么设置了也没有效果

#2、代码耦合度高：HTML语义与样式耦合到一起

#3、扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改

于是CSS应运而生，很好地解决了以上三个问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        h1,p {

            color: pink;

            font-size: 24px;

            text-align: center;

        }

    </style>

</head>

<body>

<h1>天净沙·秋思</h1>

<p>锦瑟无端五十弦，一弦一柱思华年。</p>

<p>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</p>

<p>沧海月明珠有泪，蓝田日暖玉生烟。</p>

<p>此情可待成追忆，只是当时已惘然。</p>

</body>

</html>

用CSS来实现

三、 如何使用CSS

1、如何使用CSS之CSS的语法

CSS语法可以分为两部分：

#1、选择器

#2、声明

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

2、如何使用CSS之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;

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

    能省略就行了

四种方式的详细演示

 

3、css注释

/*中间放注释的内容*/

前端基础-CSS是什么？的更多相关文章

  1. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  2. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  3. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  4. 前端基础-CSS的属性相关设置

    一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述   normal 默认值,标准粗细 ...

  5. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  6. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

  7. 前端基础-- CSS

    CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外 ...

  8. Web前端基础——CSS

    一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...

  9. 前端基础-css（1）

    一.css的引入方式 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面 ...

  10. 003.前端开发知识，前端基础CSS（2020-01-07）

    一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...

随机推荐

  1. sublime3下载安装及常用插件、浏览器预览设置

    之前与学习前端有关的软件都安装在了实验室电脑上,最近由于要放寒假(也许我寒假回去会学习呢),于是得在笔记本电脑上重新安装一遍.几个软件各种出错,花了一下午才安装好,必须记录下来啊! 这篇文章主要介绍s ...

  2. php 生成唯一id的几种解决方法（实例）

    php 生成唯一id,网上查了下,有很多的方法 1.md5(time() . mt_rand(1,1000000)); 这种方法有一定的概率会出现重复 2.php内置函数uniqid() uniqid ...

  3. C# Timer定时器用法

    System.Timers.Timer timer1 = new System.Timers.Timer(); timer1.Elapsed += new System.Timers.ElapsedE ...

  4. Linux Notes

    Do what we want based on what others already did with additional abstraction and organization to ser ...

  5. Ubuntu，忘记了root密码，怎么重置？

    进入单用户模式: 1.开机到grub时,用上下键移到第二行的恢复模式,按e(注意不是回车) 即Ubuntu,With Linux 3.2.0-23-generic(recovery mode) 2.把 ...

  6. linux fack 文件系统修复命令

    [简介] fsck命令被用于检查并且试图修复文件系统中的错误.当文件系统发生错误四化,可用fsck指令尝试加以修复. [选项]必要参数 -a 非互交模式,自动修复 -c 检查是否存在有损坏的区块. - ...

  7. 【Oracle】DBMS_STATS.GATHER_TABLE_STATS详解

    由于Oracle的优化器是CBO,所以对象的统计数据对执行计划的生成至关重要!    作用:DBMS_STATS.GATHER_TABLE_STATS统计表,列,索引的统计信息(默认参数下是对表进行直 ...

  8. leetcode coding base

    1. Contains Duplicate 2. Contains Duplicate II 3. Contains Duplicate III

  9. 关于Ubuntu16.04下phpmyadmin出现mbstring错误的正解

    1.打开终端,输入php -i | grep extension_dir 查看extension_dir的绝对路径 2.查看phpinfo,php.ini的绝对路径 3.打开php.ini文件. 设置 ...

  10. 猴子选大王【PHP】

    目录 猴子选大王 指针解决 数组压栈 猴子选大王 一群猴子排成一圈,按1,2,...,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去...,如此不 ...