CSS第一天

发布时间：2023-09-06 01:18责任编辑：顾先生关键词：CSS

一、对html第二天的知识的一个小总结：

抽象的HTML骨架结构：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M01/08/B9/wKiom1nmGhyyaIqxAACbnOf9GkY516.png" title="1.PNG" alt="wKiom1nmGhyyaIqxAACbnOf9GkY516.png" />

1、DTD：文档类型声明Doc Type Declaration。一共有7种DTD，3种HTML4.01的，3种XHTML1.0的，1种HTML5的。

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

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

2、字符集Charset，代码书写如下：

这条语句不需要背诵。

UTF-8 ：字符全，包含了全球的可识别的语言字符。每一个汉字3个字节，所以文件尺寸比较大。

gb2312(gbk) ：字符少，仅包含汉语和一些比较常用的英语、字符等。每一个汉字2个字节，所以文件尺寸较小。

3、关键词、页面描述。

<metaname=”Description”content=”页面描述”/>

这两条语句比较短，可以背一下。

4、title标签就是页面标题。

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

h1~h6 标题

p 段落

p标签要注意的是，里面只能放文本、图片、表单元素。

6、img图片

Src:全拼source,表示资源的意思。

Alt:全拼alternate,表示替代物的意思。

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

<imgsrc=”../../0.png”alt=””/>

7、a标签，超级链接。

a:全拼anchor,锚的意思。

A标签常用的就是3个属性：

<a href=”网址”title=”悬停文本”target=”_blank”>超链接文字</a>

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

如果想跳转到某个锚点：

<ahref=”#grjj”></a>

8、Chrome浏览器，中文翻译是“铬”。审查元素功能快捷键是F12。

。

二、列表

列表有3种，无序列表、有序列表、定义列表。

1、无序列表

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

如图：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M00/A7/68/wKioL1nmF7aA2o6XAAAhswKopOw549.png" title="1.PNG" alt="wKioL1nmF7aA2o6XAAAhswKopOw549.png" />

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

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

这是一个“组标签”，组标签就是要么不写，要么就写一组。所以li不能单独存在，必须包裹在ul里面；反过来说，ul 的里面不能是别的东西，只能有li。

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/08/B9/wKiom1nmGuaBxeuNAAAfwNhX-3U596.png" title="1.PNG" alt="wKiom1nmGuaBxeuNAAAfwNhX-3U596.png" />

不过我们得强调一下，ul的作用并不是给文字增加小圆点的，而是增加无序列表的“语义”。

而下面两个都是错误的：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/08/B9/wKiom1nmGx7S8w7zAAAd9j5kCcA739.png" title="1.PNG" alt="wKiom1nmGx7S8w7zAAAd9j5kCcA739.png" />

因为li必须用ul包裹。

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/A7/69/wKioL1nmGJ6AAlfMAAAud1-fdhA191.png" title="1.PNG" alt="wKioL1nmGJ6AAlfMAAAud1-fdhA191.png" />

因为ul里面只能有li标签，而不能有别的。

但是li是一个容器级标签，li里面什么都能放：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M00/08/B9/wKiom1nmG5iRgn-dAAB4fJHKT-Y864.png" title="1.PNG" alt="wKiom1nmG5iRgn-dAAB4fJHKT-Y864.png" />

甚至于可以再放一个ul：

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M00/A7/69/wKioL1nmGR7xolQ4AAAiX53zst8239.png" title="1.PNG" alt="wKioL1nmGR7xolQ4AAAiX53zst8239.png" />

2、有序列表

有序列表：ordered list,用ol表示。

650) this.width=650;" src="https://s3.51cto.com/wyfs02/M02/08/B9/wKiom1nmHAqgSfToAAAg-qLtmFM957.png" title="1.PNG" alt="wKiom1nmHAqgSfToAAAg-qLtmFM957.png" />

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

650) this.width=650;" src="https://s3.51cto.com/wyfs02/M02/A7/69/wKioL1nmGY6i4YBMAAAXaj9VjH8020.png" title="1.PNG" alt="wKioL1nmGY6i4YBMAAAXaj9VjH8020.png" />

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

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

3、定义列表

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

dl表示definitionlist 定义列表

dt表示definitiontitle 定义标题

dd表示definitiondescription 定义表述词

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

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/08/B9/wKiom1nmHS2wYTw6AAE90v-Kfqk189.png" title="1.PNG" alt="wKiom1nmHS2wYTw6AAE90v-Kfqk189.png" />

