CSS基础入门

第1天课堂笔记

一、上节课知识复习

● HTML骨架结构，抽象的：

1 <!DOCTYPE …… >
 2 <html>
 3  <head>
 4  网页的配置
 5  </head>
 6  <body>
 7  给用户看的
 8  </body>
 9 </html>

 

● DTD：文档类型声明Doc Type Declaration。一共有7种DTD，3种HTML4.01的，3种XHTML1.0的，1种HTML5的（HTML5我们后面专门的课程学习）。

三个小种： strict（更为严格，不能用u、b、i标签）、transitional（不怎么严格）、frameset

XHTML总体上要比HTML严格，比如必须是小写字母标签等等。

 

● 字符集Charset， 这条meta不用背。

1

UTF-8     ： 字符全，每一个汉字3个字节，所以文件尺寸大。

gb2312(gbk) ： 字符少，每一个汉字2个字节，所以文件尺寸小。

 

● 关键词、页面描述，这两个meta不难，尽量背诵一下：

1


 

● title标签就是页面标题

 

● HTML就是负责描述语义的，所以就是用标签对儿的形式来给文本增加语义。

h1~h6  标题

p 段落

p标签要注意的是，里面只能放文本、图片、表单元素（这三个东西都是流元素，CSS后面细讲）。

 

● img图片

完整语法，两个属性src和alt，都要知道是什么意思！

src：  source资源，    alt ： alternate 替代物

1


图片里面的路径，相对路径，从html出发，找到图片。

1


2


● a标签，超级链接

a是英语anchor锚的意思。

a标签常用的就是三个属性：

1 超级链接文字

 

页面内的锚点，用name属性或者id属性

1


如果想跳转到某个锚点：

1

 

● Chrome浏览器，中文翻译应该是“铬”，不是“硅”。审查元素功能快捷键是F12。

前端，很多东西都是自己审出来的，前端高手，都是开着审查元素上网的。

二、列表

列表有3种

2.1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul就是英语unordered list，“无序列表”的意思。

li 就是英语list item ， “列表项”的意思。

你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。

1


  • 北京



  • 上海



  • 广州



  • 铁岭


6

也就是说，所有的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

 

下面的是错误的，因为必须用ul包裹：

7

  • 北京



  • 上海



  • 广州



  • 铁岭


 

下面的也是错误的，因为ul里面只能有li标签，而不能有别的：

1


中国主要城市



  • 北京



  • 上海



  • 广州



  • 铁岭


7

 

浏览器会默认的给无序列表小圆点的“先导符号”

但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

 

ul标签实际应用场景：

导航条：

 

li里面放置的内容可能很多：

 

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：

 

甚至于可以再放一个ul：

1



3 吃的



  • 饼干



  • 面包




22 巧克力



  • 德芙



  • 费列罗


26

27

28

4



6 用的



  • 笔记本



  • 圆珠笔


10

11



13 喝的



  • 牛奶



  • 可乐


17

18

19

 

2.2 有序列表

ordered list  有序列表，用ol表示

1


  • 小苹果



  • 月亮之上



  • 最炫民族风


5

浏览器会自动增加阿拉伯序号：

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。

ol里面只能有li，li必须被ol包裹。li是容器级。

 

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

1


  • 1. 小苹果



  • 2. 月亮之上



  • 3. 最炫民族风


5

 

2.3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 定义列表

dt表示definition title    定义标题

dd表示definition description 定义表述词儿

dt、dd只能在dl里面；dl里面只能有dt、dd

1

北京

国家首都，政治文化中心

上海

魔都，有外滩、东方明珠塔、黄浦江

广州

中国南大门，有珠江、小蛮腰

8

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

dd是描述dt的。

定义列表用法非常灵活，可以一个dt配很多dd：

1

北京

国家首都，政治文化中心

污染很严重，PM2.0天天报表

上海

魔都，有外滩、东方明珠塔、黄浦江

广州

中国南大门，有珠江、小蛮腰

9

北京这个项目，用了两个dd来描述。

还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。

1

北京

国家首都，政治文化中心

污染很严重，PM2.0天天报表

5

6


上海

魔都，有外滩、东方明珠塔、黄浦江

10

11


广州

中国南大门，有珠江、小蛮腰

15

 

真实案例：

京东最下方：

结构：

1

购物指南


4 购物流程

5 会员介绍

6 生活旅行/团购

7 常见问题

8 大家电

9 联系客服

10

11


配送方式


15 上门自提

16 211限时达

17 配送服务查询

18 配送费收取标准

19 海外配送

20

21

 

 

dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：

用什么标签，不是根据样子来决定，而是语义。

三、div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。

CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

 

1



中国主要城市




  • 北京



  • 上海



  • 广州


7

8


9




美国主要城市




  • 纽约



  • 洛杉矶



  • 华盛顿



  • 西雅图


17

18


div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

 

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span里面是放置小元素的，div里面放置大东西的：

1



2 简介简介简介简介简介简介简介简介


4 详细信息

5 购买

6

7

div标签是最最重要的布局标签，至于class是什么意思，下午说：

1







4










8





所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

 

四、表单

表单就是收集用户信息的，就是让用户填写的、选择的。

1



欢迎注册本网站



4 所有的表单内容，都要写在form标签里面

5

6


form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

4.1 文本框

1

 

input表示“输入”，指的是这是一个“输入小部件”，

type表示“类型”，

text表示“文本”，指的是类型是一个文本框的输入小部件。

这是一个自封闭标签，自此，我们学习的自封闭标签有：

1

2



 

value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：

1

4.2 密码框

1

也就是说，input标签很神奇，又是文本框，又是密码框。

到底是啥？看type属性的值是什么，来决定。

如果type=”text”  文本框

如果type=”password” 密码框

 

4.3 单选按钮

只能选一个，术语叫做“互斥”。

1


radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。

非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。

 

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

1


默认被选择，就应该书写checked=”checked”

1

 

4.4 复选框

也是input标签，type是checkbox。

1



2 请选择你的爱好：







9

复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

 

HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容，所以我们是在专门的HTML5课程中学）。

不过现在，我们就先学习这四个。

1




4.5 下拉列表

select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

1 北京 3 河北 4 河南 5 山东 6 山西 7 湖北 8 安徽

 

4.6 多行文本框（文本域）

text就是“文本”，area就是“区域”。

1

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

 

cols属性表示columns“列”，rows属性表示rows“行”。

值就是一个数，表示多少行，多少列。

 

4.7 三种按钮

按钮也是input标签，一共有三种按钮：

普通按钮：

1

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

 

提交按钮：

1

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。

前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。（Node.js我们猴年要学，Node.js就是后台语言，到时候我们就知道怎么把表单存储到数据库中了。实际上Ajax课会给大家讲半天的PHP，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。）

重置按钮：

1

reset就是“复位”的意思。

 

 

至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：

1 text

2 password

3 radio

4 checkbox

5 button

6 submit

7 reset

 

4.8 label标签

本质上讲，“男”、“女”这两个汉字，和input元素没有关系。

1


 

label就是解决这个问题的。

1 男

女

 

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。

 

复选框也有label：

1

10天内免登陆

什么表单元素都有label。

五、HTML杂项

5.1 HTML注释

任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。

 

适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。

1


头部


3


主要内容


5


页尾


HTML注释的语法

1

Sublime中按ctrl+/ 就是注释

 

5.2 字符实体

我们想在页面上输出“

”这些字符，但是HTML认为这是一个标签，还没封闭。

1 好高兴啊，今天我们学习了

标签，老师说这个标签是主标题的语义。


所以，

1 <

就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。

lt 就是英语less than 小于的意思；

 

1 >

就是>的字符实体。

