当前位置: 首页 > news >正文

CSS快速上手

第一章 CSS基础

首先来回答2个问题。

1.CSS是什么?

        CSS是用来控制网页外观的一门技术。

2.前端最核心的技术是什么?他们分别是用来干吗的?

        前端最核心的技术有:HTML、CSS、JavaScript。

        HTML用于控制网页的结构,CSS用于控制网页的外观,JavaScript控制的是网页的行为。​

CSS引入方式

        有三种方式:外部样式表、内部样式表、行内样式表。

1.外部样式表

        把CSS代码和HTML代码单独放在不同文件中,然后在HTML文件中使用link标签来引用CSS文件

        当样式需要被应用到多个页面时,外部样式表是最理想的选择。使用外部样式表,就可以通过更改一个CSS文件来改变整个网站的外观。

        外部样式表在单独文件中定义,然后在HTML文件的<head></head>标签对中使用link标签来引用。

语法:

<link rel="stylesheet" type="text/css" href="文件路径" />

解释:

        rel(relative)取值是固定的,即stylesheet,表示引入的是一个样式表文件(CSS文件)。

        type属性的取值也是固定的,即"text/css",表示这是标准的CSS。

        href属性表示CSS文件的路径。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>

注意:外部样式表必须用link标签来引入,link标签放在head标签内。

2.内部样式表

        把HTML代码和CSS代码放到同一个HTML文件中。其中,CSS代码放在style标签对之间,style标签放在head标签内部。

语法:

<style type="text/css">……
</style>

         type="text/css"是必须添加的,表示这是标准的CSS

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title><style type="text/css">div{color:green;}</style>
</head>
<body><div>绿叶,给你初恋般的感觉。</div><div>绿叶,给你初恋般的感觉。</div><div>绿叶,给你初恋般的感觉。</div>
</body>
</html>

div{clolr:green}这句中的div属于CSS中的选择器,后续会学到。 

注意:内部样式表CSS样式必须在style标签内定义,而style标签放在head标签内。

3.行内样式表

        把HTML代码和CSS代码放到同一个HTML文件。行内样式表的CSS是“标签的style属性定义的。(注意和内部样式表style区分,这里的style是属性,不是标签。)

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div style="color:red;">绿叶,给你初恋般的感觉。</div><div style="color:red;">绿叶,给你初恋般的感觉。</div><div style="color:red;">绿叶,给你初恋般的感觉。</div>
</body>
</html>

章节测试

下面说法中,正确的是( C)​。

A.现在已经是CSS3时代了,没必要再去学CSS2

B.一般使用script标签来引用外部样式表

C.在实际开发中,一般使用外部样式表的多

D.内部样式表和行内样式表在实际开发中一点用处都没有

第二章 CSS选择器

        在HTML中,id和class是元素最基本的两个属性。id和class都可以用来选择元素。

1.元素的id和class

id属性

        id属性具有唯一性,在一个页面中相同的id只能出现一次。如果出现了多个相同的id,那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div id="content">存在即合理</div><p id="content">存在即合理</p>
</body>
</html>

这段代码有问题,因为出现了多个相同的id

class属性

        可以为同一个页面的相同元素或者不同元素设置相同的class,然后使相同class的元素具有相同的CSS样式。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div class="content">存在即合理</div><p class="content">存在即合理</p>
</body>
</html>

这段代码是正确的。

对于id和class的理解:

        id就像你的身份证号,而class就像你的名字。身份证号是唯一的,但是两个人的名字却有可能是一样的。

2.CSS选择器

先来看一段代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div>绿叶学习网</div><div>绿叶学习网</div><div>绿叶学习网</div>
</body>
</html>

对于这个例子,如果我们只想将第2个div文本颜色变为红色,该怎么实现呢?

        我们肯定要通过一种方式来“选中”第2个div,只有选中了才可以为其改变颜色  。 

    

像上面这种选中你想要的元素的方式,我们称之为“选择器”​。

        选择器,就是指用一种方式把你想要的那个元素选中,只有把它选中了,你才可以为这个元素添加CSS样式。

