CSS的初识部分（CSS概念和基础语法，引入CSS的三种方式，CSS基础选择器，CSS高级选择器）

01. CSS概念和基础语法

CSS的概念 ：Cascading Style Sheet 层叠样式表

用途：表现HTML文件样式的语言 u包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的发展史：

• 1996年 CSS1.0 u1998年 CSS2.0 。融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
• 2004年 CSS2.1 u融入了更多高级的用法，如浮动，定位等。
• 2010年 CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展， 又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性， 但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场 企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势.

CSS的优势：

• 内容与表现分离
• 网页的表现统一 ， 容易修改
• 丰富的样式 ， 使得页面布局更加灵活
• 减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽
• 运用独立于页面的CSS ， 有利于网页被搜索引擎收录

CSS的基础语法：

CSS的格式：

注意：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 。

Style标签：

Style 标签在HTML文档中的位置 ， 在 和 之间

    
    
    



狂神
西部开源

运行结果：

通过对Style中选择器指定的标签，将h1所包含的狂神渲染成蓝色，将西部开源字体变大处理。

02. 引入CSS的方式

1. 行内样式 ：使用style属性引入CSS样式

你好，CSS
nihao,css

Hello,css


GOODBYE,CSS

运行结果：

2. 内部样式表 ：CSS代码写在的 GOODBYE,CSS

   运行结果：
   
   3. 外部样式表
   外部样式表分为链接式和导入式

   • **标签属于XHTML，@import是属于CSS2.1
   • 使用链接的CSS文件先加载到网页当中，再进行编译显示
   • 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页 当中
   • @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
     CSS样式优先级（就近原则）
     行内样式 > 内部样式表 > 外部样式表

   链接式 ：

   • 在resources目录下建立css目录，在css下建立Style.css文件即下面这段代码

   div{
       color: #ff5f5d;
       font-size: 100px;
   }
   
   span{
       color: #539bff;
       font-size: 50px;
   }
   

   
   
   
       
       
       
       
   
   
   
   
       认真虚席Java
   
   
   
   

   运行结果：
   

   导入式 ：

   
   
   
       
       
           
   
   
   
       认真虚席Java
   
   
   
   

   运行结果：
   

   03. CSS基础选择器：

   1.标签选择器：
   

   2.类选择器：
   

   
   
   
       
       
       
   
   
   
   来西部开源
   成就IT梦想
   好好学习，天天向东航
   cool
   
   
   
   
   你好啊
   
   
   

   

   3.id选择器：

   

   
   
   
       
       
       
   
   
   1
   2
   3
   4
   
   
   
   

   运行结果：
   
   4.总结

   1. 标签选择器直接应用于HTML标签
   2. 类选择器可在页面中多次使用
   3. 选择器在同一个页面中只能使用一次
   4. 基本选择器的优先级：ID选择器>类选择器>标签选择器，且基本选择器不遵循 “ 就近原则 ”

   
   
   
       
       
       
   
   
   
   西部开源
   
   
   
   

   运行结果：
   

   04.CSS高级选择器

   高级选择器包括层次选择器，结构伪选择器，属性选择器

   • 层次选择器

   选择器	类 型	功能描述
   E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
   E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
   E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
   E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

   1. 后代选择器

   
   
   
       
       
   
       
   
   
   1
   2
   3
   
       
   
           
   4
       
       
   
           
   5
       
       
   
           
   6
       
   
   3
   
   
   
   

   运行结果：
   

   2. 子选择器

   

   
   
   
       
       
   
       
   
   
   1
   2
   3
   
       
   
           
   4
       
       
   
           
   5
       
       
   
           
   6
       
   
   3
   
   
   
   

   运行结果：
   

   3. 相邻兄弟选择器

   

   
   
   
       
       
   
       
   
   
   1
   2
   3
   
       
   
           
   4
       
       
   
           
   5
       
       
   
           
   6
       
   
   3
   
   
   
   

   运行的结果：
   

   4. 通用兄弟选择器

   

   
   
   
       
       
   
       
   
   
   1
   2
   3
   
       
   
           
   4
       
       
   
           
   5
       
       
   
           
   6
       
   
   3
   
   
   
   

   • 结构伪类选择器

   选择器	功能描述
   E:first-child	作为父元素的第一个子元素的元素E
   E:last-child	作为父元素的最后一个子元素的元素E
   E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
   E:first-of-type	选择父元素内具有指定类型的第一个E元素
   E:last-of-type	选择父元素内具有指定类型的最后一个E元素
   E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

   
   
   
       
       
   
       
   
   
   1
   2
   3
   
       
   li1
       
   li2
       
   li3
   
   
   
   

   运行结果：
   

   2. 属性选择器

   属性选择器	功能描述
   E[attr]	选择匹配具有属性attr的E元素
   E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
   E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
   E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
   E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

   
   
   
       
       
       
   
   
   
   
       
       2
       3
       4
       
       6
       7
       8
       9
   
   
   
   

   运行结果：