gt就是greater than 大于的意思。

 

1 ©

就是©  版权符号。

 

1  

nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

 

所以：

1 哈    哈

空出了4个字的格，可以防止空白折叠现象。

5.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。

这些样式的标签，都已经被废弃。

 

2004年之前的东西了：

1 哈哈

 

这些标签都是css钩子，而不是原意：

1 加粗

2 下划线

倾斜

4 删除线

5 强调

6 强调

这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

 

水平线：

1


 

换行：

1

不另起一个段落，进行换行。

1



2 哈
哈哈

3

网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用

br是英语break打断的意思。

 

标准的div+css页面，用的标签种类很少：

1 div p h1 span a img ul ol dl input

知道每个标签的特殊用法、属性。比如a标签，img的属性。

HTML结构、字符集。

网络的基础知识。

六、CSS

现在的互联网前端三层：

HTML     超文本标记语言    从语义的角度描述页面结构。

CSS        层叠式样式表       从审美的角度负责页面样式。

JS           JavaScript             从交互的角度描述页面行为。

 

我们现在要开始学习CSS了，就是样式。

6.1 CSS整体感知

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。

css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不矛盾，必须先学2.1然后学3。

 

1

 

 

我们写css的地方是style标签，就是“样式”的意思，写在head里面。

后面的课程你将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面

1

type表示“类型” ， text就是“纯文本”。css也是纯文本的。

sublime这里如果想自动生成，那么要输入：

然后按tab键。

 

css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

语法：

1 选择器{

2 k:v;

3 k:v;

4 k:v;

5 k:v;

6 }

7 选择器{

8 k:v;

9 k:v;

10 k:v;

11 k:v;

12 }

6.2 一些常见的属性

字符颜色：

1 color:red;

color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制，不要着急，后几天讲。

sublime中的快捷键是c，然后tab

 

字号大小：

1 font-size:40px;

font就是“字体”，size就是“尺寸”。px是“像素”。

单位必须加，不加不行。

sublime中的快捷键是fos，然后tab

 

背景颜色：

1 background-color: blue;

background就是“背景”。

sublime中的快捷键是bgc，然后tab

 

加粗：

1 font-weight: bold;

font是“字体” weight是“重量”的意思，bold粗。

sublime中的快捷键是fwb，然后tab

不加粗：

1 font-weight: normal;

normal就是正常的意思

sublime中的快捷键是fwn，然后tab

 

 

斜体：

1 font-style: italic;

italic就是“斜体”

sublime中的快捷键是fsi，然后tab

不斜体：

1 font-style: normal;

sublime中的快捷键是fsn，然后tab

 

下划线：

1 text-decoration: underline;

decoration就是“装饰”的意思。

sublime中的快捷键是tdu，然后tab

 

没有下划线：

1 text-decoration:none;

sublime中的快捷键是tdn，然后tab

 

css没啥难的，就是要把属性给记忆准确。

 

七、基础选择器

css怎么学？很简单有两个知识部分：

1） 选择器，怎么选；

2） 属性，样式是什么

7.1 标签选择器

就是标签的名字。

1

前端与移动开发1期班基础班


css:

1

 

注意的是：

1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input

1 ul{

2 background-color: yellow;

3 }

 

2） 无论这个标签藏的多深，一定能够被选择上：

1













我是很深的p


10

11

12

13

14

15

16

17

css：

1 p{

2 color:blue;

3 }

能够让很深的p变蓝。

 

3） 选择的所有，而不是一个。

 

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。

7.2 id选择器

1

我是段落1



我是段落2



我是段落3


css：

1

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。

这个标签的名字，可以任取，但是：

1） 只能有字母、数字、下划线

2） 必须以字母开头

3） 不能和标签同名。比如id不能叫做body、img、a

 

一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

 

一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。第二层含义，明天介绍。


如果选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？

实际上，css有着非常严格的计算公式，能够处理冲突，明天介绍。