CSS选择器非常多,这里只讲最实用的5种:

        元素选择器、id选择器、class选择器、后代选择器、群组选择器。

CSS选择器的格式是怎样的?

选择器
{属性1 : 取值1;……属性n : 取值n;
}

1.元素选择器

        元素选择器,就是选中相同的元素,然后对相同的元素定义同一个CSS样式。

语法:

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title><style type="text/css">div{color:red;}</style>
</head>
<body><div>绿叶学习网</div><p>绿叶学习网</p><span>绿叶学习网</span><div>绿叶学习网</div>
</body>
</html>

2.id选择器

选中id相同的元素进行同一种操作。

语法:

 举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#lvye{color:red;}</style>
</head>
<body><div>绿叶学习网</div><div id="lvye">绿叶学习网</div><div>绿叶学习网</div>
</body>
</html>

3.class选择器

        我们可以对“相同的元素”或者“不同的元素”定义相同的class属性,然后针对拥有同一个class的元素进行CSS样式操作。

        class名前面必须要加上前缀英文句号(.)​,否则该选择器无法生效。类名前面加上英文句号,表明这是一个class选择器。

语法:

举例:(为相同元素定义class)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.lv{color:red;}</style>
</head>
<body><div>绿叶学习网</div><div class="lv">绿叶学习网</div><div class="lv">绿叶学习网</div>
</body>
</html>

.lv{color:red;}表示选中class="lv"的所有元素,然后定义它们的文本颜色为红色。

举例:(为不同元素定义class)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.lv{color:red;}</style>
</head>
<body><div>绿叶学习网</div><p class="lv">绿叶学习网</p><span class="lv">绿叶学习网</span><div>绿叶学习网</div>
</body>
</html>

p和span是两个不同的元素,我们为这两个不同的元素设置相同的class,这样就可以同时为p和span定义相同的CSS样式了。

注意:如果要为两个或多个元素定义相同的样式,建议使用class选择器,因为这样可以减少大量重复代码

4.后代选择器

        后代选择器,就是选择元素内部中某一种元素的所有元素:包括子元素和其他后代元素(如“孙元素”​)​。

语法:

        父元素和后代元素必须要用空格隔开,表示选中某个元素内部的后代元素

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#father1 div {color:red;}#father2 span{color:blue;}</style>
</head>
<body><div id="father1"><div>绿叶学习网</div><div>绿叶学习网</div></div><div id="father2"><p>绿叶学习网</p><p>绿叶学习网</p><span>绿叶学习网</span></div>
</body>
</html>

5.群组选择器

        群组选择器,指的是同时对几个选择器进行相同的操作

语法:

对于群组选择器,两个选择器之间必须要用英文逗号(,)隔开,不然群组选择器就无法生效

举例1:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">h3,div,p,span {color:red;}</style>
</head>
<body><h3>绿叶学习网</h3><div>绿叶学习网</div><p>绿叶学习网</p><span>绿叶学习网</span>
</body>
</html>

 

举例2:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#lvye,.lv,span{color:red;}</style>
</head>
<body><div id="lvye">绿叶学习网</div><div>绿叶学习网</div><p>绿叶学习网</p><p class="lv">绿叶学习网</p><span>绿叶学习网</span>
</body>
</html>

章节测试

一、单选题

1.每一个样式声明之后,要用( )表示一个声明的结束。

A.逗号        B.分号        C.句号        D.顿号

2.下面哪一项是CSS正确的语法结构?​( )

A.body:color=black        

B.{body;color:black}        

C.{body:color=black;}

D.body{color:black;}

3.下面有关id和class的说法中,正确的是( )​。

A.id是唯一的,不同页面中不允许出现相同的id

B.id就像你的名字,class就像你的身份证号

C.同一个页面中,不允许出现两个相同的class

D.可以为不同的元素设置相同的class来为他们定义相同的CSS样式

4.下面有关选择器的说法中,不正确的是( )​。

A.在class选择器中,我们只能对相同的元素定义相同的class属性

B.后代选择器选择的不仅是子元素,还包括它的其他后代元素(如“孙元素”​)

C.群组选择器可以对几个选择器进行相同的操作

D.想要为某一个元素定义样式,我们可以使用不同的选择器来实现

二、编程题下面有一段代码,如果我们想要选中所有的div和p,请用至少两种不同的选择器方式来实现,并且选出最简单的一种。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><div></div><p></p><p></p><strong></strong><span></span>
</body>
</html>

答案:

一、BDDA

二、示例代码

<!--class选择器-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.a{color: blue;}</style>
</head>
<body><div class="a">HELLO!</div><p class="a">你好</p><p class="a">hello</p><strong>nice</strong><span>today</span>
</body>
</html><!--id选择器-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#a{color: red;}</style>
</head>
<body><div id="a">HELLO!</div><p id="a">你好</p><p id="a">hello</p><strong>nice</strong><span>today</span>
</body>
</html><!--群组选择器-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">div,p{color: red;}</style>
</head>
<body><div>HELLO!</div><p>你好</p><p>hello</p><strong>nice</strong><span>today</span>
</body>
</html>

群组选择器最简单!

第三章 字体样式

本章要学习的字体样式属性:

 1.字体类型:font-family

语法:

font-family: 字体1,字体2,...,字体N;

注意:如果不定义font-family,浏览器会采用默认字体“宋体”​。

举例:设置一种字体

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#div1{font-family: Arial;}#div2{font-family: "Times New Roman";}#div3{font-family: "微软雅黑";}</style>
</head>
<body><div id="div1">Arial</div><div id="div2">Times New Roman</div><div id="div3">微软雅黑</div>
</body>
</html>

注意:对于font-family属性,如果字体类型只有一个英文单词,则不需要加上双引号。

举例:设置多种字体

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">p{font-family:Arial,Verdana,Georgia;}</style>
</head>
<body><p>Rome was not built in a day.</p>
</body>
</html>

问:为什么要定义多个字体类型?

答:有些字体可能电脑上没有安装。定义多个就会从前往后一个一个寻找,直到找到在电脑上安装的字体。如果定义的字体都没有安装,就会使用默认字体。

2.字体大小:font-size

语法:

font-size:像素值;

px是什么?

        px全称pixel(像素)​,1像素指的是一张图片中最小的点,或者是计算机屏幕最小的点。同样尺寸大小的图像,像素数量越多,图像包含的细节就越丰富,看起来也就越清晰。

实际上,font-size的取值单位不仅仅是px,还有em、百分比等。不过初学CSS时,我们只需要掌握px这一个就可以了。举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1 {font-size: 10px;}#p2 {font-size: 15px;}#p3 {font-size: 20px;}</style>
</head>
<body><p id="p1">字体大小为10px</p><p id="p2">字体大小为15px</p><p id="p3">字体大小为20px</p>
</body>
</html>

3.字体粗细:font-weight

语法:

font-weight:取值;

font-weight属性取值有两种:一种是“100~900的数值”​,另一种是“关键字”。其中,关键字取值如下:

记住bold就行了。

举例:取值为数值

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{font-weight: 100;}#p2{font-weight: 400;}#p3{font-weight: 700;}#p4{font-weight: 900;}</style>
</head>
<body><p id="p1">字体粗细为:100(lighter)</p><p id="p2">字体粗细为:400(normal)</p><p id="p3">字体粗细为:700(bold)</p><p id="p4">字体粗细为:900(bolder)</p>
</body>
</html>

举例:取值为关键字

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{font-weight:lighter;}#p2{font-weight:normal;}#p3{font-weight:bold;}#p4{font-weight:bolder;}</style>
</head>
<body><p id="p1">字体粗细为:lighter</p><p id="p2">字体粗细为:normal</p><p id="p3">字体粗细为:bold</p><p id="p4">字体粗细为:bolder </p>
</body>
</html>

4.字体风格:font-style

语法:

font-style:取值;

font-size属性取值如下:

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{font-style:normal;}#p2{font-style:italic;}#p3{font-style:oblique;}</style>
</head>
<body><p id="p1">字体样式为normal</p><p id="p2">字体样式为italic </p><p id="p3">字体样式为oblique</p>
</body>
</html>

 

oblique和italic效果一样,有些字体有斜体italic属性,但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。

5.字体颜色:color

语法:

color:颜色值;

这里介绍color属性的两种取值:一种是“关键字”​,另一种是“十六进制RGB值。

举例:关键字

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{color:gray;}#p2{color:orange;}#p3{color:red;}</style>
</head>
<body><p id="p1">字体颜色为灰色</p><p id="p2">字体颜色为橙色</p><p id="p3">字体颜色为红色</p>
</body>
</html>

举例:十六进制RGB

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{color: #03FCA1;}#p2{color: #048C02;}#p3{color: #CE0592;}</style>
</head>
<body><p id="p1">字体颜色为#03FCA1</p><p id="p2">字体颜色为#048C02</p><p id="p3">字体颜色为#CE0592</p>
</body>
</html>

记住两个:#000000是黑色,#FFFFFF是白色。

如何获取十六进制的RGB?

        按下Win + R键,输入mspaint并回车,打开画图工具获取。

        当然了,还有其他的方法,可以自己寻找。

6.CSS注释

语法:

/*注释的内容*/

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">/*这是CSS注释*/p{color:pink;}</style>
</head>
<body><!--这是HTML注释--><p>记忆之所以美,是因为有现实的参照。</p>
</body>
</html>

章节测试

一、单选题

1.CSS中可以使用( )属性来定义字体粗细。

A.font-family        B.font-size        C.font-weight        D.font-style

2.如果想要实现字体颜色为白色,可以使用定义color属性值为( )​。

A.#000000        B.#FFFFFF        C.wheat        D.black

3.下面有关字体样式,说法正确的是( )​。

A.font-family属性只能指定一种字体类型

B.font-family属性可以指定多种字体类型,并且浏览器是按照从右到左的顺序选择的

C.在实际开发中,font-size很少取“关键字”作为属性值

D.在实际开发中,font-weight属性一般取100~900的数值

4.下面选项中,属于CSS的正确注释方式是( )​。

A.//注释内容        B./*注释内容*/        C.<!--注释内容-->        D.//注释内容//

二、编程题为下面这段文字定义字体样式,要求字体类型指定多种、大小为14px、粗细为粗体、颜色为蓝色。“有规划的人生叫蓝图,没规划的人生叫拼图。​”

答案:

一、CBDB

二、示例代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><style type="text/css">p {font-family: Arial, "微软雅黑", "Times New Roman";font-size: 14px;font-weight: bold;color: blue;}</style></head><body><p>“有规划的人生叫蓝图,没规划的人生叫拼图。”</p></body></html>


http://www.mrgr.cn/news/97358.html

相关文章:

  • 手撕LLM(二):从源码出发,探索LoRA加载、推理全流程
  • CentOS Linux升级内核kernel方法
  • rust 同时处理多个异步任务,并在一个任务完成退出
  • 毕业设计:实现一个基于Python、Flask和OpenCV的人脸打卡Web系统(六)
  • Nginx 生产配置文件
  • 数据分析-Excel-学习笔记Day1
  • TYUTJava阶段测试
  • 新一代AI架构实践:数字大脑AI+智能调度MCP+领域执行APP的黄金金字塔体系
  • java发送http请求
  • k8s 1.23升级1.24
  • k8s之Ingress讲解
  • TDengine 从入门到精通(2万字长文)
  • 线程池/内存池/mysql连接池
  • 15分钟完成Odoo18.0安装与基本配置
  • Nginx 常见面试题
  • 现代Web表单验证的终极解决方案:构建可扩展的企业级验证系统
  • sentinel新手入门安装和限流,热点的使用
  • 003集——《利用 C# 与 AutoCAD API 开发 WPF 随机圆生成插件》(侧栏菜单+WPF窗体和控件+MVVM)
  • Gerapy二次开发:用户管理专栏页面样式与功能设计
  • 2024 天梯赛——工业园区建设题解