表达的语义是两层：

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

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

dd是描述dt的。

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M02/A7/69/wKioL1nmGxfQq43cAAAv1j6Drv4078.png" title="1.PNG" alt="wKioL1nmGxfQq43cAAAv1j6Drv4078.png" />

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

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

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

三、div和span

div和span是非常重要的标签，div的语义是division“分割”；span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/A7/69/wKioL1nmG46CfdmjAABuy3jmfBI382.png" title="1.PNG" alt="wKioL1nmG46CfdmjAABuy3jmfBI382.png" />

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/A7/69/wKioL1nmG9WQgfmSAAD6DDBkmGQ388.png" title="1.PNG" alt="wKioL1nmG9WQgfmSAAD6DDBkmGQ388.png" />

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

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

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

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

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

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/08/B9/wKiom1nmHsviihlHAAAQg6REa_s308.png" title="1.PNG" alt="wKiom1nmHsviihlHAAAQg6REa_s308.png" />

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/08/B9/wKiom1nmHwGCQriwAAAXwos8b9k494.png" title="1.PNG" alt="wKiom1nmHwGCQriwAAAXwos8b9k494.png" />

这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

四、表单

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

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M00/A7/69/wKioL1nmHIPh_b3nAACl-A5LrHI646.png" title="1.PNG" alt="wKioL1nmHIPh_b3nAACl-A5LrHI646.png" />

form是英语表单的意思。form标签里面有action属性和method属性，稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

4.1 文本框

<inputtype=”text”/>

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

Type表示“类型”。

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

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

1 <meta name=”Keywords” content=”” />

2 <img src=”” alt=”” />

3 <input type=”text” />

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

1 <input type="text" value="默认有的值" />

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M02/08/B9/wKiom1nmH3yQdlHoAAALjNdTIjU862.png" title="1.PNG" alt="wKiom1nmH3yQdlHoAAALjNdTIjU862.png" />

4.2 密码框

650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/08/B9/wKiom1nmH8ygPEgSAAANucO4JpE349.png" title="1.PNG" alt="wKiom1nmH8ygPEgSAAANucO4JpE349.png" />

4.3 单选按钮

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M01/A7/69/wKioL1nmHU3zT17IAADhxYoFyso812.png" title="1.PNG" alt="wKioL1nmHU3zT17IAADhxYoFyso812.png" />

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/08/B9/wKiom1nmIDWDYx6tAAAGXzq_IF8423.png" title="1.PNG" alt="wKiom1nmIDWDYx6tAAAGXzq_IF8423.png" />

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

<input type=”radio”name=”xingbie”/>男

<input type=”radio”name=”xingbie”/>女

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

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

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

4.4 复选框

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/08/B9/wKiom1nmIHPzOwCRAAF4dQXDQ8Q777.png" title="1.PNG" alt="wKiom1nmIHPzOwCRAAF4dQXDQ8Q777.png" />

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M01/A7/69/wKioL1nmHe6jHLHtAAAKn_3-YaA991.png" title="1.PNG" alt="wKioL1nmHe6jHLHtAAAKn_3-YaA991.png" />

也是input标签，type是checkbox。

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

4.5 下拉列表

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

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

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M00/08/B9/wKiom1nmINvzZlvHAADqhi4K2_g837.png" title="1.PNG" alt="wKiom1nmINvzZlvHAADqhi4K2_g837.png" />

4.6 多行文本框（文本域）

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/A7/69/wKioL1nmHlmxHN4jAABnCZ6F5Ts695.png" title="1.PNG" alt="wKioL1nmHlmxHN4jAABnCZ6F5Ts695.png" />

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

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

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

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

4.7 三种按钮

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

普通按钮：

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

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M02/A7/69/wKioL1nmHo3B9rEoAAA8ENvq72s603.png" title="1.PNG" alt="wKioL1nmHo3B9rEoAAA8ENvq72s603.png" />

提交按钮：

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/08/B9/wKiom1nmIXjx4XCYAAAfGCFTL-U016.png" title="1.PNG" alt="wKiom1nmIXjx4XCYAAAfGCFTL-U016.png" />

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

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

重置按钮：

reset就是“复位”的意思。

4.8 label标签

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

1 <input type="radio" name="sex" /> 男

2 <input type="radio" name="sex" /> 女

label就是解决这个问题的。

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

复选框也有label：

<label for=”kk”>10天内免登陆</label>

