css基础入门

CSS超全笔记（适合新⼿⼊门）

CSS

CSS初识

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）

CSS可以写到那个位置？ 是不是⼀定写到html⽂件⾥⾯呢？

内部样式表

内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：

语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。type="text/CSS" 在html5中可以省略， 写上也⽐较符合规范， 所以这个地⽅可以写也可以省略。

⾏内式（内联样式）

内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下： 内容

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）

链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：

注意： link 是个单标签哦

该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。type：定义所链接⽂档的类型，在这⾥需要指定为“text/CSS”，表⽰链接的外部⽂件为CSS样式表。rel：定义当前⽂档与被链接⽂档之间的关系，在这⾥需要指定为“stylesheet”，表⽰被链接的⽂档是⼀个样式表⽂件。

六、CSS⼊门

CSS核⼼基础

CSS样式规则

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

CSS代码结构中的特点

CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅

式。

多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。

如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。

在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。

在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。属性和属性值之间不允许出现空格，否则浏览器会报错

引⼊CSS样式表

优先级： 如果三种样式同时控制我们的内容：⾏内优先级最⾼

外部样式，内部样式：谁离着内容近，谁优先级⾼

1、⾏内式

⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式 内容

style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。其中属性和值的书写规范与CSS样式规则相

同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。

2、内嵌式

内嵌式是将CSS代码集中写在HTML⽂档的头部标记中，并且⽤

style标记内还可以存放其他的内嵌样式，@import语句需要位于其他内嵌样式的上⾯。

CSS基础选择器

概述

要想将CSS样式应⽤于特定的HTML元素，⾸先需要找到⽬标元素

在CSS中执⾏这⼀任务的样式规则部分被称为选择器1、标记(元素)选择器

标签名｛

｝

是指⽤HTML标记名称作为选择器，按标记名称分类，为页⾯中某⼀类标记指定统⼀的CSS样式

标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如:p{ font-size:12px; color:#666; font-family:"微软雅⿊";}

最⼤的优点是能快速为页⾯中同类型的标记统⼀样式，同时这也是他的缺点，不能设计差异化样式。

1 教学设计表

学校 南京市临江高级中学 姓名 高娟 班级 高二（11）班 开课日期 2013.10.22

课题 “玩”转css 课时 1

教材分析 “CSS样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。教材中将这块内容分为“什么是CSS”、“CSS实现”、“在HTML中加入CSS”三部分。学业考试纲要中对这部分的要求是“CSS样式表的简单使用”，对应于理解水平与独立操作水平，B类要求。在近年的学业考试中出题的机率很高，同样学生的出错率也高，根据多年的教学经验这部分内容如果在新课时没能让学生很好地掌握，学生很容易形成畏惧心理。而在实际生活中，css的应用也越来越广泛，它在制作网页时起着举足轻重的作用，当前div+css制作网页的理念被越多的人接受。因此这部分内容的教学就显得更为重要。为了让学生能学得既轻松又扎实，激发学生的积极性，让他们切实地体验到样式表的超凡的“魔力”就显得尤为重要。

本节学习中课本上以frontpage的html方式来展示代码的，但在教学为了让操作更直接，选用记事本打开也是不错的选择。这样做的好处是：一、在本次课的学习中会显得更为方便与简洁。二、可以让学生体会到frontpage只是网页常用编辑工具之一，html代码可以由任何一种文件编辑软件编辑，然后存成html格式，在浏览器中浏览。

学生分析 通过前一阶段的学习，学生已经对html基本标签有了一定的认识。但仅仅局限于记忆标签，对如何实际操作不了解，不清楚，为了让学生对本节内容有更深的印象，设计上采取了几种措施：一、提供半成品站点；二、利用学案中操作步骤提示，为学生提供帮助。三、相关代码提前做好，减轻学生录入负担，当他们操作时大屏幕也同时展示操作帮助；四、知识分步，层层深入；五、频繁开展讨论，让他们积极主动地进行思考。

教学目标 知识与技能目标：

（1）能充分体会到css样式表在网页制作中的强大作用。

和和

之间加入这 句，，然后所有的样式表都定义在这句表示网页的字体大小为9磅字，行距150%，td是“单元格”元素，这句也就是对单元格内的字 体起作用。这里的表示超链接都为红色，单行文本框的字体是9磅。 2.CSS作用很大的一方面就是可以用来大量减少网页代码，从而为网页减肥，原理就是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。目前大部分网站都是使用class来引用的。 CSS中，class和id的作用是完全一样的，“class”单词比“id”多3个字母。 id的使用方法，在网页，然后在网页使用这句引用它：黑蓝色，14磅的字。

段落„„ 也就是说，黑蓝色的字等价于黑蓝色的字；14磅的字等价于14磅的字，以此类推。这里的介绍可能有点不太好理解，你可以多实践。 注意：在一定条件下，使用id来引用可能不起作用或报错、或与javascript的id发 生冲突，这种情况下，你可以使用class来引用。class的使用方法与id一样，所不同的是：在网页的，它等效 于#a1{color:FF0000;font-size:9pt}。多个选择符名定义同一句的方法是，各选择符名之间加逗号，例 如这句等效 于#a1{color:FF0000}#b1{color:FF0000;font-size:9pt}。可能这里不太好理解，你只要自己稍微实践一下就 可以灵活自己定义了 5.样式表手册。下面列举最常用的样式表语句： 1)color (颜色，例如FF0000代表红色，000000代表黑色„„) 2)font-size (字体大小) 3)font-family

(字体类型) 4)width和height (宽度和高度) 5)line-height (段落行距，建议使用百分比的形式，例如150%) 6)margin-top表示段前；margin-bottom表示段后。margin- left表示整个段落向右缩进，margin-right表示段落右边距离右边的边框的距离。例如这句