CSS的概念
Cascading Style Sheet 级联样式表表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定CSS的优势
内容与表现分离网页的表现统一,容易修改丰富的样式,使得页面布局更加灵活减少网页的代码量,增加网页的浏览速度,节省网络带宽运用独立于页面的CSS,有利于网页被搜索引擎收录CSS基本语法结构
选择器 { 声明1;声明2;…… }例如:h1 {font-size:12px;color:#F00;}
CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上
style标签
内部样式css语法需要在style标签中声明,style标签位于head标签中
<style type="text/css">h1 {font-size:12px;color:#F00;}</style>
HTML中引入CSS样式
除了刚刚说的内部样式表还有 行内样式 和 外部样式表
内部样式表
CSS代码写在<head>的<style>标签中
<style>h1{color: green; }</style>
优点 :方便在同页面中修改样式
缺点 :不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1><p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
外部样式表
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>
链接式与导入式的区别:
<link/>标签属于XHTML,@import是属于CSS2.1使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的CSS样式优先级
一般来说定义的范围越小,优先级越高。
行内样式>内部样式表>外部样式表就近原则
CSS3基本选择器
标签选择器
语法:
p { font-size:16px;}
类选择器
需要定义class属性 <标签名 class= "类名称">标签内容</标签名>
语法:
.class { font-size:16px;}
ID选择器
需要定义id属性
语法:
#id { font-size:16px;}
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中原则上一个id只能使用一次
基本选择器的优先级
ID选择器>类选择器>标签选择器
CSS的高级选择器
层次选择器
后代选择器 EF
例:
body p{ background: red; }
子选择器 E>F
例:
body>p{ background: pink; }
相邻兄弟选择器
例:
.active+p { background: green; }
通用兄弟选择器
例:
.active~p{ background: yellow; }
结构伪类选择器
例:
ul li:first-child{ background: red;}ul li:last-child{ background: green;}p:nth-child(1){ background: yellow;}p:nth-of-type(2){ background: blue;}
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点 :
E F:nth-child(n)在父级里从一个元素开始查找,不分类型 E F:nth-of-type(n)在父级里先看类型,再看位置
属性选择器
属性选择器需要在标签中定义相对应的属性
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; }