CSS3基础

一、CSS的发展历程

? 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
? 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS版本有2.0和3.0的版本，我们都会讲到，CSS3因为有兼容性问题，所以讲到CSS3样式的时候，这里会特殊标明。

二、CSS概述

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

三、CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。

在上面的样式规则中：

1.器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以键值对的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颈色等。
4.属性和属性值之间用英文":"连接。
5.多个“键值对”之间用英文";"进行区分。
可以用段落和表格的对济的演示。

 
 
 
    
    
    
    CSS初试
   
 
 
    Lorem
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus aperiam cumque repudiandae numquam illo magnam quaerat saepe inventore recusandae?
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolorem quia corrupti accusamus molestias delectus alias cum reprehenderit, repellat impedit officiis ab ipsa est eius asperiores ut eveniet sapiente dolorum soluta hic corporis. Necessitatibus aut asperiores ipsa assumenda tempore tenetur provident quasi. Sunt delectus rem, totam odit omnis eum cupiditate.
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque possimus non tempora nobis quis quas, aperiam ullam voluptas iste!

1、字体样式

font-size:字号大小

fot-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用铯对长度单位。其中，相对长度单位比较常用，推荐使用像素单位Px,绝对长度单位使用较少。具体如下：

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-family:字体

fot-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p {font--family:"微软雅黑"：}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

??常用技巧：

1.现在网页中普遍使用14px+。
2.尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug.
3.各种字体之间必须使用英文状态下的逗号隔开。
4,中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:"Times New Roman";.
6.尽量使用系统默认字体，保证在任何用户的浏览器中都能证确显示。

eg.font-family:"Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";

打开这个页面的时候默认打开微软雅黑，如果没有微软雅黑，那么打开“tahoma”，以此类推...

CSS Unicode:字体

在CSS中设置字体名称，直接写中文是可以的。但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误。Xp系统不支持类似微软雅黑的中文。
方案一：你可以使用英文来替代。比如font-family:"Microsoft Yahei'"。
方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确的解析的。
font-family:"5FAE\8F6F\96C5\9ED1",表示设置字体为"微软雅黑”。

字体名称	英文名称	Unicode编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\65877EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

? 注意：一般只用微软雅黑和宋体

font-weight:字体粗细

字体加粗除了用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-weight,属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍)。

数字400等价于normal,.而700等价于bold。但是我们更喜欢用数字来表示。

font-style:字体风格

font-style:字体风格
字体倾斜除了用1和m标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-stye属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal:.默认值，浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。

?? 小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签(em,1)改为普通模式。

font:综合设置字体样式(重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器 {font:font-style font-weight font-size/line-height font-family;}
如：h4 {font:italic bold 14px "微软雅黑";}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否测font属性将不起作用。

2、CSS注释

CSS规则是使用/*需要注释的内容*/进行注释的，即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/结束。

/* 这是CSS注释 */

四、选择器

1、类选择器




   
   
   
   类选择器
   


   鸣人
   佐助
   卡卡西

案例：用类选择器实现谷歌logo

2、多类名选择器

当一个标签需要多个CSS来修饰对时候，可以同时使用多个类。多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

1.样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
2.合个类名中间用空格隔开。（class="font color style"）

3、ID选择器

id选择器使用"#”进行标识，后面紧跟id名，其基本语法格式如下：

id名（属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。

大

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器(class)好比人的名字，是可以多次重复使用的，比如张伟，王伟，李伟，李娜
id选择器(id)好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最主要区别在于使用次数上。

4、通配符选择器

通配符谜择器用*"号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

*{
  margin:0;
  /*定义外边距*/
  padding:0;
  /*定义内边距*/
}

注意：
这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。

5、伪类选择器

首先，这也是一个选择器，伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第个元素。
为了和我们学的类选择器相区别，类选择器是一个点比如.dem{},而我们的伪类用2个点就是冒号比如：:11nk{}

1??、链接伪类选择器

:ink		/*未访问的链接*/
:visited/*已访问的链接*/
:hover	/*鼠标移动到链接上*/
:active	/*选定的链接*/

注意写的时候，他们的顺序尽量不要颠倒按照lvha的顺序。love hate记忆法或者W包包非常hao

2??、结构（位置）伪类选择器(CSS3)

:first-child:选取属于其父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n):匹配属于其父元素的第N个子元素，不论元素的类型
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

（n可以是数字、关键词或公式，如：关键词：偶孩子-odd，奇孩子-even；公式：2n+1）




    
    
    
    结构伪类选择器
    


    
        第一个孩子
        第二个孩子
        第三个孩子
        第四个孩子
        第五个孩子
        第六个孩子
        第七个孩子

3??、目标伪类选择器

:target目标伪类选择器：选择器可用于选取当前活动的目标元素

补充—命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_” 下滑线来命名CSS选择器。

输入的时候少按一个shift键；
浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
能良好的区分JavaScript变量命名（JS变量命名是用"_"）

3.不要纯数字、中文命名，尽量使用英文来命名CSS选择器。

五、CSS外观属性

1、color:文本颜色

color.属性用于定义文本的颜色，其取值方式有如下3种：
1??、预定义的颜色值，如red,green,blue等。
2??、十六进制，如#FF0000,#FF6600,#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。（两两相同可以简写，如：00FF00可以简写成0F0）
3??、RGB代码，如红色可以表示为rgb(255,0,0或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

2、line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素Px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

3、text~align:水平对齐方式

text:a1ign属性用于设置文本内容的水平对齐，相当于htm1中的a1ign对齐属性。其可用属性情如下：
left:左对齐（默认值）

right:右对齐

center:居中对齐

4、text-indent::首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏觉器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度。

5、letter-spacing:字间距

letter-.spacing属性用于定仪字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

6、word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-.spacingi定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

7、word-break:自动换行

normal使用浏览器默认的换行规则。

break-all允许在单词内换行。

keep-a只能在半角空格或连字符处换行。

8、文字阴景(CSS3)

CSS3以后，我们可以给我们的文字添加阴影效果了

text-shadow:水平位置 垂直位置 模糊距离 阴影 颜色；

值	描述
h-shadow	必需。水平阴景的位置。允许负值。
v-shadow	必需。垂直阴景的位置。允许负值。
blur	可选。模胎的距离。
color	可选。阴的颜色。参阅CSS颜色值。

1.前两项是必须写的。后两项可以选写。




    
    
    
    阴影
    


    阴影测试字体

快捷方式

1.生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成

2.如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div

3.如果有父子级关系的标签，可以用>,比如ul>li就可以了

4.如果有兄弟关系的标签，用+就可以了比如dlv+p

5.如果生成带有类名或者id名字的，直接写.demo或者#牡vo tab键就可以了

例子：

输入：.a+.head+.mian>.left+.right
快捷输出：

前端知识