CSS 教程
CSS 简介
CSS 指层叠样式表(Cascading Style Sheets)，插入样式表的方法有以下3种。
如何插入样式表
- 外部样式表 - 使用外部 .css 文件。
- 内部样式表 - 在HTML文档头部 <head> 区域使用 <style> 元素来包含CSS。
- 内联样式 - 在HTML元素中使用"style"属性。
样式选择器种类
- ```html
- 多个选择器可以组合使用。
- ```css
// "和"关系 用 ','分隔
#myId,.myClass,p {color:red}
// "包含关系" 用 ' '分隔(有时.class前的空格会删掉)
#myId .myClass p
多重样式优先级
多重样式优先级顺序
下面是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
- 通用选择器(*)
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式 style
!important 规则除外
与优先级无关，会覆盖CSS中任何其他的声明， 不建议使用 。
权重计算
内联样式权值 - 1000
ID 选择器权值 - 100
Class 类(伪类，属性)选择权值 - 10
HTML 标签(元素，伪元素)选择器 - 1
注意：权值计算不能进位，比如11个class类，不能算成11*10=110，该值最大不能超过100，所以可以当做99.99来看，不能进位。
下面的例子，利用选择器的权值计算，em 显示蓝色：
<html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00; /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F; /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
CSS 优先级法则
- 选择器都有一个权值，权值越大越优先；
- 权值相等时，后出现的样式表设置要 优于 先出现的样式表设置；
- 继承的 CSS 样式，不如后来指定的 CSS 样式；
CSS Backgrounds(背景)
背景颜色
css body {background-color:red}
背景图像
css body {background-image:url('paper.gif')}
背景图像 - 水平或垂直平铺
css body { background-image:url('paper.gif'); background-repeat:repeat; /* 该属性有5个值 repeat: 水平和垂直方向重复，默认值； repeat-x: 只在水平方向重复； repeat-y: 只在垂直方向重复； no-repeat: 不重复； inherit: 该属性继承自父元素； */ }
背景图像 - 固定或滚动
css body { background-image:url('paper.gif'); background-attachment:scroll; /* 该属性有4个值 scroll: 相对 元素 固定，在子滚动窗口中 不会 随滚动条滚动，默认值； local: 相对 元素内容 固定，在子滚动窗口中 会 随滚动条滚动； fixed: 相对 浏览器窗口 固定； inherit: 该属性继承自父元素； 实例见 myCss-bgattach.html 。 */ }
背景图像 - 位置
css body { background-image:url('paper.gif'); background-position: top right; /* 该属性有三种写法 写法1： top、bottom、left、right、center，另一个关键字默认为center 写法2：数字。图片左上角相对于元素左上角的x，y轴偏移量。 50px 100px: 即往右偏移50px，往下偏移100px； 写法3：百分比。类似写法2。 66% 33%： 即往右偏移66%，往下偏移33%； */ }
合并写法
css body {background:#ffffff url('paper.gif') no-repeat right top;}
CSS Text(文本)
文本对齐
css p.main {text-align:justify;} //每一行被展开为宽度相等，左、右外边距对齐
文本修饰
css a {text-decoration:none;} //删除下划线 h1 {text-decoration:overline} //文本上一条线 h2 {text-decoration:underline} //文本下一条线 h3 {text-decoration:line-through} //穿过文本下的一条线 p.detail {text-decoration:blink} //闪烁的文本
文本转换
css p.uppercase {text-transform:uppercase;} //整句大写 p.lowercase {text-transform:lowercase;} //整句小写 p.capitalize {text-transform:capitalize;} //每个单词首字母大写
文本缩进
css p {text-indent:50px}
文本间隔
css p {word-spacing:30px}
CSS Fonts(字体)
CSS 颜色(color)
CSS的颜色有三种表示方法，分别是：
单词：red，blue，green之类；
十六进制：按 红，绿，蓝 每种比例组合，数值大小表示对应颜色浓度；
RGB：按 红，绿，蓝 每种比例组合，数值大小表示对应颜色浓度；
p { /* 单词 */ background-color: red; /* 十六进制，可以缩写，00~FF */ background-color: #FF0000; //红色 background-color: #00FF00; //绿色 background-color: #0000FF; //蓝色 background-color: #000000; //黑色 background-color: #FFFFFF; //白色 background-color: #F00; //红色 background-color: #0F0; //绿色 background-color: #00F; //蓝色 background-color: #000; //黑色 background-color: #FFF; //白色 /* RGB，0~255 */ background-color: rgb(255,0,0) //红色 background-color: rgb(0,255,0) //绿色 background-color: rgb(0,0,255) //蓝色 background-color: rgb(0,0,0) //黑色 background-color: rgb(255,255,255) //白色 }
CSS link(链接)
css a:link {color:#FF0000;} //未访问链接 a:visited {color:#00FF00} //已访问链接 a:hover {color:#FF00FF} //鼠标移到链接上 a:active {color:#0000FF} //鼠标单击链接 /* hover必须跟在link和visited后面 active必须跟在hover后面 */
CSS ul(列表样式)
不同的列表项标记
css ul.a {list-style-type:none;} /* 该属性有4个值 none: 不使用项目符号； disc: 实心圆； circle: 空心圆； square: 实心方块； */ ol.a {list-style-type:demical;} /* 该属性有5个值 decimal: 阿拉伯数字； lower-alpha: 小写英文字母； upper-alpha: 大写英文字母； lower-roman: 小写罗马数字； upper-roman: 大写罗马数字； */
列表项标记的图像
css ul {list-style-image:url('square.gif');}
浏览器兼容性解决方案
css /* 用图像表示li */ ul { list-style-type:none; padding:0px; margin:0px; } ul li{ background-image: url('square.gif'); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
列表 - 缩写属性
ul { list-style: square url('square.gif'); } /* 用单个属性指定所有的列表属性，用list-style 顺序是： list-style-type； list-style-position； list-style-image； 另：url('square.gif') 会覆盖square的样式 */
CSS Table(列表)
表格 - 折叠边框
css tbale { border-collapse:collapse; } table, th, td { border: 1px solid block } /* border-collapse属性有3个值 separate: 边框会被分开，默认值； collapse: 边框不会被分开； inherit: 该属性继承自父元素； */
表格 - 文字对齐
css /* 水平对齐 */ td { text-align:left; //center;right } /* 垂直对其 */ td { height: 50px; vertical-align: bottom; //top,middle,bottom }
CSS 盒子模型
- Margin + Border + Padding + Content
- border-style值：
- none：默认无边框
- dotted：一个点线框
- dashed：一个虚线框
- solid：实线边界
- double：2个边界，2个边界的宽度和border-width的值同宽
CSS 轮廓(outline)属性
- Border外侧的一条线
CSS Margin和Padding
CSS 尺寸
CSS Display(显示)和Visibility(可见性)
2个属性都可以隐藏某个元素，不同的是：
- display：none，隐藏后不占空间。
- visibility：hidden，隐藏后仍占原来的空间。
利用display的属性，可以改变元素的显示，即 内联元素 <==> 块元素
css /* 块元素==>内联元素，不换行了 */ li {display:inline} /* 内联元素==>块元素，换行了 */ span {display:block}
visibility 的hidden 和collapse
- 在其他场景下，都是一样的，即隐藏 同时占据原来的空间
- 在表格Table中，collapse 删除行列后不占空间，hidden会占空间
CSS Positioning(定位)
Static 定位
默认值，没有定位，出现在正常的流中，不会受到top，bottom，left，right影响。
Fixed 定位
/* 相对浏览器窗口是固定位置
可以与其他元素重叠，不占空间
*/
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Relative 定位
/* 相对正常位置的定位
可以与其他元素重叠，原本所占的空间不会改变
*/
h2.pos_left
{
position:relative;
left:-20px;
}
Absolute 定位
/* 相对最近的已定位的父元素的定位
可以与其他元素重叠，不占空间
*/
重叠的元素
z-index：指定了元素的堆叠顺序，大的放前面，小的放后面。
如果2个元素重叠且都没有z-index，最后定位 在HTML代码中的元素将显示在 最前面 。
img { position:absolute; left:0px; top:0px; z-index:-1; }
CSS Float(浮动)
浮动元素会生成一个 块级框，会使元素向左或向右移动，周围的元素也会重新排列。
清除浮动 - 使用 clear
.text_line
{
clear:both;
}
/* 该元素属性有5个值：
left: 左侧不允许浮动元素；
right: 右侧允许浮动元素；
both: 左右两侧不允许浮动元素；
none: 默认值，左右两侧允许浮动值；
inherit: 该属性继承自父元素；
*/
CSS 对齐
中心对齐，使用margin属性
css .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } /* 宽度设置成100%是没有效的 */
使用position属性设置左，右对齐
css .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
使用float属性设置左，右对齐
css .right { float:right; width:300px; background-color:#b0e0e6; }
使用Padding设置垂直居中对齐
css /* 头部使用Padding，上下间距设置成一样高 */ .center { padding: 70px 0; border: 1px solid green; text-align: center; }
CSS 组合选择符
- CSS3 中包含了四种组合方式：
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以波浪号分隔)
后代选取器
匹配所有指定元素的后代元素
div p { background-color: yellow; }
子元素选择器
只能选择某元素子元素的元素(只能1层关系的子元素)
div>p { background-color: yellow; }
相邻兄弟选择器
选择紧连在另一元素后的 一个 元素，且 二者具有相同的父元素 。
div+p { background-color: yellow; }
普通兄弟选择器
选择 所有 指定元素的相邻兄弟元素，不需要 具有相同的父元素 。
div~p { background-color: yellow; }
CSS 伪类和伪元素
伪类 - 简介
- CSS 伪类是用来添加一些选择器的特殊效果。
- 由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个 伪类 的样式；但它状态改变时，又会失去这个样式。
伪类 - 语法
css /* 伪类的语法 */ selector:pseudo-class {property:value;} /* CSS类也可以使用伪类*/ selector.class:pseudo-class {property:value}
伪类 - 常用
css a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */
html <!-- 伪类可以与 CSS 类配合使用 --> a.red:visited {color:#FF0000;} <a class="red" href="css-syntax.html">CSS Syntax</a>
css /* 匹配任何元素的第一个子元素的 <p> 元素 */ p:first-child {color:blue;} /* 选择元素输入后具有焦点 */ input:focus {background-color:yellow;} /* 在每个元素之前插入内容 */ p:before {content:"Read this: "} /* 在每个元素之后插入内容 */ p:after {content:" Finished."}
CSS 导航栏
水平导航栏
<li> 元素和 <a> 元素组合，生成水平导航栏。
方式1：<li> 转换成 内联元素 ，缺点是 <a> 标签的长度不能设定。
li {display:inline;}
方法2：<a> 元素转换成 块 元素，然后使用 float 水平排列，优点是 <a> 标签的长度可以设定。
li {float:left;} a { display:block; width:60px; }
CSS 下拉菜单
<style>
/* 下拉按钮样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">W3Cschool教程 1</a>
<a href="#">W3Cschool教程 2</a>
<a href="#">W3Cschool教程 3</a>
</div>
</div>
CSS 图片廊
使用 float 和 hover 属性。
<html> <head> <style> div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:3px; border:1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; } </style> </head> <body>
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here