文章目录
前言
- CSS(Cascading Style Sheets)层叠样式表
- CSS可以用来为网页创作样式表,通过样式表可以对网页进行装饰
- 所谓层叠:可以将王特想象成一层一层的结构,层次高的结果将会覆盖层次低的结构
- CSS可以为网页的各个层次设置样式
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS简介
1.CSS样式的编写位置
①.内联样式【不推荐使用】
A.定义:将样式直接写到标签的“style”属性中,这样写的样式叫做内联样式。
B.局限:仅对当前元素中的内容起作用,不方便复用与维护,内联样式属于结构与样式耦合,不方便后期维护,不推荐使用。
C.使用方法【以p标签为例】
<p style="color = red; font-size = 40px;">我是一个结构与样式耦合的p标签</p>
②.内部样式表【推荐使用】
A.定义:将CSS样式表编写到head标签的style子标签中这样的样式表叫内部样式表
B.使用:将CSS样式表编写到head标签的style子标签中,然后通过CSS选择器来选中指定样式。
C.优点:·可以同时为很多元素一起设置样式,可以使样式进一步复用。
·将样式表编写到style标签中,可以使表现和结构进一步分离。
<style type="text/css"> //type="text/css":默认值,为了兼容老版本的浏览器
//加入css选择器选中元素【该选择器选中的是网页中所有的p标签】
p{
语句...
}
</style>
③. 外部样式表【最推荐使用】
A.定义:将CSS样式表编写到外部的CSS文件中,然后用link标签将外部的CSS文件引入到当前的页面中,这样外部的CSS样式表将会应用到当前的页面中。
B.使用方法:见下方代码
C.优点:·可以将样式表在不同的页面中使用,提高了代码复用率。
·将样式统一编写到外部CSS文件中,使表现和结构完全分离。
·将样式统一写在外部样式表中,通过link标签引入,可以利用浏览器的缓存,加快用户的访问速度,提高了用户的体验效果,所以最推荐使用该方法。
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
//编写一个名为style.css的文件如下:
p{
color :red;
font-size : 40px;
}
//在HTML文件中,使用方法如下:
<html>
<head>
<meta charest="utf-8"/>
<title>这是一个HTML文件</title>
//使用link标签引入外部css样式表
<link rel="stylesheet" type="text/css" href="style.css的文件的相对地址">
</head>
<body>
<p>我就是被CSS选择器选中的p标签</p>
</body>
</html>
二、CSS语法(简单语法)
1.注释
①.CSS代码的注释
·该形式的注释只能写在style标签或CSS文件中
/*此处是注释内容*/
②.HTML代码的注释
<!–此处是注释内容–>
2.语法
①.选择器
通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用在选择器对应的元素上。
②.声明块
·A.声明块就是紧跟在选择器后,使用一对大括号括起来的代码块。
·B.声明块实际上就是一组一组的名值对结构(这一组组的名值对我们成为声明)
·C.在一个声明块中,可以写多个声明,多个声明之间用“;”隔开。
·D.声明的样式和样式值之间用“:”隔开。
3.块和内联
【总结】块元素主要就用来做页面的布局,内联元素主要用来选中文本并给选中的文本设置样式
(1)一般情况下使用块元素包含内联元素,而不使用内联元素包含块元素。
(2)a标签(超链接标签)可以包含任何元素,除了它本身。
(3)p标签(段落标签)不能放置任何元素。
①.块元素
·i. 定义:块元素就是会独占一行的元素,无论它的内容有多少,块元素都会独占一整行
·ii.常见的块元素标签
br、div、h1、h2、h3、p
·iii.div标签
(1)div标签没有任何的语义,就是一个纯粹的块元素。
并且div标签不会为他里面的标签设置任何的默认样式
(2)div标签的主要作用就是对页面进行布局
②.内联元素(行内元素)
·i. 定义:内联元素就是只占自身大小的元素,不会独占一行。
·ii.常见的内联元素标签
a, img, iframe, span…
·iii.span标签
(1)span标签没有任何的语义,他专门用来选中文字,并给选中的文字设置样式。
总结
提示:这里对文章进行总结: