那些酷炫的网页你也可以做到——第七篇(初识“CSS“)

简介: 那些酷炫的网页你也可以做到——第七篇(初识“CSS“)

初识“CSS”


什么是CSS(层叠样式表)?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

image.png

特点:1.丰富的样式定义

2.易于使用和修改

3.多页面应用


CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。


4.层叠

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。


5.页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。


为什么要引入"CSS"?

1.HTML具有重复性,用HTML编写出的网页,如果给多条标签写属性的话,即使是相同的属性,每个标签都需要设置相同属性,引入CSS的话就可以写一遍让所有的标签都具有此属性。


CSS(专注网页样式的设置)和HTML(专注通过标签来封装数据)分工合作。设计一个网页的时候,先用HTML将数据封装起来,然后再用CSS进行样式设计、进行美化。


只有将HTML和CSS结合起来才能设计出好的网页,现在的HTML作用过于单一,仅仅通过标签来封装数据,我们还要对数据设置一些效果,如果没有HTML,CSS不能封装起数据,所以两者结合才能有特定的效果。


CSS和HTML怎么结合


一共有四种结合方式:

1.内联样式表:

通过使用style属性为各种HTML元素标签添加样式,

其范围只在制定的HTML元素内部。

基本语法格式:

<元素名style="属性名称:属性值">其中如果有多个属性可以用分号隔开
例如:将<h1></h1>之间的文字字体设置为蓝色,
背景设置为绿色
<h1style="color:blue;background-color:green">文字</h1>部分常用CSS属性:

image.png

image.png


2.内部样式表:

内部样式表通常位于<head>和</head>标签内部,通过使用<style>和</style>标签标记各类样式规则,其作用范围为当前整个文档。

语法格式:

<style>选择器{属性名称1:属性1;属性名称2:属性2;......}
</style>例如:h1{color:red}
该语句可以用于整个文档,
因此文档中所有的h1标题都将变为红色

image.png

3.外部样式表:

外部样式表为独立的CSS文件,其后缀名为.css,网页文档的首部<head>和</head>标签之间使用<link>标签对其进行引用即可作用于当前整个文档。

语法格式:

<linkrel="stylesheet"href="样式文件URL">例如:
<linkrel="stylesheet"href="css/test.css">外部CSS文件中的内容无需使用<style></style>标签进行标记,
其格式和内部样式表<style>标签内部的格式完全一样。

image.png

4.导入方式:

编写一个html外部的css文件,该css文件里面编写css代码,将css文件引入到html文件中。

操作:第一步:右击文件夹 → File → 命名:div.css
第二步:html中引入.css文件。
*使用CSS代码中的命令:@import url("css文件的地址");
* @import语句必须写在<style></style>标签的中间


CSS的优先级和注意事项


(1)优先级:一般情况下(从上到下,由外到内,优先级是从低到高的。

即:哪个CSS样式距离HTML标签越近优先级越高。

特殊的情况:由选择器决定。


(2)CSS代码的写法:

选择器名称{属性名:属性值;属性名:属性值1 属性值2 属性值3;…}

属性与属性之间用 分号 隔开;

属性与属性值直接按用 冒号 连接;

如果一个属性有多个值的话,那么多个值用 空格 隔开,例如div{xx:yy1 yy2},div线的宽度和高度。

当有内部样式表和@import url()导入外部.css文件两种方式共存时,需要将@import写到内部样式表前,否则@import效果无效。


目录
相关文章
|
25天前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
34 1
|
24天前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
35 1
简单几行代码CSS实现网页自动打文字效果
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
25天前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
35 4
|
28天前
|
前端开发 开发者
CSS样式覆盖规则详解,让你的网页更加出彩!
【8月更文挑战第23天】在Web前端开发中,理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时,哪些规则生效?本文通过实例解析这些规则。简单案例中,`.error`类选择器优先级高于`p`标签,文字显示红色。复杂案例涉及`.important`类与`!important`关键字,此时文字变为绿色。另外,内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
71 0
|
28天前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul &gt; li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
27 0
|
29天前
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
|
29天前
|
前端开发
翻转视角:CSS让卡片设计在网页上活起来!
翻转视角:CSS让卡片设计在网页上活起来!
|
29天前
|
前端开发
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
CSS动画新潮流:炫酷水波效果,让网页元素生动起来!
|
29天前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!