CSS知识点整理
2016-12-04 本文已影响370人
OnePi
写在前面：这是一篇学习CSS的笔记。重点在于罗列CSS的知识点。
CSS
㈠ CSS入门
-
什么是CSS？
CSS 指层叠样式表 (Cascading Style Sheets)
-
作用：
定义如何显示 HTML 元素，修改和美化网页！ -
CSS的书写形式：内联样式、内部样式表、外链样式表
样式表的优先级：
一般，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 1.浏览器缺省设置
- 2.外链样式表
- 3.内部样式表（位于 <head> 标签内部）
- 4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权。
4.1 外部加载的形式（最常用）
//新建css文件：style.css
<link rel="stylesheet" type="text/css" href="style.css" />
4.2 头部形式（写在HTML头部区域）
<style type="text/css">
//CSS样式语法
p{color: blue; text-align: center;}
h1{color: #999999; font-size: 12px}
</style>
4.3 内联形式（写在HTML标签中）
style="color: blue; text-align: center;"
e.g.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" /> //第一种：外部文件加载
<style type="text/css"> //第二种：写在头部文件
//CSS样式语法
p{color: blue; text-align: center;}
h1{color: #999999; font-size: 12px}
</style>
</head>
<body>
<p>头部CSS样式</p>
<p style="color: blue; text-align: center;">内联CSS样式</p> //第三种：内联方式 style属性
<h1>我是标题</h1>
</body>
</html>
㈡ CSS语法
CSS的语法结构：
选择器{属性：值; 属性：值; 属性：值; …}
CSS 基础语法
-
花括号：{}
-
冒号：属性和值被冒号(:)分开
-
分号：用分号(;)将每个声明分
1. CSS选择器
常用的9个选择器！
1. 通配选择器
<style type="text/css">
*{color: red;}
</style>
2. 标签选择器
//直接用标签名
<style type="text/css">
h1{width: 200px; height: 300px;border: 1px solid red;text-align: center;}
</style>
3. id选择器
类似于类选择，但具有唯一性！
<style type="text/css">
//先给标签起一个名字:id="tag_01"
#tag_01{color: red;border: 1px solid red;width: 100px;height: 200px;}
</style>
</head>
<body>
<p id="tag_01"></p>
</body>
4. 类选择器(最常用)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作我的第一个网页</title>
<style type="text/css">
//先给标签起一个名字:class =“tag01”
.tag01{color: red;border: 1px solid red;width: 100px;height: 200px;}
.tag02{list-style-type: none;}
//结合标签选择器
li.tag01 {color:red;}
</style>
</head>
<body>
<p class="tag01"></p> //先给标签起一个名字:class =“tag01”
<ul>
<li class="tag01 tag02"></li>
<li class="tag01 tag02"></li>
</ul>
</body>
注意：tag命名规则：必须以字母开头，字母数字下划线组成！
5. 属性选择器
<style type="text/css">
<!--属性-->
[title]{border: 1px solid red;width: 200px;height: 20px;}
<!--指定标签的属性-->
img[title][id]{color: cyan;}
<!--指定限定条件的标签的属性-->
img[title][id="tag_01"]{color: cyan;}
</style>
</head>
<body>
<img src="" title="image01" id="tag_01" />
<img src="" title="image02" class="tag01" />
<p>我是段落</p>
</body>
<= === ===== ======= ==========>
6. 后代选择器<也很常用>
<style type="text/css">
<!--嵌套标签呈现后代关系-->
table tr th a{text-decoration: none;color: red;font-size: 5cm;}
table a{text-decoration: none;color: red;font-size: 5cm;} //也可以跳跃代数
</style>
</head>
<body>
<table>
<tr> <!--嵌套标签呈现后代关系-->
<th></th>
<a href="">删除下划线</a>
<td></td>
</tr>
</table>
</body>
7. 子代选择器
<style type="text/css">
tr > td{color: red;background-color: yellow;}
</style>
</head>
<body>
<table>
<tr>
<td>子代选择器</td>
</tr>
</table>
</body>
注意：只能两代。
8. 相邻兄弟选择器
<style type="text/css">
td + td{color: red;}
<!--限制范围-->
.tag01 + .tag02{color: green;}
</style>
</head>
<body>
<table>
<tr>
<td>我是TD1</td>
<td>我是TD2</td> <!--被修改的相邻兄弟-->
<td>我是TD5</td> <!--被修改的相邻兄弟-->
</tr>
<tr>
<td>我是TD3</td>
<td>我是TD4</td>
<td>我是TD6</td> <!--被修改的相邻兄弟-->
</tr>
<tr>
<td class="tag01">我是TD3</td>
<td class="tag02">我是TD4</td> <!--被修改的相邻兄弟-->
<td>我是TD6</td>
</tr>
</table>
</body>
9. 群组选择器
<style type="text/css">
//用逗号隔开
li,td,.tag01,#tag_01{color: red;font-size: 12px;}
</style>
CSS中的伪类
伪类的语法： selector : pseudo-class {property: value}
CSS 类与伪类搭配使用: selector.class : pseudo-class {property: value}
//超链接<a></a>的伪类
a:link{} /* 没有访问链接的表现样式*/
a:visited{} /* 已经访问链接的表现样式*/
a:hover{} /* 鼠标悬停链接时的表现的样式*/
a:active{} /* 鼠标点击链接时的表现的样式*/
注意：必须按顺序写！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS中的伪类</title>
<style type="text/css">
a:link{color: red;} /* 点击之前表现的样式*/
a:visited{color: #999999;} /* 点击之后表现的样式*/
a:hover{color: green; text-decoration: none;} /* 鼠标悬停的表现的样式*/
a:active{color: yellow;} /* 鼠标点击时的表现的样式*/
</style>
</head>
<body>
<a href="http://www.163.com">进入网页首页</a>
</body>
</html>
2. CSS常用属性
详细属性：参考链接：http://wenku.baidu.com/view/f51f5d3710661ed9ad51f336.html
⑴ 样式属性
-
- CSS 文字
- CSS 文本
- CSS 前景色
- CSS 背景
- CSS 列表
//CSS描述长度的单位：
cm 厘米
mm 毫米
em 当前字体m字母的宽度（代指一个字母的宽度）
ex 当前字体x字母的宽度（代指一个字母的宽度）
in 英寸，1in = 2.54cm
pt 点，1pt = 1/72in
pc 皮卡，1pc = 12pt
px 像素
百分比(%) 相对值
//CSS中颜色表示方法：
英文单词：red blue ...
十六进制：#999 #FFF #rrgggbb
RGB格式：rgb(x,y,z) 范围0~255之间整数
rgb(x%,y%,z%) 范围0~100之间的整数
//字体设置
*{
font-family: "Arial","宋体"，"黑体"，"楷体"; //浏览器会依次查找字体是否安装
font-size: 30pt; //5种表示方式：长度值：30pt；相对默认的百分比：200%;绝对大小：large;相对上一元素：larger;增大值：+5pt
font-weight: normal; //值是100~900之间整百数：normal(400)：正常;blod(700):粗体;border：比上一级增加100；lighter：比上一级减少100
font-style: italic; //italic斜体；oblique:倾斜; normal正常
font-variant: normal; //normal正常；small-caps：小写字母都变成小型的大写字母
}
//文本设置
*{
text-decoration: underline,blink; //（underline:下划线;overline:上划线;line-through:删除线；blink：闪烁；none：无);
text-align: left,center; //水平对齐：(left | right | center | justify(两边对齐))
vertical-align: middle; //垂直对齐：(baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比)
text-indent: 20pt; //首行缩进:(20pt | 100%)
text-transform: uppercase; //文本转换:(none | capitalize:首字母大写 | uppercase 字母大写 | lowercase 字母小写;
}
//文字布局：字间距&行间距
*{
letter-spacing: normal; //字符间距：15px
word-spacing: 15px; //字间距
line-height: 20pt; //行高&行间距：20pt | 120% | 2.0
}
//前景色
*{
color: blue; //前景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
}
//背景色
*{
background-color: red; //背景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
background-image: url(images/abc.jpg);
background-attachment: scroll; //图像的滚动方式:(scroll:滚动 | fixed:固定);
background-repeat: repeat; //设置图片重复方式(repeat | no-repeat | repeat-x | repeat-y)
background-position: left center; //设置图片摆放位置
background: red url(images/abc.png) repeat-y; //一次设置，必须按照顺序
}
//列表属性
*{
list-style-type: disc; //(none | disc 实心黑点 | circle 空心圆点 | square 黑方块 | decimal 十进制123 | lower-roman 小写罗马数字 | upper-roman 大写罗马 | lower-alpha 小写字母 | upper-alpha 大写字母)
list-style-image: url(); //设置图片为项目符号
list-style-position: inside; //设置项目符号的位置（outside | inside）
//一次性设置
list-style: url() disc outside; //不限顺序，image优先于type
}
⑵ 盒子模型
- CSS 内边距
- CSS 边框
- CSS 外边距
盒子模型：
盒子模型
盒子模型
//边框
*{
border-color: red yellow blue green; //可以接受1~4个值:(1个值：四个边框同色，2个值：上下 左右；3个值：上 左右 下；4个值：上 右 下 左);
border-top-color:red;
border-right-color:red;
border-bottom-color: red;
border-left-color:red;
border-width: 1pt thin 100%; //宽度：可以接受1~4个长度值，还可以接受3个关键词(thin | medium | thick)
border-top-width: thick;
border-right-width: 20pt;
border-bottom-width: 100%;
border-left-width: medium;
border-style: none; //边框样式:(none: 无边框 | dotted：小点 | dashed 虚线 | solid 实线 | double 双线 | groove 四进线 | ridge 凸线 | inset 元素内凹 | outset 元素外凹)
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style:none;
//缩略设置方式:顺序不限;
border: solid 15px red;
border-top: 5pt red dashed;
border-left: dashed red red;
border-bottom: inset green;
border-left: dashed;
}
//外边距margin
*{
margin: 1pt auto 200% auto;//接受1~4长度值和百分数 和 auto
margin-top: auto;
margin-right: 20pt;
margin-bottom: 20%;
margin-right: auto auto;
}
//内边距padding
*{
padding: 3pt; ////接受1~4长度值和百分数
padding-top: 200%;
padding-right: 3pt 4pt;
padding-bottom: 3pt 3pt 5pt;
padding-left:3pt 3pt 5pt 6pt;
}
⑶ 定位和浮动
- CSS 相对定位
- CSS 绝对定位
- CSS 浮动
内联元素与块级元素
//内联元素与块级元素
区别：块级元素独占一行；可以设置行高，内外边距等；
内联元素只显示在一行！只能设置左右，不能设置宽高和上下内外边距！
块级元素：
<body></body>
<div></div>
<h1></h1>...<h6></h6>
<ol></ol>
<ul></ul>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>
内联元素：
<a href=""></a>
<i></i>
<u></u>
<b></b>
<span></span> //文本标签
<font></font>
相对定位与绝对定位
1. 相对定位
相对于自己原来的位置发生改变，并且保留原有的位置空间。
<style type="text/css">
.div01{border: 1px solid red;width: 200px;height: 100px;}
.div02{border: 3px dashed cyan;width: 200px;height: 100px;
position: relative; /*相对定位*/
top: -30px;
left: 50px;}
</style>
2. 绝对定位
相对于拥有position属性的父级元素的位置发生改变（如果父级元素没有position属性，就会查找父级的父级，直到body），并释放原有的位置空间！
<style type="text/css">
.div01{border: 1px solid red;width: 200px;height: 100px;}
.div02{border: 3px dashed cyan;width: 200px;height: 100px;
position: absolute; /*绝对定位*/
top: 30px;
left: 50px;}
.div03{border: 1px solid green;width: 200px;height: 100px;}
</style>
普通流定位：默认定位：
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置，可以使用水平内边距、边框和外边距调整它们的间距
CSS 定位属性
position 设置定位方式
top 定义了定位元素上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
z-index 设置元素的堆叠顺序。
//定位
*{
position: relative; //设置定位方式:(static 常规 | relative 相对定位 | absolute 绝对定位)
//元素上下左右的位置
top: 10%;
right: 2pt;
bottom: 200%;
left: 45pt;
//元素所占空间
width: 20%;
height: 30pt;
}
//z-index(Z轴位置)
*{
z-index: -1; //大于-1的自然数：-1最底层 值越大越靠近浏览者
}
//溢出
*{
overflow: scroll; //内容大于元素指定空间产生溢出：(visible 溢出可见 | hidden 溢出隐藏 | scroll 滚动显示 | auto 自动判断)
}
浮动
浮动效果：使竖列的盒子可以横向排版。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float
//浮动
*{
float: left; //元素浮动到页面的左边缘或右边缘:(left | right | none)
clear: both; //元素旁边是否允许其他元素浮动:(left | right | both | none)
}
浮动的负效果:导致父级元素无法撑开。
清除负效果：(三种方法)
1.添加空盒子：
<style type="text/css">
.box{border: 1px solid red;}
.box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
.box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
.clear{clear：both;} <!--空盒子类-->
</style>
</head>
<body>
<div class="box">
<div class="box01"> 我是二个盒子！</div>
<div class="box02"> 我是三个盒子！</div>
<div class="clear"></div> <!--添加空盒子：在被浮动元素的后面(同级元素)添加一个空盒子，并且定义一个clear类-->
</div>
</body>
优点：便捷 代码量少
缺点：增加很多空盒子
2..clear{display: block;overflow: hidden;}
<style type="text/css">
.box{border: 1px solid red;}
.box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
.box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
.clear{display: block;overflow: hidden;}
</style>
</head>
<body>
<div class="box clear"> <!--定义一个clear类,赋给浮动元素的父级元素-->
<div class="box01"> 我是二个盒子！</div>
<div class="box02"> 我是三个盒子！</div>
</div>
</body>
3. 最流行 最常用 兼容所有浏览器
缺点：代码量多
<style type="text/css">
.box{border: 1px solid red;}
.box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
.box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
.clear.after{display: block;clear: both;content: "." visibility: hidden;height: 0}
.clear{zoom:"1";}
</style>
</head>
<body>
<div class="box clear"> <!--定义一个clear类,赋给浮动元素的父级元素-->
<div class="box01"> 我是二个盒子！</div>
<div class="box02"> 我是三个盒子！</div>
</div>
</body>
⑷ 其他
//鼠标的属性
*{
cursor: auto; //设置鼠标形状：(auto | hand 手型 | text 文本I型 | ....)
}
