CSS入门篇之传智播客学习

ttx9n · 发表于 2009-11-13 20:58:18

结束了HTML学习，接下来我终于揭开了css的真实面纱，在大学时代，一直忙碌去各处收集学习资料，记得当时不知在那位大侠手里拷了有关css相关学习资料，代码看了半天实在费解再接下来的时间似乎再也没有光顾那个文件夹了，现在非常后悔当初没有将他好好保存，一次意外，我的电脑和那个装有四十多个G学习资料的硬盘永远的离开了我，所以在此提醒大家，好东西一定要备份。记得后来又有一次接触到css这个词，好像是在和一个我的学生聊天，为了满足学生的好奇心，我百度了一下，最后告诉学生是层叠样式表，不过还好学生没有继续问下去，因为我只是知道他的中文翻译，现在想想真可谓是一个笑话了。今天我终于又一次接触到了css，这一次一定将它彻底搞明白，我相信再有人问我什么是css，我想我不会回答层叠样式表了。虽然我们主要是做web开发，但是毕老师为了将知识面扩宽一些，依旧不改他的认真的风范，依旧非常仔细的将css讲解一天。
一、定义以及其作用
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。
二、如何将样式表加入到HTML文件中？
1.style属性方式
利用标签中style属性来改变每个标签的显示样式。
2.style标签方式
在head标签中加入style标签，对多个标签进行统一修改。注意一定要用<stytle>标签，用来启动css引擎。例如：
<head>
<style type="text/css">
div
{
background-color:#CCCCCC;
color:#00CCFF
}
</style>
</head>
3.导入方式
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例如：我们定义好了一个div.css文件。
<style type="text/css">
@import url(div.css);
</style>
注意：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
4.链接方式
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例如：我们已经将需要导入的语句都放在1.css中了。
<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
注意：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
小结：如果要设置局部样式，则使用第一种方式，如果要多个区域修改相同样式，用第二种方式，如果需要改多个页面，多个页面的样式一样，我们可以用导入方式，但是如果我们需要新增加一块区域，需要在每一个页面都导入css文件，不现实，所以我们可以将导入语句放到一个css文件中，利用最后的一种方式来实现。其优先级是1>2>3
三、选择器
就是指定CSS要作用的标签，那个标签的名称就是选择器。每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
1.HTML标签选择器
2.class选择器
在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置。例如我们希望多个div区域中一个区域以及span区域中一个区域一样样式，我们可以设置如下：
.name {color:blue;}代码放在头文件的style标签中
下面代码放在body中
<div class=”name”>div区域一</div>
<span class=”name”>span区域二</span>
而我们想让一个div区域里面第一和第三块区域不一样样式，我们可以设定如下：
下面代码放在头文件的style标签中
div.d1 {color:orange;}
div.d3 {color:green;}
下面代码放在body中
<div class=”d1”>区域一</div>
<div class=”d3”>区域三</div>
3.id选择器
与class选择器类似，但格式不同，选择器的名称为：#id值。
小结：在定义的中，多个标签的class属性值可以相同，而id值要唯一，所以当要设定跨区域具有相同样式，但是同一区域不同样式的时候，我们选择class选择器，而要是设置一个区域具有独立的样式，选择id选择器。
4.关联选择器
实际就是标签中嵌套标签，主要用于要让相同标签中的不同标签显示不同样式
例：我们想让段落中的部分文字具有特殊样式，代码如下：
p b { color:yellow}
<p><b>2009年11月10日</b>北京下了一场大雪</p>
5.组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
span,div { color:white}
<span>2009年11月11日</span>
<div>光棍节快乐</div>
注意：多个不同选择器要用逗号分隔开。
6.伪元素选择器
是指对同一HTML元素的各种状态和其所包括的部分内容。
格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。例如我们设置a标签的各种不同状态：
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
如下为我们设置段落的各种不同状态
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。

z835648964 · 发表于 2022-10-4 06:01:04

我找了挺久终于找到了

溪谷小兵 · 发表于 2023-5-30 15:10:44

源码源码源码源码源码源码源码源码源码源码源码源码源码

回复用户1 · 发表于 2023-11-17 11:52:21

啪啪啪生怕PSP怕

回复用户1 · 发表于 2024-4-7 11:13:25

哟哟哟哟哟以偶

.l4 · 发表于 2024-4-19 03:58:38

2222222222222222

do827261756 · 发表于 2024-6-4 12:39:08

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

locopy · 发表于 2024-6-30 06:07:51

需要很久了终于找到了

q215357618 · 发表于 2024-7-16 10:28:37

66666666666

u7yxn9 · 发表于 2024-7-30 10:49:43

额UI废物iuhfujewfiewnnfen

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS入门篇之传智播客学习

相关帖子