个人学习笔记，仅供想入前端大门小伙伴学习
一、什么是CSS
Cascading Style Sheets : 样式表
CSS用于HTML元素的样式的定义
能够实现内容(HTML页面元素) 与 表现(CSS展示效果)相分离
能够提升代码的可重用性 和 可维护性
二、CSS 与 HTML 之间的关系
HTML 负责搭建网页结构
CSS 负责页面的样式的设置
HTML元素属性 与 CSS样式 冲突时 使用原则 :
尽量使用 CSS 样式 来取代 HTML 属性
三、使用CSS样式表的三种方式
1、内联方式
又称为 行内样式 或 行内方式
2、内部样式表
将样式内容定义在网页的 <head> 中
3、外部样式表
将样式内容定义在外部的 CSS 文件中(***.css)
在HTML页面中引入 ***.css 去使用样式内容
四、CSS样式表特征
1、继承性
大部分的样式属性是可以被继承的
即在父元素中定义好的样式 可以直接被子元素使用
2、层叠性
允许为一个元素定义多个样式规则，如果样式规则中的样式属性不冲突的时候，他们则都可以被应用到元素上
3、优先级
在层叠性基础上，如果样式属性声明冲突时，会按照不同使用方式的优先级来应用样式
低 ：浏览器默认设置
中 ：内部样式表 和 外部样式表
就近原则 - 后定义者优先
高 ：内联样式
最高：!important
显示调整 样式的优先级
属性名称:值 !important;
五、CSS基础选择器
1、选择器的作用
规范了页面中哪些元素能够使用声明好的样式
选择器是为了匹配页面上的元素的
2、选择器详解
1、通用选择器
作用：为了匹配页面中所有的元素
语法：* { … }
ex:想设置页面中所有的文字的大小为12px
方案1：
*{
font-size:12px;
}
方案2：
body{
font-size:12px;
}
在网页中，推荐使用方案2的继承性来取代 通用选择器
2、元素选择器
作用：使用元素名称来充当选择器，目的是为了匹配页面中指定元素名称的所有标记
语法：元素名称 { … }
div{ ... }
p{ ... }
ul{ ... }
3、类选择器(重点)
作用：定义好之后，允许被任意元素的 class 属性进行引用的选择器
1、基本类选择器
语法：.类名{ … }
引用类选择器：
<ANY class="类名">
类名规范：
1、字母，数字，_,-组成
2、不能以数字开头
<style>
.important{
font-size:24px;
color:red;
}
</style>
<div class="important">
引用了 important 的元素
</div>
2、多类选择器的引用方式：
允许让一个元素同时引用多个类选择器
多个类选择器之间，使用 空格 隔开即可
<ANY class="类1 类2 类3">
3、分类选择器的定义方式：
分类选择器，允许将类选择器和元素选择器结合起来使用，从而实现对某种元素中不同样式的细分控制
元素选择器.类选择器{ ... }
div.important{ color:green; }
以上选择器匹配的是页面中 class属性值为 important 的 div 元素
<div class="important"></div>
4、ID选择器
作用：为了匹配页面中指定ID值的元素
语法：#IDValue{ … }
<div id="main"></div>
<style>
#main{ ... }
</style>
5、群组选择器
作用：选择器的声明，是一个以 , 隔开的选择器列表，为了定义多个选择器中的公共样式
语法：
选择器1,选择器2,选择器3{
… …
}
*
#main,div.redColor,.important,.red{
color:red;
}
等同于
#main{color:red;}
div.redColor{color:red;}
.important{color:red;}
.red{color:red;}
6、后代选择器
后代：只要具备层级关系的元素，被嵌套的都可以被称之为 后代
语法：选择器1 选择器2{ … }
1、div span{ }
匹配 所有div 中的 span 元素
2、#main span{ ... }
匹配 id为main的元素中的 所有 span元素
3、#main div.left-side{ ... }
匹配 id为mian 的元素中 class为left-side 的div元素
<div id="main">
<div class="left-side"></div>
</div>
7、子代选择器
子代：在层级元素中，只具备一层层级关系，被嵌套的元素称之为 子代元素
语法：选择器1>选择器2{}
<div>
<p>
<span></span>
</p>
</div>
p 是div的 子代元素
span 是p的 子代元素
span 是div的 后代元素
<div>
<span>div中的span</span>
<p>
<span>div 中的 p 中的 span</span>
</p>
</div>
8、伪类选择器
作用：为了匹配页面元素不同的"状态"
语法：
:伪类{ … }
选择器:伪类{}
伪类选择器的分类：
1、链接伪类
1、:link , 匹配未被访问的超链接的状态
2、:visited,匹配访问过的超链接的状态
2、动态伪类
1、:hover,匹配鼠标悬停在元素上的状态
2、:active,匹配元素被激活时的状态
3、:focus,匹配元素获取焦点时的状态
3、目标伪类
4、结构伪类
5、否定伪类
六、尺寸 与 边框
1、CSS单位
1.1、尺寸单位
1、px (pixel)
2、% ：相对单位
3、pt ：磅(point)
多数用于描述 文字大小 1pt = 1/72 in
4、in ：英寸(inch)
1in=2.54cm
5、cm ：厘米
6、mm ：毫米
7、em ：字体大小，使用父元素字体大小的倍数
#main{ font-size:2em; }
8、rem ：字体大小,使用html根元素字体大小的倍数
#main{ font-size:2rem; }
1.2、颜色单位
1、rgb(r,g,b)
r:red (0~255)
g:green (0~255)
b:blue (0~255)
ex:
color:rgb(112,76,98);
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha);
alpha:透明度 0~1 之间的数字
0 : 完全透明
1 : 完全不透明
4、#rrggbb
由6位十六进制的数字来组成的颜色
十六进制：0~9 A~F 组成
#123456;
#654321;
#aabbcc;
#e4393c;
5、#rgb
#rgb 是 #rrggbb的缩写
#rrggbb每两位数字都相同的情况下，可以使用#rgb的方式取代
#112233 -> #123;
#ff0000 -> #f00
6、表示颜色的英文单词
red,green,blue,yellow,pink,purple,
2、尺寸属性
2.1、页面元素的默认尺寸
块级：
宽度：占父元素宽度的 100%
高度：以内容为准
行内：
宽度：以内容为准
高度：以内容为准
2.2、尺寸属性
1、宽度
width
min-width
max-width
2、高度
height
min-height
max-height
2.3、在HTML中，允许设置尺寸属性的元素
1、所有的块级元素 全部都可以设置
2、行内块中的大部分元素可以设置
除 radio 和 checkbox 以外的行内块元素
3、HTML元素本身就具备 width 和 height属性的可以设置尺寸，其余则不可以
<img> 可以设置尺寸
<table> 可以设置尺寸
特殊：除<img>以外的其它行内元素时不允许设置尺寸的
2.4、溢出
2.4.1、什么是溢出
使用尺寸属性设置元素大小时，如果内容所需要的空间大于元素空间大小时，则会产生溢出的效果
2.4.2、溢出处理属性
属性：
overflow
overflow-x
overflow-y
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏
3、scroll
显示滚动条，但是溢出时可用
4、auto
3、边框属性
3.1、简写方式属性
通过一个属性 将元素的四个方向的边框的所有的操作一起设置
语法：
border:width style color;
width:边框宽度，以px为单位
style:边框样式
solid:实线
dotted:虚线(.......)
dashed:虚线(-------)
color:边框颜色
可以取值为 transparent(透明)
border 可以
取值为 none 或 0;
3.2、单边定义
只单独设置某一条边的宽度，样式，颜色
属性：border-方向:width style color;
方向：top / right / bottom / left
ex:
1、border-left:2px dotted red;
2、border-bottom:1px dashed blue;
特殊：border-方向:none / 0;
3.3、单属性设置
设置四个方向边框的某一具体属性值
属性：border-属性:值;
属性：width / style / color
3.4、单边单属性设置
设置某个方向的边框的某一具体属性
属性：border-方向-属性:值;
ex:
1、border-top-color:blue;
2、border-left-style:dotted;
4、边框倒角属性
属性：
border-radius
取值：
以px为单位的数值 或 %
单角属性：
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
ex:
1、border-radius:5px;
2、border-radius:50%;
将矩形元素变为圆形(正圆，椭圆)
3、border-radius:5px 10px 15px 20px;
左上角倒角半径：5px
右上角倒角半径：10px
右下角倒角半径：15px
左下角倒角半径：20px
5、边框阴影属性
属性：box-shadow
取值：
h-shadow v-shadow blur spread color inset
h-shadow:阴影的水平偏移距离，取值为正，阴影向右偏移，取值为负，阴影向左偏移
v-shadow:阴影的垂直偏移距离，取值为正，阴影向下偏移，取值为负，阴影向上偏移
blur:可选，阴影的模糊大小
spread:可选，阴影的大小
color:可选，颜色
inset:可选，将默认的外阴影改为内阴影
6、轮廓属性
轮廓：绘制与元素边框外围的一条线
属性：outline
取值：width style color;
outline-widht:
outline-style:
outline-color:
轮廓的常用方式：
outline:none / 0;
七、框模型
1、什么是框模型
框：页面元素皆为框
框模型：Box Model 定义了元素处理(计算)尺寸，边框，内边距 和 外边距的 一种方式
有框模型的属性介入到元素中的时候，元素实际占地面积就会发生改变
元素实际占地宽度=左右外边距+左右边框+左右内边距 + width;
元素实际占地高度=上下外边距+上下边框+上下内边距 + height;
2、外边距
2.1、什么是外边距
围绕在元素边框周围的空白区域就是外边距
外边距也是体现两个元素之间距离的一种表现方式
2.2、语法
2.2.1、属性
margin:设置四个方向的外边距值;
margin-top/right/bottom/left:设置单一方向外边距值;
2.2.2、取值
1 、取值为 px 的具体值
2、%
3、auto
自动，自动计算左右外边距的值，前提要求元素必须有宽度
4、负数
目的是为了移动元素
margin-top 设置数据为正数时，元素向下移动
margin-left 设置数据为正数时，元素向右移动
margin-top 设置数据为负数时，元素向上移动
margin-left 设置数据为负数时，元素向左移动
5、margin 的简写方式
1、margin:value;
四个方向外边距是相同的
2、margin:v1 v2;
v1:上下外边距
v2:左右外边距
ex:
margin:0 auto;
3、margin:v1 v2 v3;
v1:上外边距
v2:左右外边距
v3:下外边距
4、margin:v1 v2 v3 v4;
上 右 下 左
2.2.3、页面中具备默认外边距的元素
在页面中
body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,pre
以上元素会具备默认的外边距
在网页开发中，通常会通过 CSS Reset(重写)的方式，将默认的外边距全部都设置为0
2.2.4、外边距的特殊效果
1、外边距的合并
当两个垂直外边距相遇时，他们将合并成一个，取两者间较大的值，作为他们的外边距
2、外边距的溢出
在某些特殊的条件下，为子元素设置外边距时，会作用到父元素上
特殊条件：
1、父元素不能有上边框
2、为第一个子元素设置上外边距时
解决方案：
1、为父元素增加上边框即可
弊端：父元素的高度会发生改变
2、为父元素设置上内边距来取代子元素的上外边距
弊端：父元素的高度会发生改变
3、在子元素之上再增加一个空<table></table>
弊端：在页面上会多一个空子元素
4、... ...
3、为行内元素 和 行内块元素设置垂直外边距时
1、行内元素
对垂直外边距，无效，img 除外
2、行内块元素
整行元素都跟着发生改变
3、内边距
3.1、什么是内边距
内容区域 与 边框(边缘)之间的空间
注意：内边距会扩大元素边框的占用区域
3.2、语法
1、属性
padding:值;
padding-top/right/bottom/left:值;
2、取值
1、为 px 具体值
2、为 % 的相对数据
3、简便写法
1、padding:value;
四个方向外边距相同
2、padding:v1 v2
上下 左右
3、padding:v1 v2 v3;
上 左右 下
4、padding:v1 v2 v3 v4;
上 右 下 左
3.3、特殊效果
1、为行内元素 和 行内块 元素设置垂直内边距时
只会影响自己，并不会影响其它元素
3.4、box-sizing
页面中 元素边框内 的尺寸计算方式
元素边框内宽度=左右边框+左右内边距+width
div{
width:400px;
border:2px solid red;
border-left-widt:17px;
padding-left:32px;
padding-right:16px;
}
属性：box-sizing
作用：重新指定元素框模型的计算模式
取值：
1、content-box
默认值，采用默认的计算模式
元素边框内宽度=左右边框+左右内边距+width
元素边框内高度=上下边框+上下内边距+height
2、border-box
新计算模式，会将元素的border以及padding算在 width 和 height 之中
4、背景属性
4.1、背景颜色
属性：background-color
取值：
合法颜色值 或 transparent
注意：
1、背景色会填充到元素的内容，内边距，以及边框上的
2、如果边框为透明色，则边框位置处显示的颜色与背景色一致
4.2、背景图像
属性：background-image
取值：url(图像URL)
注意：
1、背景图是从元素的左上方出现的
2、如果背景的尺寸大于元素的尺寸的话，那么落在元素内的图片是可见的，元素外的图是不可见的
3、如果元素的尺寸大于背景图的尺寸，默认是以平铺(重复)的方式出现的
4.3、背景图像重复
属性：background-repeat
取值：
1、repeat
在垂直和水平方向都平铺,默认值
2、repeat-x
仅在水平方向平铺
3、repeat-y
仅在垂直方向平铺
4、no-repeat
不平铺
4.4、背景图片尺寸
属性：background-size
取值：
1、width height
2、width% height%
3、cover
覆盖，将背景图等比放大，直到背景图能覆盖到当前元素的所有区域为止
4、contain
包含，将背景图等比放大，直到背景图的右边或下边碰到元素边缘为止
4.5、背景图片固定
属性： background-attachment
取值：
1、scroll
默认值，背景图会随着滚动条而滚动
2、fixed
固定,背景图不会随着滚动条的滚动而改变位置
4.6、背景图片定位/位置
作用：改变背景图像在元素中的默认位置
属性：background-position
取值：
1、x y
x ：背景图像水平偏移距离，取值为正，背景图向右偏移，取值为负，背景图向左偏移
y ：背景图像垂直偏移距离，取值为正，背景图向下偏移，取值为负，背景图向上偏移
2、x% y%
背景图在元素的大体的哪个位置处
3、关键字
x : left / center / right
y : top / center / bottom
CSS Sprites
雪碧图，精灵图
将若干幅小图片拼合一幅大图片中的实现方式
4.7、背景属性
属性：background
取值：color url() repeat attachment position
ex:
1、background:red;
2、background:url(a.jpg) -10px 125px;
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
