初识css3
css概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
css在网页中的应用
css的发展史
1996年css1.0——1998年5月2.0——2004年css2.1——2010年css3.0
css的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS语法规则，使用<style>引入标签CSS样式
<style type="text/css"> h1 {font-size:12px;color:#F00;} </style>
html中引入css样式
行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式
CSS代码写在<head>的<style>标签中
<style> h1{color: green; } </style>
优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
外部样式
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
1、连接式
<head> …… <link href="style.css" rel="stylesheet" type="text/css" /> …… </head>
2、导入式
<head> …… <style type="text/css"> <!-- @import url("style.css"); --> </style> </head>
链接式与导入式的区别
1、<link/>标签属于XHTML，@import是属于CSS2.1
2、使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
3、使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
三种CSS样式优先级
行内样式>内部样式表>外部样式表
就近原则
css3的选择器
基本选择器和高级选择器
基本选择器
1、标签选择器
2、类选择器
<标签名 class= "类名称">标签内容</标签名>
3、id选择器
签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
ID选择器>类选择器>标签选择器
高级选择器
层次选择器、结构伪类选择器、属性选择器
1、层次选择器
2、结构伪类选择器
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置
3、属性选择器
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