什么表单元素都有label。

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M02/08/B9/wKiom1nmIbTieNEVAAA_v0t1DHo389.png" title="1.PNG" alt="wKiom1nmIbTieNEVAAA_v0t1DHo389.png" />

五、HTML杂项

5.1 HTML注释

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

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

HTML注释的语法

Sublime中按ctrl+/ 就是注释

5.2 字符实体

我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。

1 好高兴啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。

所以，<

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

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

>就是>的字符实体。

gt就是greater than 大于的意思。

©就是版权符号。

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

所以：

哈    哈

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

5.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。这些样式的标签，都已经被废弃。

例如：

1 <b>加粗</b>

2 <u>下划线</u>

3 <i>倾斜</i>

4 <del>删除线</del>

5 <em>强调</em>

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

水平线：<hr/>

换行：<br/>是不另起一个段落，进行换行。

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M01/A7/69/wKioL1nmH4ahfVeFAAAf_PCiyaI889.png" title="1.PNG" alt="wKioL1nmH4ahfVeFAAAf_PCiyaI889.png" />

网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用<br />br是英语break打断的意思。

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

div ph1 span aimg ul oldl input。

六、CSS

现在的互联网前端三层：

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

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

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

现在开始学习的CSS了，就是样式。

6.1 CSS整体感知

css是cascading style sheet 层叠式样式表的简写。

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/08/B9/wKiom1nmIgOxmU-_AAFbKxwyOvQ405.png" title="1.PNG" alt="wKiom1nmIgOxmU-_AAFbKxwyOvQ405.png" />

我们写css的地方是style标签，就是“样式”的意思，写在head里面。css也可以写在单独的文件里面，现在我们先写在style标签里面：

<styletype=”text/css”>

</style>

type表示“类型” ， text就是“纯文本”。css也是纯文本的。sublime这里如果想自动生成，那么要输入：

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M02/08/B9/wKiom1nmInWjm7bfAAADDkDB4Qg154.png" title="1.PNG" alt="wKiom1nmInWjm7bfAAADDkDB4Qg154.png" />

<st 然后按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

2、字号大小：

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

单位必须加，不加不行。

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

3、背景颜色：background-color: blue;

background就是“背景”。

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

4、加粗：font-weight: bold;

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

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

不加粗：font-weight: normal;

normal就是正常的意思

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

5、斜体：font-style: italic;

italic就是“斜体”

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

不斜体：font-style: normal;

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

6、下划线：text-decoration: underline;

decoration就是“装饰”的意思。

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

没有下划线：text-decoration:none;

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

七、基础选择器

css有两个知识部分：

1）选择器，怎么选；

2）属性，样式是什么

7.1标签选择器

就是标签的名字。

注意的是：

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

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M00/08/B9/wKiom1nmIrqzTu0tAAA7NZwMOI4044.png" title="1.PNG" alt="wKiom1nmIrqzTu0tAAA7NZwMOI4044.png" />

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

能够让很深的p变蓝。

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

7.2 id选择器

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/08/BA/wKiom1nmIuyyijSOAAB3XRb4gJE155.png" title="1.PNG" alt="wKiom1nmIuyyijSOAAB3XRb4gJE155.png" />

css：

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M01/08/BA/wKiom1nmIxaSdoywAAAW9swogto515.png" title="1.PNG" alt="wKiom1nmIxaSdoywAAAW9swogto515.png" />

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

650) this.width=650;" src="https://s5.51cto.com/wyfs02/M02/A7/69/wKioL1nmIIqBrRqHAABOsR81SqE281.png" title="1.PNG" alt="wKioL1nmIIqBrRqHAABOsR81SqE281.png" />

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

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

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

2）必须以字母开头

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

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

650) this.width=650;" src="https://s1.51cto.com/wyfs02/M01/08/BA/wKiom1nmI3fi1wqTAAEs5-99In4791.png" title="1.PNG" alt="wKiom1nmI3fi1wqTAAEs5-99In4791.png" />

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

CSS第一天

原文地址：http://xuhoji.blog.51cto.com/13357671/1973583

CSS第一天

四、表单

4.2 密码框

4.3 单选按钮

4.4 复选框

4.5 下拉列表

4.6 多行文本框（文本域）

4.7 三种按钮

4.8 label标签

五、HTML杂项

5.1 HTML注释

5.2 字符实体

5.3 HTML废弃标签介绍

六、CSS

现在的互联网前端三层：

6.1 CSS整体感知

6.2 一些常见的属性

七、基础选择器

7.1标签选择器

7.2 id选择器

知识推荐