人亦已歌 发表于 2023-1-31 14:30:08

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

CSS即层叠样式表,它也是一种语言,有它专用的语法结构,不过不要怕,它的语法结构几乎不涉及流程控制,所以非常简单。

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

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

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

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

CSS代码的编写如同javascript一样,可以写到三个位置。
1、标签的属性上添加style属性,称为行内样式。
<div class="div" style="width: 200px;">
2、页面中任意位置的style标签对中,称为内联样式。
<style>
    .div{
      height: 200px;
    }
</style>
3、独立的css文件中,然后使用<link rel="stylesheet" href="style.css">将其引入到页面中,称为外联样式。
css文件中直接写css代码,不需要使用style标签包裹,如下:



下面我们就来实际操作一下

<!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>





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



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

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

andumw 发表于 2023-2-16 00:52:36

真的很好拉。虽然我是个初学者但是 让我少走了不少弯路。谢谢大师。呵呵天天好心情拉。呵呵

啊信 发表于 2023-2-22 12:04:05

写的很不错!

sjy913 发表于 2023-2-26 23:46:48

我很欣赏你这么说其实这是每个编程的人应该知道的

88503636 发表于 2023-3-3 16:08:31

写的太好了,我也是学计算机的,深有感触啊

迟来的爱 发表于 2023-3-9 21:14:59

看了这篇文章我的感触很深啊,有很多人都是表面说说,而做的有多少人啊!用一些华丽的东西去炫耀自己的知识,而忘了用一些简单的方法去解决这个问题!!以后我会用心的学习变成知识,争取为心目中的理想而奋斗,争取做一名好的程序员,为中国的软件业贡献自己的一份力量。

九阳豆浆机 发表于 2023-3-16 12:09:55

深受感益,我生物学毕业,自学编程刚入门!

hwl 发表于 2023-3-21 08:56:11

不错不错。说出了我在大学的困惑和努力的方向。。谢谢!!

wayijie 发表于 2023-3-25 18:38:27

很受感动 学海无涯啊 我现在 刚刚 高中 毕业 现在 自学 VB 我要坚持

yuekaizhuzhu 发表于 2023-3-29 13:17:27

看过啦,很受感动!!!!!!!!!
页: [1] 2 3 4
查看完整版本: CSS核心(一)CSS语言介绍 CSS是什么 有什么用 怎么学