CSS的概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言 （包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定）
CSS基本语法结构
选择器{声明1； h1{
声明2； font-size：12px；
。。。} color：#F00；}
style标签
<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.链接式 2.导入式
链接外部样式表
<head>
……
<link href="style.css（文件路径）" rel="stylesheet（使用外部样式表）" type="text/css（文件类型）" />
……
</head>
导入外部样式表：语法
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
链接式与导入式的区别
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级（行内样式>内部样式表>外部样式表）就近原则
CSS3基本选择器（标签选择器，类选择器，ID选择器）
HTML标签作为标签选择器的名称（<h1>…<h6>、<p>、<img/>）
p（标签选择器） { font-size（属性）:（声明）16px（值）;}
类选择器
<标签名 class= "类名称">标签内容</标签名>
ID选择器
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
基本选择器的优先级（ID选择器>类选择器>标签选择器）
CSS的高级选择器（层次选择器 结构伪类选择器 属性选择器）
层次选择器：
后代选择器：
子选择器：
相邻兄弟选择器：
通用兄弟选择器：
结构伪类选择器：
属性选择器：
E[attr]属性选择器：a[id] { background: yellow; }
E[attr=val]属性选择器：a[id=first] { background: red; }（E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中）
E[attr*=val]属性选择器：a[class*=links] { background: red; }
E[attr^=val]属性选择器：a[href^=http] { background: red; }
E[attr$=val]属性选择器：a[href$=png] { background: red; }
总结：
2593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
