Web云笔记--CSS

CSS CSS CSS

Web自学第二阶段之CSS

参考资料：《Head First HTML&CSS》（中文第二版）(美国)弗里昂ISBN：9787508356464
中国电力出版社

全部阶段：HTML基础àCSSà高级HTMLàJavaScriptàPHP脚本àWeb渗透

前情提要：早在上世纪九十年代初，为了迎合互联网的发展，（因为当时互联网是有了但是人们上网没东西可看。。）人们迫切的期望一种统一的版面在网络上共享信息，一种叫做超文本（hyper text）的文本诞生了，超文本之所以叫超文本是因为它不仅能展现出文本，还能“花样”地展现文本（好吧当时根本没有多媒体的概念）比如字体有大有小，有不同的颜色，甚至画一张表格（可以看成word的前身），这种超文本能够传达出比纯文本文件更丰富的内容，所以将之放在网页上再好不过了，为了实现它，超文本标记语言html诞生了。

7.CSS简介

！！！！！！！！！！！！！！CSS的前身：没有前身，只能说是雏形。早期超文本标记语言html为了在排版，字体和色彩等方面增添一些样式，特别引入了元素的style属性，通过style属性程序员可以控制元素的文本、背景、边框、内外边距等的样式，虽然这个属性目前任然通用而且也被小编我认为是最方便最直观的添加样式的方式，但是由于市场的原因，比如说要对网页样式进行批量的修改亦或是针对不同时间地点甚至不同用户而要采用不同的样式风格，因此我们引入了新的语言-------CSS。

CSS（cascade style
sheet层叠样式表）文件更像是一个滤镜，网页就像一张照片，通过CSS而焕然一新！！！！！

改变网页的样式有三种方法，分别是通过html属性，css文件以及JavaScript程序，但是三种方式更本上都是通过css语言来完成的！！！！

！！！！！！！！！！！！CSS的语法和HTML截然不同，没有了尖括号，除号，空格，引号和等号，取而代之的是大括号，减号，分号，逗号和冒号。

的color样式貌似不会继承。

！！！！！！下边框与下划线的区别：如果文本（innerHTML）有转行（认为转或者自动转）那么下划线将有多行的，但下边框（border-bottom）只有一条。

Css的基本组成单元（就是一个个大括号）叫做选择器。

！！！Css只能对body以下的元素（包括body）增加样式。

Css文件既可以内嵌在html的中也可以通过外部链接，固定格式：

通常一个网站的所有网页的风格一致，所以通常会共享同一个css文件。

绝大多数样式属性都是继承的。

继承与覆盖。

！！！！！Css的批量增添样式方法：既可以通过元素类型来选择，也可以自定义类和ID

元素和类是多对多的关系。

元素和ID是一对一的关系。

Css和html的属性值之间都是空格隔开，但属性之间前者是分号后者是空格。

Css中有错误，错误以下的其他规则都会被忽略？？？？？？！！！！！！！！！！！

Css查错工具：http://jigsaw.w3.org/css-validator/

行业建议：这个社会不需要精而需要广，不会的点只要会查就ok！

8、CSS语文课------扩大词汇量

字体五大家族：

Sans-serif系列：

Verdana

Arial Black

Trebuchet MS

Arial

Geneva

特点是：无衬线，很“工整”，粗细均匀

Serif系列：

Times

Times New Roman

Georgia

特点：有棱角，粗细不均

Monospace系列：

Courier

Courier New

Andale Mono

特点：不同字符不同的宽度

Cursive系列：

Comic sans

Apple Chancery

特点：草书

Fantasy系列：

LAST NINJA

Impact

特点：花样字体

Css指定字体font-family：字体名称之间他妈的用逗号隔开。。。记住就好记住就好

而且大小写必须一致（首字母大写）

从左至右，客户机不支持此字体就向右找，所以最后一个通常写五大系列名

！！！因为空格的特殊性，字体名中有空格的话，要用双引号把整个字体名括起来

Web云字体@font-face：

字体文件与字体文件格式：

字体文件：定义了字体样式的形状（就是图片）

字体文件格式：用那种编码来表示上面的字体文件（联想图片格式）

！！！！！字符的不同字体在字符编码中都是同一个

常用格式：ttf otf eot svg woff

每日推荐：PDF文件跨设备跨系统跨字体值得一用（缺点是体积大）

每个字体拥有一个@font-face

通常屏幕像素1cm=25px；1px=0.4mm

指定字体大小的三种方式：

1.

指定px值（字体高度）

2.

指定百分比%：相对于父元素

3.    
em。同上

一些默认值：

H1:2em

H2:1.5em

H3:1.17em==big

H4==p==ul==ol==1em

H5==0.83em==small

H6:0.75em

Body:14px

习惯：调整body字体大小控制所有字体等比例缩放

快捷方式：xx-small x-small small medium large x-large
xx-large

Jim独创L(不要脸)：

Small- small small+ medium- medium medium+ large-
large large+

或者：

Smallest smaller small small-medium medium
medium-large large larger largest

温馨提示：了解就好，看一遍就好，不用记忆。。。

改变字体粗细：

Font-weight：normal/bold/lighter。。。

Text-decoration：none去掉下划线

斜体：

Font-style：italic/oblique

HTML、css都不是程序语言，所以浏览器都有差错改错功能，不区分大小写

三种指定颜色方法：

1.rgb（xx%,xx%,xx%）或rgb（xx,xx,xx）  
rgba?

2.#xxxxxx缩写：#xxx

3.颜色名：150+种

Css语法错误，浏览器忽略整个选择器，不影响其他选择器