CSS介绍

第1章 CSS介绍

1.1 什么是CSS

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

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

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

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

1.2 为什么要用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>     

1.2.1 缺点:

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

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

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

1.3 如何使用CSS

1.3.1 使用CSS之CSS的语法

CSS语法可以分为两部分:

#1、选择器

#2、声明

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

1.3.2 如何使用CSS之CSS的四种引入方式

1)    行内式

<p style="color: red;font-size:50px; text-align: center">就是牛逼</p>

2)    嵌入式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

3)    外部样式表之导入式

4)  <head>

<meta charset="UTF-8">

<title>Title</title>

<style>

@import "file.css";

</style>

</head>

4)外部样式表之链接式(企业开发使用的方式)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="file.css">
</head>

1.3.3 解释

#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;

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

能省略就行了

原文地址:https://www.cnblogs.com/liuxiangpy/p/9094844.html

时间: 2024-10-08 09:41:37

CSS介绍的相关文章

25 May 18 HTML-Tabel标签 CSS介绍 CSS选择器

25 May 18 一.table标签(标记一段数据为表格) #1.作用:表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的 #2.格式 <table> <tr> <td></td> </tr> </table> tr代表表格的一行数据 td表一行中的一个单元格 #3.注意点: 表格标签有一个边框属性,这个属性决定了边框的宽度.默认情况下这个属性的值为0,所以看不到边框 #4表格属性 a.宽度和高

7-[CSS]-css介绍,引入方式

1.CSS介绍:层叠样式表(Cascading Style Sheets) 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什

前端学习之路-CSS介绍,Html介绍,JavaScript介绍

CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 <p style="background-color: #FFF000"> p标签 </p> 在head中加入style标签 <head> <style type="text/css"> p { color: #FFF000

web前端入门到实战:Html介绍,CSS介绍,JavaScript介绍

标题图 CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 p标签作者: 在head中加入style标签作者: p{color:#FFF000;} 链接方式 总结CSS 选择器名称 { 属性名:属性值: --. } 属性与属性之间用 分号 隔开 属性与属性值用 冒号 连接 选择器 1.class选择器 2.id选择器 .class# id Html h

前端之CSS介绍

一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.如果html是一个人,那么CSS就相当于衣服,有了它我们可以让HTML样式丰富多彩. 语法 css语法主要由两部分组成:选择器和声明.选择器通常是您需要改变样式的 HTML 元素.每条声明由一个属

html表单和css介绍

1. 表单 表单标签 form <form action="#" method="get"></form> 作用: 用于将客户端浏览器的数据提交给服务器 常用的属性 action: 用来指定数据提交的路径 # 表示本页面 method: 提交的方式 两种提交方式 GET:数据会出现在地址栏的后面以?分隔,?前面是地址,后面是参数 如果是多个参数,参数之间使用&分隔 POST: 提交的参数不会显示在地址栏上,相对更加安全. 2.表单中的

前端---CSS介绍一

css能够使网页元素的样式更加丰富,让网页的内容和样式拆分开,CSS是Cascading Style Sheets的首字母的缩写,意思是层叠样式表,html只负责文档的结构和内容,内容的表现形式交给CSS,html文档变得更加简洁. css基本语法: 选择器:{属性:值:属性:值} 如: div{ width:100px; height:100px; background:gold; } css引入方式: 1:内联式:通过标签<style>属性,在标签上直接写样式: <style=&qu

CSS介绍、选择器

css(层叠样式表  Cascading Style Sheet)-------表现层 目前最新版本CSS3.0,能够做到表现与内容分离的一种计算机语言,在css中主要学习选择器和属性 在学习之前先看一下css的书写位置和需要注意的地方 书写位置 1.外联(外部)样式   <link href="css文件路径" rel="stylesheet" /> 2.嵌入(内页)样式   <style></style> 3.内部(行内)样式

html5晋级之路-css介绍

1.css概述 css指层叠样式表 css样式表极大地提高了工作效率 selector{ property:value } 例:h1{color:red;font-size:14px;} 属性大于1个之后,属性之间用分号隔开 如果值大于1个单词,则需要加上引号: p {font-family:"sans serif";} 2.css高级语法 1.选择器分组: h1,h2,h3{color:red;} 2.继承 body{ color:green; } 规定了body中所有的样式,如果它