我是小哈呀
我是小哈呀

CSS3基础

一、Css3的概念和优势

CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）

二、渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

三、CSS3选择器

1、控件[属性名]：只使用属性名，但没有确定任何属性值；

.log1 li[title]{background:red;}

            

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

2、控件[属性名="属性值"]：指定属性名，并指定了该属性的属性值；

.log2 li[class="first"]{background:green;}

           

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

3、控件[属性名~="属性值"]：指定属性名，并且包含有指定词汇，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

.log3 li[title~="ya"]{background:#ccc;}

           

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

4、控件[属性名^="属性值"]：指定了属性名，并且有属性值，属性值是以value开头的；

.log4 li[title^="zhao"]{background:#fcc;}

           

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

5、控件[属性名$="属性值"]：指定了属性名，并且有属性值，而且属性值是以“”内的内容结束的

.log5 li[title$="zhao"]{background:#faa;}

           

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

6、控件[属性名*="属性值"]：指定了属性名，并且有属性值，而且属值中包含了“”内的内容；

.log6 li[title*="hua"]{background:#dcc;}

           

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

7、控件[属性名|="属性值"]：指定了属性名，并且属性值是“”内的内容或者以“v属性值-”开头的值（比如说zh-cn）;

.log7 li[lang|="en"]{font-weight: bold;}

           

  • 提莫：提莫队长正在待命

    •        

  • 小炮：我好想射点什么

    •        

  • 狗头：生与死轮回不止，我们生他们死

    •    

1、结构性伪类选择器

X:first-child 匹配子集的第一个元素。

css:  .lol_1 li:first-child{background:red;}

html:

           

  • 剑圣，我的剑，就是你的剑

    •        

  • 石头人，俺也是从石头里蹦出来得。可为啥俺不是猴子

    •        

  • 盲僧，我用双手成就你的梦想

 

X:last-child匹配父元素中最后一个X元素

css: .lol_2 li:last-child{background:yellow;}

html:   

           

  • 剑圣，我的剑，就是你的剑

    •        

  • 石头人，俺也是从石头里蹦出来得。可为啥俺不是猴子

    •        

  • 盲僧，我用双手成就你的梦想

 

X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始

css:  .lol_3 li:nth-child(2){background:#fcc;}

html:

           

  • 剑圣，我的剑，就是你的剑

    •        

  • 石头人，俺也是从石头里蹦出来得。可为啥俺不是猴子

    •        

  • 盲僧，我用双手成就你的梦想

 

X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。

css:  .lol_4 p:only-child{background:red;}

html:

           

    这不是亲生的

       

 

X:nth-last-child(n)从最后一个开始算索引。

css:  .lol_5 li:nth-last-child(1){background:#caa;}

html:

           

  • 剑圣，我的剑，就是你的剑

    •        

  • 石头人，俺也是从石头里蹦出来得。可为啥俺不是猴子

    •        

  • 盲僧，我用双手成就你的梦想

 

X:first-of-type匹配同级兄弟元素中的第一个X元素

css:  .box1 p:first-of-type{background:#bcc;}

html:

       

盖伦，人在塔在

       

德邦，犯我德邦者，随远必诛

       

寒冰射手，你要来几发吗

 

X:last-of-type匹配同级兄弟元素中的最后一个X元素

css:  .box1 p:last-of-type{background:#bcc;}

html:

       

盖伦，人在塔在

       

德邦，犯我德邦者，随远必诛

       

寒冰射手，你要来几发吗

 

X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X

css:   .lol_6 li:nth-of-type(2){background:#bbb;}

html:

   

           

  • 剑圣，我的剑，就是你的剑

    •        

  • 石头人，俺也是从石头里蹦出来得。可为啥俺不是猴子

    •        

  • 盲僧，我用双手成就你的梦想

 

X:only-of-type匹配属于同类型中唯一兄弟元素的X

css:  .lol_7 p:only-of-type{background:#ddd;}

html:

           

    这是唯一的

 

X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素

css:   .lol_8 li:nth-last-of-type(1){background:red;}

html:

           

  • 剑圣，我的剑，就是你的剑

    •        

  • 剑圣，我的剑，就

    •        

  • 盲僧，我用双手成就你的梦想

 

:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

css:   :root{background:#c2c2c2;}

 

X:empty匹配没有任何子元素（包括包含文本）的元素X

css:  .lol_9 li:empty{background:red;width: 100px;height: 20px;}

html:

           

  • 剑圣，我的剑，就是你的剑

    •        

  •        

  • 盲僧，我用双手成就你的梦想

    •    

2、层级选择器

div>p{}

          h1

        

         

         

E>F

子选择器

选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F

相邻兄弟选择器

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

E~F

通用选择器

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

四、CSS3文本属性

文本阴影属性语法及应用

语法：text-shadow

说明：水平、垂直阴影的位置允许负值 可进行多阴影设置

盒子的阴影属性

box-shadow:水平 垂直 模糊 颜色;             inset阴影向内

文本换行的相关属性

word-wrap

属性值：

normal

说明：只在允许的断字点换行（浏览器保持默认处理）

break-word

说明：属性允许长单词或 URL 地址换行到下一行。

属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

Word-break

属性值：

break-all

说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句

Keep-all

说明：文本不会换行，只能在半角空格或连字符处换行。

举个例子：

css:     .test

{

width:100px;

border:1px solid #000000;

word-wrap:break-word;

}

html:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）

@font-face的语法规则：

@font-face {

font-family: ;

src: [][, []]*;

[font-weight: ];

[font-style: