CSS学习总结
一、什么是CSS
- CSS是级联样式表（Cascading Style Sheets）的缩写。
- HTML用于撰写页面的内容，CSS用于对页面进行布局和美化。
- CSS可以对设置HTML元素的位置、距离、颜色、大小、浮动、透明度等。
二、CSS语法
h1 {color:blue; font-size:12px;}//元素选择器
#id {color:blue; font-size:12px;}//id选择器
.class {color:blue; font-size:12px;}//class选择器
一条CSS样式由两部分组成：选择器，以{}包裹的一条或多条声明
- 选择器
选择器是需要改变样式的对象
选择器有三种：元素选择器，id选择器，class选择器
- 元素选择器： 元素选择器前无符号，直接写对应HTML元素的元素符号，元素选择器的适用范围为所有的同种元素，如所有“h1”元素，所有“p”元素等等，因此元素选择器使用得较少。
- id选择器： id选择器前有#号，#号后跟对应元素的id，因为元素的id唯一，所以id选择器的使用范围只有一个元素
- class选择器： class选择器前有.号，.号后跟对应元素的class，id选择器的适用范围为含有相同class的所有元素。class选择器使用得较为普遍
- 声明
声明是对象需要改变的具体样式
- 声明由{}包裹着，{}中可以包含一条或多条声明，多条声明之间用“;”分隔
- 一条声明由“属性名+“:”+属性值”组成，属性是需要改变的样式属性，每个属性由一个值，属性和值用冒号分开
三、CSS生效
CSS生效有三种方法，分别是：外部样式表，内部样式表，内联样式
级联优先级是：（从高到低）
1.内联样式
2.内部样式表或外部样式表
（引入外部样式表的link标签和书写内部样式表的style标签，谁靠后谁优先级高）
3.浏览器缺省样式
1.外部样式表
- 新建一个样式表文件，文件后缀名为.css
- css样式表文件通常建立在相应html文件的同一目录下
- 在html文件中，使用link标签即可引入外部的css样式表文件，并生效
- 引入外部样式表是使用样式的主流方式，将众多样式规则单独放在一个文件中，于HTML内容分开，结构清晰，同时也可以被其他页面引入使用，达到复用的目的。
建立一个html文件，后缀为.html，并引入一个外部样式表mycss.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
建立一个样式表文件mycss.css，后缀为.css
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
2.内部样式表
- 将样式放在html文件中，较少采用该方法
- 在<head>元素中引入<style>标签，即可在上<style>标签中书写css样式
- 用该方法编写的css样式只有在当前html文件中才可以生效，无法被其他html文件共用
建立一个html文件，并使用内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
</style>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
3.内联样式
- 内联样式就是把样式规则直接写在要应用的元素中，如：
<h3 style="color:green;">I am a heading</h3>
内联样式使用起来最不灵活，因此极少使用内联样式
四、颜色
css中常用的表示颜色的方法：
1.网页的预定义色，使用英文单词进行颜色表示，如red，blue等
2.颜色RGB16进制值，如#ff0000
3.RGB三原色,如RGB(255,0,0)
4.RGB，使用百分号表示，如RGB(100%,0%,0%)
以上四种都属于RGB色系（红，绿，蓝）
其中前三种最为常用
css中可以用以上方法来设定前景或背景颜色
颜色的定义方式：
背景颜色：background-color:red;
字体颜色：color:red;
body{
background-color:gray;
}
h1{
color:red;
}
五、尺寸
我们可以用height和width设定元素内容占据的尺寸。
常见的尺寸单位有：像素px，百分比%等。
如：
新建html文件：
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">
这个元素高 200 pixels，占据全部宽度
</div>
<div class="example-2">
这个元素宽200像素,高300像素
</div>
</body>
</html>
新建对应的css文件：
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}
六、对齐
对于元素中的文本，我们可以设置text-align属性为left，center，right，分别对应左对齐，居中，右对齐，其中缺省的是左对齐。
七、盒子模型
盒子模型分为四层，从内到外分别是：内容（content），内边距（padding），边框（border），外边距（margin）
- content： content部分为盒子的内容，如文本、图片等
- padding： padding部分为盒子的内边距，即盒子的内容到边框之间的距离
- border： border部分是盒子的边框，默认不显示
- margin： margin部分是盒子的外边距，即盒子的边框和其他元素边框之间的距离，通常两元素之间取较大的一个外边距为两元素之间的距离
新建如下html文件：
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
</body>
</html>
再新建如下css文件：
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
- 在上面的示例中，height和width属性设置了content部分的宽度和高度；
- border属性设置了边框的宽度，边框是否显示，边框的颜色
- padding属性设置了内边距的宽度
- margin属性设置了外边距的宽度
八、边框border
在css中，可以定义边框的宽度，样式，颜色和圆角
边框的样式
边框的样式可以用border-style属性来定义
边框的常用样式：
- none：默认无边框
- dotted：定义一个点线边框，即边框是由小圆点构成
- dashed：定义一个虚线边框，即边框是由虚线构成
- solid：定义一个实线边框，即边框是由实线构成
- double：定义一个双实线边框，即边框是由两条实线构成，solid是由一条实线构成
边框样式属性不同参数代表的含义：
- 一个参数：边框的四条边都是同一个样式；
- 两个参数：第一个参数表示上下边框的样式，第二个参数表示左右边框的样式；
- 三个参数：第一个参数表示上边框的样式，第二个参数表示左右边框的样式，第三个参数表示下边框的样式；
- 四个参数：第一个参数表示上边框的样式，第二个参数表示右边框的样式，第三个参数表示下边框的样式，第四个参数表示左边框的样式。（沿顺时针方向）
border-style:dotted;//边框上下左右的样式都是点线边框dotted
border-style:dotted solid;//上下边框的样式是点线边框dotted，左右边框的样式是实线边框solid
border-style:dotted solid double;//上边框的样式是点线边框dotted，左右边框的样式是实现边框solid，下边框的样式是双实线边框double
border-style:dotted solid double dashed;//上边框的样式是点线边框dotted，右边框的样式是实现边框solid，下边框的样式是双实线边框double，左边框的样式是虚线边框dashed
边框的宽度
边框的宽度可以用border-width属性来定义，边框宽度的常用单位为像素px
边框宽度属性不同参数代表的含义：
- 一个参数：边框四条边都是同样的宽度；
- 两个参数：第一个参数表示上下边框的宽度，第二个参数表示左右边框的宽度；
- 三个参数：第一个参数表示上边框的宽度，第二个参数表示左右边框的宽度，第三个参数表示下边框的宽度；
- 四个参数：第一个参数表示上边框的宽度，第二个参数表示右边框的宽度，第三个参数表示下边框的宽度，第四个参数表示左边框的宽度。（沿顺时针方向）
border-width:5px;//边框上下左右的宽度均为5px
border-width:5px 10px;//上下边框的宽度为5px,左右边框的宽度为10px
border-width:5px 10px 15px;//上边框的宽度为5px，左右边框的宽度为10px，下边框的宽度为15px
border-width:5px 10px 15px 20px;//上边框的宽度为5px，右边框的宽度为10px，下边框的宽度为15px，左边框的宽度为20px
边框颜色
边框的颜色可以用border-color属性来定义
注意：border-color属性单独使用不起作用，需要先使用border-style属性来设置边框的样式，因此border-color属性需要和border-style属性一起使用才能生效。
常用的颜色表示方式有
1.网页的预定义色，使用英文单词进行颜色表示，如red，blue等
2.颜色RGB16进制值，如#ff0000
3.RGB三原色,如RGB(255,0,0)
4.RGB，使用百分号表示，如RGB(100%,0%,0%)
边框颜色不同参数代表的含义：
- 一个参数：边框四条边的颜色都是同样的颜色；
- 两个参数：第一个参数表示上下边框的颜色，第二个参数表示左右边框的颜色；
- 三个参数：第一个参数表示上边框的颜色，第二个参数表示左右边框的颜色，第三个参数表示下边框的颜色；
- 四个参数：第一个参数表示上边框的颜色，第二个参数表示右边框的颜色，第三个参数表示下边框的颜色，第四个参数表示左边框的颜色。（沿顺时针方向）
border-style: solid;
border-color: #0000ff;//边框上下左右的颜色都是蓝色
border-color: #ff0000 #0000ff;//上下边框的颜色是红色，左右边框的颜色是蓝色
border-color: #ff0000 #00ff00 #0000ff;//上边框的颜色是红色，左右边框的颜色是绿色，下边框的颜色是蓝色
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);//上边框的颜色是红色，右边框的颜色是绿色，下边框的颜色是蓝色，左边框的颜色是紫色
边框圆角
边框圆角可以用border-radius属性来设置，边框圆角常用的单位是像素px
边框圆角不同参数代表的含义：
- 一个参数：边框四个角的圆角大小相同；
- 两个参数：第一个参数表示左上角和右下角的圆角大小，第二个参数表示右上角和左下角的圆角大小；
- 三个参数：第一个参数表示左上角的圆角大小，第二个参数表示右上角和左下角的圆角大小，第三个参数表示右下角的圆角大小；
- 四个参数：第一个参数表示左上角的圆角大小，第二个参数表示右上角的圆角大小，第三个参数表示右下角的圆角大小，第四个参数表示左下角的圆角大小。（沿顺时针方向）
border-radius:5px;//四个圆角大小都是5px
border-radius:5px 10px;//左上角和右下角的圆角大小为5px，右上角和左下角的圆角大小为10px
border-radius:5px 10px 15px;//左上角的圆角大小为5px，右上角和左下角的圆角大小为10px，右下角的圆角大小为15px
border-radius:5px 10px 15px 20px;//左上角的圆角大小为5px，右上角的圆角大小为10px，右下角的圆角大小为15px，左下角的圆角大小为20px
以上四种属性设置的都是边框四条边的样式、宽度、颜色和四个角的圆角大小，无法单独设置某一条边框的样式、宽度、颜色和圆角。
下面这些属性可以实现单独对各条边和各个角进行设置：
//样式
border-top-style:solid;//上边框样式
border-bottom-style:solid;//下边框样式
border-left-style:solid;//左边框样式
border-right-style:solid;//右边框样式
//宽度
border-top-width:10px;//上边框宽度
border-bottom-width:10px;//下边框宽度
border-left-width:10px;//左边框宽度
border-right-width:10px;//右边框宽度
//颜色
border-top-color:#0000ff;//上边框颜色
border-bottom-color:#0000ff;//下边框颜色
border-left-color:#0000ff;//左边框颜色
border-right-color:#0000ff;//右边框颜色
//圆角
border-top-right-radius:10px;//右上角圆角
border-top-left-radius:10px;//左上角圆角
border-bottom-right-radius:10px;//右下角圆角
border-bottom-left-radius:10px;//左下角圆角
border属性
border属性可以同时设置边框的宽度，样式和颜色，
border属性不能分别定义边框四个方向的宽度，颜色和样式，只能统一定义，不能对四个边设置不同的值。与内外边距不同，内外边距可以分别定义四个边的值。
border:1px solid blue;//顺序可交换
//等价于
border-bottom:1px solid blue;
border-top:1px solid blue;
border-right:1px solid blue;
border-left:1px solid blue
九、内边距
内边距也被称为填充，用来定义元素边框与元素内容之间的宽度，用padding来表示。该空间可设置填充颜色，若内边距被清楚，所释放的空间将由背景颜色填充。
内边距可以统一设置四个边的宽度，也可以单独设置每条边的宽度。
- 统一设置内边距宽度：
不同参数代表的含义：
- 一个参数：四个方向的内边距均相等；
- 两个参数：第一个参数表示上下两个方向的内边距宽度，第二个参数表示左右两个方向的内边距宽度；
- 三个参数：第一个参数表示上面一个方向的内边距宽度，第二个参数表示左右两个方向的内边距宽度，第三个参数表示下面一个方向的内边距宽度；
- 四个参数：第一个参数表示上面一个方向的内边距宽度，第二个参数表示右面一个方向的内边距宽度，第三个参数表示下面一个方向的内边距宽度，第四个参数表示左面一个方向的内边距宽度。（沿顺时针方向）
padding:5px;//四个方向的内边距都是5px
padding:5px 10px;//上内边距是5px，左右内边距是10px
padding:5px 10px 15px;//上内边距是5px，左右内边距是10px，下内边距是15px
padding:5px 10px 15px 20px;//上内边距是5px，右内边距是10px，下内边距是15px,左内边距是20px
- 单独设置内边距宽度：
padding-top:10px;//上内边距为10px
padding-bottom:10px;//下内边距为10px
padding-right:10px;//右内边距为10px
padding-left:10px;//左内边距为10px
十、外边距
外边距用来定义元素边框与其他元素边框之间的距离，用margin来表示。margin没有背景颜色，是完全透明度。
与内边距相似，外边距可以统一设置外边距宽度，也可以单独设置外边距宽度
- 统一设置外边距宽度：
不同参数代表的含义：
- 一个参数：四个方向的外边距均相等；
- 两个参数：第一个参数表示上下两个方向的外边距宽度，第二个参数表示左右两个方向的外边距宽度；
- 三个参数：第一个参数表示上面一个方向的外边距宽度，第二个参数表示左右两个方向的外边距宽度，第三个参数表示下面一个方向的外边距宽度；
- 四个参数：第一个参数表示上面一个方向的外边距宽度，第二个参数表示右面一个方向的外边距宽度，第三个参数表示下面一个方向的外边距宽度，第四个参数表示左面一个方向的外边距宽度。（沿顺时针方向）
margin:5px;//四个方向的外边距都是5px
margin:5px 10px;//上外边距是5px，左右外边距是10px
margin:5px 10px 15px;//上外边距是5px，左右外边距是10px，下外边距是15px
margin:5px 10px 15px 20px;//上外边距是5px，右外边距是10px，下外边距是15px,左外边距是20px
- 单独设置外边距宽度：
margin-top:10px;//上外边距为10px
margin-bottom:10px;//下外边距为10px
margin-right:10px;//右外边距为10px
margin-left:10px;//左外边距为10px
十一、定位
元素的定位用position属性来表示，该属性有四个属性值，分别是：
- static 静态
- relative 相对
- fixed 固定
- absolute 绝对
static 静态
设置静态定位position：static
该定位是元素的默认定位方式
元素按从上到下，从左到右的方式排列
relative 相对
设置相对定位position：relative
该定位把元素相对于它的静态（正常）位置进行偏移，但是该元素原本所占的空间不会改变
即该元素的所占的空间不变，只是显示的位置发生偏移，元素原本所在的位置不会被其他元素占用。
也即相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
元素内容有四个移动方向：top,bottom,left,right，
移动的单位是px
移动的距离可以为正，亦可以为负。
- top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
- bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
- left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
- right：距离为正时表示内容向左移动，距离为负时表示内容想右移动
fixed 固定
设置固定定位：position：fixed；
元素使用该定位后，位置固定不动，即使滚动窗口，元素的位置也不会改变
该定位是相对于浏览器窗口进行定位，
即使用该定位后，元素就固定在屏幕上的某个位置，不会随着页面的滚动而移动。
该定位也是使用top，bottom，left，right这四个属性进行定位，定位方式与上一个定位方式类似，只是相对于浏览器屏幕进行移动。
移动的单位是px
移动的距离可以为正，亦可以为负。
- top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
- bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
- left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
- right：距离为正时表示内容向左移动，距离为负时表示内容想右移动
注意：fixed定位的元素不占据空间，即fixed定位的元素与其他元素重叠。
absolute 绝对
设置绝对定位position：absolute；
绝对定位是相对于距离最近且设置了非static定位的父元素进行偏移，若没有父元素定义了非static定位，则相对于整个html进行偏移。
absolute定位也是使用top，bottom，left，right这四个属性进行定位，定位方式与相对定位方式类似，只是相对于有非static定位的父元素进行偏移
移动的单位是px
移动的距离可以为正，亦可以为负。
- top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
- bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
- left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
- right：距离为正时表示内容向左移动，距离为负时表示内容想右移动
注意：absolute定位的元素不占据空间，即absolute定位的元素与其他元素重叠。
十二、溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
- visible 默认值，溢出部分不被裁剪，在区域外面显示
- hidden 裁剪溢出部分且不可见
- scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
- auto 裁剪溢出部分，视情况提供滚动条
提示：还可以通过overflow-x和overflow-y单独设置左右方向和上下方向的滚动条。
十三、浮动
可以通过float属性来让元素在水平方向上进行向左或向右移动，周围其他元素也会重新排列。
float:left;//向左浮动
float:right;//向右浮动
float浮动往往用于图像，但它在布局时一样非常有用。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将会包围它，浮动元素之前的元素不受影响。
把几个浮动元素放在一起，如果有空间的话，他们将彼此相邻。
注意： 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
clear:both;//元素左右都不能有浮动元素
clear:left;//元素左边不能有浮动元素
clear:right;//元素右边不能有浮动元素
十四、不透明度
元素的不透明度可以用opacity属性来设置，opacity属性的值在[0.0～1.0]之间，值越低，透明度越高
不透明度的设置常用于图片
opacity:0;
opacity:0.2;
opacity:0.5;
opacity:0.7;
opacity:1;
十五、组合选择器
除了前面提到的三种常用的基础选择器之外，还有几种常用的组合选择器
组合选择器就是将前面的三种基础选择器进行组合，从而得到简洁精确的选择
这几种组合选择器分别是：
-
后代选择器： 以空格作为分隔，如：.a .b
后代选择器可以选择作为某元素后代的元素。
这两个元素不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。即a选择器可能是b选择器的父选择器，也可能是b选择器的父选择器的父选择器，
.div1 p{
color:red;
}
-
子选择器： 以>作为分隔，如：.a>.b
子选择器也称为直接后代选择器
该选择器选择的后代一定是儿子，即a选择器一定是b选择器的父选择器
div>.red{
color:red;
}
-
交集选择器： 没有分隔，如：a.b
交集选择器就是在两个标签相交的部分，也就是交集进行修改格式
第一个选择器必须是标签选择器，第二个选择器必须是id选择器或class选择器
div.red{
color:red;
}
-
并集选择器： 以，作为分隔，如：.a,.b
并集选择器是对两个标签同时进行修改样式
使用并集选择器和分别使用两个选择器的效果是一样的，且分别使用的标签的样式完全一样。
div,red{
color:red;
}
并集选择器和交集选择器的区别：
并集选择器选择的范围是两个选择器选中的所有元素，即A+B
交集选择器选择的范围是两个选择器共同选中的元素，即AB
十六、伪类和伪元素
伪类或伪元素用于定义元素的某种特定的状态或位置等。
比如：
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 离开必须填写的输入框时出现红色的外框进行警示
- 保证段落的第一行加粗，其它正常
- …
/* 选择器 : 伪类/伪元素{属性：属性值} */
selector:pseudo-class/pseudo-element {
property:value;
}
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
伪类
anchor伪类
anchor伪类可以用来设置链接不同状态的显示方式
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
first-child伪类
first-child伪类用来选择父元素的第一个子元素
匹配任意元素的第一个元素为<p>元素的<p>元素
即该<p>元素必须是第一个子元素
p:first-child
{
color:blue;
}
匹配所有<p>元素中的第一个<i>元素
p>i:first-child
{
color:blue;
}
匹配任意元素的第一个子元素为<p>元素中的所有<i>元素
即任意元素中，若<p>元素为该元素的第一个子元素，则匹配该<p>元素中的所有<i>元素
p:first-child i
{
color:blue;
}
伪元素
:first-line伪元素
first-line伪元素用于为文本的首行设置特殊样式
p:first-line
{
color:ff0000;
}
注意：“first-line” 伪元素只能用于块级元素。
:first-letter伪元素
first-letter伪元素用于向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
}
注意： “first-letter” 伪元素只能用于块级元素。
:before伪元素
before伪元素可以在元素的内容前面插入新内容
h1:before
{
content:url(smiley.gif);
}
:after伪元素
after伪元素可以在元素的内容之后插入新内容
h1:after
{
content:url(smiley.gif);
}