CSS核心(一)CSS语言介绍 CSS是什么 有什么用 怎么学

[复制链接]
查看: 1438|回复: 31
发表于 2023-1-31 14:30:08 | 显示全部楼层 | 阅读模式
CSS即层叠样式表,它也是一种语言,有它专用的语法结构,不过不要怕,它的语法结构几乎不涉及流程控制,所以非常简单。

由于html原生的标签长的非常难看,所以用CSS这个东西将它变的好看,html中的CSS就是图像处理中的PS,仅此而已。

当然,任何一种语言如果想学精都需要一个长期积累的过程,本教程主要是带着大家入门。
因为深入的讲解每一个属性或所有知识点这毫无意义,因为讲了不用谁都会忘掉。
更深入的知识往往是在大家实践的过程中遇到后查询手册或上网查询,只要用的多了自然就熟练了,相反的,如果不用再怎么记都会忘掉。

CSS主要包括三大类知识
1、选择器语法 --用来从页面中选取一个或多个元素。
2、CSS样式属性 --对选中的元素添加样式。CSS的样式属性非常多,不过不要担心,常用的也就那么几个。
3、页面布局 --对页面元素的定位与排版。

编写CSS代码的过程如同使用PS处理一张图片,图片是由很多图层组成的(在CSS中,标签就相当于图层),我们首选要选中一个图层(即选择器),然后利用PS内部的功能对这个图层进行修改(即CSS属性),然后合理的摆放这些图层,让整张图看起来美观一些(即定位)。

CSS代码的编写如同javascript一样,可以写到三个位置。
1、标签的属性上添加style属性,称为行内样式。
  1. <div class="div" style="width: 200px;">
复制代码

2、页面中任意位置的style标签对中,称为内联样式。
  1. <style>
  2.     .div{
  3.         height: 200px;
  4.     }
  5. </style>
复制代码

3、独立的css文件中,然后使用<link rel="stylesheet" href="style.css">将其引入到页面中,称为外联样式。
css文件中直接写css代码,不需要使用style标签包裹,如下:

CSS核心(一)CSS语言介绍 CSS是什么 有什么用 怎么学

下面我们就来实际操作一下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语言介绍 CSS是什么 有什么用 怎么学</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="div" style="width: 200px;">
        div
    </div>
</body>
<style>
    .div{
        height: 200px;
    }
</style>
</html>


CSS核心(一)CSS语言介绍 CSS是什么 有什么用 怎么学

以上代码中,我们分别使用行内方式、页内方式和引入方式三种方法给div标签添加了CSS样式,三种样式的效果是叠加的,最终实现效果如下:

CSS核心(一)CSS语言介绍 CSS是什么 有什么用 怎么学

因为,我们在行内设置了width: 200px;表示宽为200像素,内联样式中设置了height: 200px;,表示高位200像素,在外联样式中设置background-color: aquamarine;,即背景颜色为aquamarine,最终效果即三者的叠加效果。

在以下的课程中为了演示方便,我们会用内联方法编写CSS代码,即:在html页面中加一个style标签对,里面写css代码,在实际工作中大多会将CSS代码写到CSS文件中,特此说明。
易博软件介绍

0

主题

22

帖子

12

积分

营销入门

Rank: 2

积分
12
发表于 2023-2-16 00:52:36 | 显示全部楼层
真的很好拉。虽然我是个初学者但是 让我少走了不少弯路。谢谢大师。呵呵  天天好心情拉。呵呵
发表于 2023-2-22 12:04:05 | 显示全部楼层
写的很不错!

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-2-26 23:46:48 | 显示全部楼层
我很欣赏你这么说  其实这是每个编程的人应该知道的

0

主题

21

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-3-3 16:08:31 | 显示全部楼层
写的太好了,我也是学计算机的,深有感触啊
发表于 2023-3-9 21:14:59 | 显示全部楼层
看了这篇文章我的感触很深啊,有很多人都是表面说说,而做的有多少人啊!用一些华丽的东西去炫耀自己的知识,而忘了用一些简单的方法去解决这个问题!!  以后我会用心的学习变成知识,争取为心目中的理想而奋斗,争取做一名好的程序员,为中国的软件业贡献自己的一份力量。
发表于 2023-3-16 12:09:55 | 显示全部楼层
深受感益,我生物学毕业,自学编程刚入门!

0

主题

22

帖子

12

积分

营销入门

Rank: 2

积分
12
发表于 2023-3-21 08:56:11 | 显示全部楼层
不错不错。说出了我在大学的困惑和努力的方向。。谢谢!!

0

主题

5

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-3-25 18:38:27 | 显示全部楼层
很受感动 学海无涯啊 我现在 刚刚 高中 毕业 现在 自学 VB 我要坚持

0

主题

24

帖子

13

积分

营销入门

Rank: 2

积分
13
发表于 2023-3-29 13:17:27 | 显示全部楼层
看过啦,很受感动!!!!!!!!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表