天涯论坛

 找回密码
 立即注册
搜索
查看: 76|回复: 5

重学前端之CSS基本语法

[复制链接]

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 2024-6-30 10:45:33 | 显示全部楼层 |阅读模式

前端学习路径及基本学习教程目录

CSS重点用于掌控页面的表示样式,下面的内容是学习CSS的基本书写语法,理解CSS的层叠式。

1、CSS概述

产生背景

从HTML被发明起始,样式就以各样形式存在,最初的HTML只包括很少的表示属性。

随着HTML的成长,为了满足页面设计者的需求,HTML添加了非常多表示功能,例如文本格式化标签。

然则随着这些功能的增多,HTML变的越来越杂乱,况且HTML页面越来越臃肿。

于是CSS便诞生了。

发展过程

CSS1:1995年12月,层叠样式表的第1份正式标准(Cascading style Sheets Level 1)完成,作为w3c的举荐标准。

CSS2:1997年初,W3C组织负责CSS的工作组起始讨论第1版中触及到的问题。其讨论结果组成为了1998年5月出版的CSS规范第二版。

CSS3:CSS3年是CSS层叠样式表技术的升级版本,于1999年起始制订,2001年5月23日W3C完成为了CSS3的工作草案,重点包含盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS概念

CSS全叫作cascading style sheets,层叠式样式表,是一种用来表现HTML的文件样式的计算机语言。

功效:静态地修饰网页,并且能够协同各样脚本语言动态地对网页各元素进行格式化。

前端三层技术

HTML,结构层,从语义的方向搭建网页结构

CSS,样式层,从美观的方向描述页面样式

JavaScript,行径层,从交互的方向描述页面行径

CSS的显现,实现了网页的结构和样式分享,拯救了混乱的HTML,更加拯救了咱们WEB研发者。

有和运用CSS的页面的对比

CSS能够说是网页的美容师,让咱们的网页更加美观。

CSS的构成

层叠式

CSS中贯穿始终的加载特性:层叠性,继承性

样式

定义怎样表示HTML元素:文字文本,背景,盒模型,浮动,定位,其他

2、内联式样式表

CSS规则

由两个重点的部分形成选取器,以及一条或多条声明。

书写位置

CSS的代码按照书写位置区别分为四种书写方式:内联式、 内嵌式、外联式、导入式。

内联式

内联式,被习惯叫做行内式。

书写位置:在HTML标签之上的style属性中书写CSS样式。

所有的CSS样式属性总体构成标签的style属性的属性值。

<div style=“width:100px;height:100px;color:#c00”>文字</div>

内联式缺点

1、内联式必要写在标签上,完全脱离HTML标签。

2、CSS样式代码让标签结构繁重,有害于HTML结构的诠释

3、一个内联式的CSS代码,只能给一个标签运用倘若多个标签有相同的样式,一样的CSS代码必须书写多次,增多代码量。

因此呢实质工作中不会运用内联式(行内式)编写CSS代码。

3、内嵌式样式表

书写位置:在HTML文件中,<head>标签内部有一个<style>标签。

<style>标签书写在<title>标签后面,所有CSS代码书写在<style>标签内部。

<style>标签有一个标签属性叫做type,属性值是"text/css"。

<style type="text/css"> /*css规则*/ p{font-size:30px} </style>

内嵌式优点

1、实现了结构和样式的





上一篇:前端基本入门二(CSS)
下一篇:【3】CSS入门
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-9 13:25:54 | 显示全部楼层
你的留言真是温暖如春,让我感受到了无尽的支持与鼓励。
回复

使用道具 举报

3048

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109040
发表于 2024-10-19 19:22:07 | 显示全部楼层
谷歌外贸网站优化技术。
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-10-25 04:45:47 | 显示全部楼层
顶楼主,说得太好了!
回复

使用道具 举报

3089

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098770
发表于 2024-10-27 10:07:12 | 显示全部楼层
“NB”(牛×的缩写,表示叹为观止)‌
回复

使用道具 举报

2946

主题

3万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979427
发表于 2024-10-27 17:17:17 | 显示全部楼层
说得好啊!我在外链论坛打滚这么多年,所谓阅人无数,就算没有见过猪走路,也总明白猪肉是啥味道的。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 05:58 , Processed in 0.114058 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.