2019最新CSS基础知识学习

CSS基础

一、CSS概述
1、css作用
提出统一的方式来修改页面元素的“样式”
2、什么是CSS
Css：cascading style sheet
级联样式表或层叠样式表，俗称：样式表
3、css的优势
1.实现了“内容”与“表现”的分离
2.更大程度的去提高代码的可重用性和可维护性
4、css的使用方式
1.内联样式（行内样式）
将样式定义在单个的html元素里的
使用方式：将样式定义在style属性中
特点：只对当前标记有效。
语法：

样式内容：
样式属性：属性值；……
Eg：
Color:文本颜色
取值：red,blue,yellow,green,pink,black…
Background-color:背景颜色
取值：red,blue,yellow,green,pink,black…
2.内部样式表
将所有的样式定义在HTML的头元素中
语法：

样式规则：要修改的标记的属性
样式规则的语法：
选择器{
样式属性：属性值；……
}
选择器：规范了哪些元素能够使用当前定义好的样式。
元素选择器：（标记选择器），由元素的名称作为选择器，符合该选择器的元素都将使用当前样式。
Eg：

div{
color:red;
background-color:green;
}

特点：能够实现样式表的可重用性和可维护性
3.外部样式表
将样式定义在一个外部的css文件中（*.css文件）
由HTML页面对外部样式表进行引用
使用步骤：
1.创建一个css文件保存样式规则
2.在需要的HTML页面上引用css文件

5、css样式表特征
1.继承性
大多数css样式规则是可以被继承的
2.层叠性
页面中可以定义多个样式表
如果不冲突时，多个样式表中的样式可以层叠为1个
3.优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
样式优先级：
1.浏览器缺省设置（默认显示规则）
2.外部样式表或内部样式表
就近原则
3.内联样式（行内样式）：优先级最高
3>2>1
!important 规则 ！：非
可以通过！Important规则调整样式优先级
！Important放在样式属性之后，中间用空格分开，该值的优先级是最高的。

div{
color:red !important;
}

注意：谨慎使用，能不用就不用

二、css基础选择器
选择器：规范页面上哪些元素能够使用定义好的样式
1、通用选择器
语法：*
作用：与页面上任何一个元素匹配
通常定义页面上所有的标签的默认样式
Eg：

*{
Font-size:12px;
Color:red;
}

1、元素选择器
别名：标记选择器、标签选择器
语法：由HTML标记 作为选择器如，html、body、div、span、a、b
作用：修改某个标记的默认样式
Eg：

a{
Text-decoration:none;
}

2、类选择器（类样式）
用户可以随意定义一个选择器，然后由标签通过class属性来进行引用
语法：

.className{
样式属性：值;
}

引用：通过标记的class属性对类名进行引用
Eg：

test

Class属性值，支持列表形式，成为值列表。即class属性后允许出现多个class值，每个值之间空格隔开
3、分类选择器
将类选择器与元素选择器结合起来使用。以实现对某种元素中的不同样式的细分控制。

语法：元素选择器 .类选择器{}
作用：精确定位到某个元素上
Eg：

div.important

4、id选择器（id样式）
以一种独立的方式来定义样式
仅作用在id属性值 能与当前选择器名称匹配的元素上
语法：

#idName

Eg:

#nav{
Background-color:blue;
}

布局用id，内容实现用class。
5、群组选择器
作用：同意定义一组选择器中的通用样式

P{
Color:red;
}
Div{
Color:green;
}
Span{
Color:green;
}

语法：用，号隔开的选择器列表

P,div,span,#nav,.back{
Color:green;
}
Div{
Background:yellow;
}
#nav{
Background-color:red;
}

6、后代选择器
后代元素选择器
作用：通过元素的位置关系来匹配到元素

语法：选择器1 选择器2

div span{

}

7、子代选择器
子代元素选择器
作用：主要通过元素的位置关系来匹配到元素，缩小匹配的范围。
特点：只通过一层父子关系来查找元素
语法：选择器1>选择器2
匹配的是 选择器1：“下一级”元素中，满足选择器2的元素
8、伪类选择器
作用：匹配元素不同的状态的
语法：
选择器1：伪类选择器{}
伪类分类：
链接伪类
动态伪类

目标伪类
元素状态伪类
结构伪类
否定伪类

1.链接伪类
：link，定义尚未访问的链接样式
：visited，定义访问过链接的样式
2.动态伪类
匹配用户的一些动作
：hover，定义鼠标悬停在元素上的样式
：active，定义html元素被激活时的样式
：focus，定义html元素获取焦点时的样式

三、单位
1、尺寸单位
2、颜色单位
1.rgb（r，g，b）
r: red(0~255)
g:green(0~255)
b:blue(0~255)
Rgb(255,255,255)

Rgb(%,%,%,)
Rgba()
a:alpha,透明度 0-1之间的小数
3、#rrggbb 16^6
十六进制：0-9 A-F
#000000：白色
#ffffff ：白色
#fe0000：红色
#e4393c：京东红

#rgb: -->#rrggbb缩写，仅限每两位数字都一样的情况使用
#000 -->黑（深）
……
#fff -->灰（浅）
四、尺寸的属性
用于描述元素的高度和宽度
单位：像素、百分比
宽度：
Width：给定的宽度
Max-width：给定宽度范围的最小值

Min-width：给定宽度范围的最小值
高度：
height：给确定的高度值
Max-height:给定高度的最大值
Min-height:给定高度的最小值
注意：一旦元素给定宽度和高度后，如果元素中的内容超出范围，则会产生溢出的效果

五、溢出
Overflow：当内容溢出元素框时如何处理
取值：
Visible：溢出可见，默认值
Hidden：溢出隐藏
Scroll：溢出后滚动，默认的话会有滚动条
Auto：自动，不溢出，正常显示，溢出后，显示滚动条
单向溢出：
Overflow-x：横向溢出后的处理
Overflow-y：横向溢出后的处理

取值：visible、hidden、scroll、auto

六、哪些html元素允许设置尺寸属性
块级元素 允许设置尺寸相关属性
行内元素不可以
具备width，height属性的html元素，允许通过css修改
Img， table

七、边框
属性：
简写：border：width style color；
Width：取值为数值
Style：表示线条样式 取值solid（实现），dotted（虚线），dashed（虚线）
Color：设置颜色，可以取值为transparent（透明色）
单边定义：
Border-left/right/top/bottom：width style color;

Border-width:四个边框的宽度
Border-style:四个边框的样式
Border-color:四个边框的颜色
Border-方向-属性：
方向：left/right/top/bottom
属性：width，style，color
1、边框倒角
圆角矩形
属性：border-radius：
按照顺时针方向，从左上角开始，设置四个角的倒角半径。
取值：
可以为1个，可以为4个
取绝对值，也可以取百分比
单独定义：
Border-top-left-radius：左上角
Border-bottom-left-radius：左下角
Border-top-right-radius：右上角
Border-bottom-right-radius：右下角
2、边框阴影
属性：box-shadow
取值：多个属性值的值列表，中间用空格区分
H-shadow：必需，水平阴影的位置
V-shadow：必需，垂直阴影的位置
Blur：可选，模糊距离
Spread：可选，阴影尺寸
Color：可选，阴影颜色
Inset：可选，将默认的外部阴影改为内部阴影
常用方式：box-shadow：0px 0px 20px 1px red inset;{按顺序}
3、轮廓
绘制于元素周围的一条线，位于边框的外围，起到突出元素的作用。
属性：outline：width style color;
Outline:0px;取消轮廓，多用于表单元素上。

八、框模型：
内容（宽高）、内边距、边框、外边距
对象实际宽度：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距。
1、外边距
1.什么是外边距
围绕在元素边框周围的空白区域
会在元素外围创建空白区域，并且是透明的
2.属性
Margin：value；
Margin：
单边设置：
Margin-left/right/top/bottom 左右上下

取值：Px / % / Auto / 负值
注意：对于块级元素来说，设置左右外边距为auto的话，那么该元素会居中显示。

Margin：value；上下左右统一值；
Margin：v1 v2： 上下 左右
Margin：v1 v2 v3： 上 左右 下
Margin：v1 v2 v3 v4： 上 右 下 左

Eg：

Margin：15px 20px 8px；

解释：上边距：15px 左右外边距：20px 下边距：8px

注意：在html中，有一些元素会具备默认外边距
Body
H1~h6
P
Ul li
Dl dt dd
Margin所带来的影响：
1.外边距合并
两个垂直外边距相遇时，他们将形成一个外边距，称为外边距合并。最终外边距的值，以大值为准。
2.设置子元素的上外边距时，可能会成为父元素的上外边距。
解决方案：
1.设置父元素的边框
2.通过父元素的上内边距来解决。

2、内边距
1.什么是内边距
内容区域和边框之间的距离
注意：内边距会扩大边框所占有的区域
2.语法
Padding：value
Padding-top/bottom/left/right

取值单位：px、百分比

九、背景
1、背景颜色
2、背景图像
属性：background-image
取值：URL（路径）
Eg：

background-image：url（路径）；

3、背景重复
平铺
当图片大小小于元素大小时，就会出现背景重复。
属性：
Background-repeat
取值：
Repeat：在垂直和水平方向平铺，默认
Repeat-x：仅在水平方向平铺
Repeat-y：仅在垂直方向平铺
No-repeat：不平铺，只显示一次
4、背景图片尺寸
属性：background-size
取值：
V1 v2：宽度 高度
V1% v2%：百分比
Cover：覆盖
Contain：包含，背景图是能够完整的显示出来的
5、背景图片固定
属性：background-attachment
取值：
Fixed：背景图片固定，背景图不会随着滚动条而发生滚动
Scroll：默认值，滚动
6、背景定位
背景图片在元素中应该出现的位置
属性：
Background-position：
取值：
X Y：水平位置偏移量 垂直位置偏移量
+为右-为左 +为下-为上
X% Y%：偏移量取决于元素的width和height，多数用于背景图水平和垂直居中的时候。
7、背景属性（综合）
属性：background
取值：值列表
Color url（） repeat attachment position
Eg：

Background：#f00 url（images/pwd.png） no-repeat fixed 0px 0px;

常用：
Background:url repeat position;
Background:red;

十、渐变
1、渐变语法
属性：Background-image
取值：
Linear-gradient：线性渐变
Radial-gradient：径向渐变
Repeating-linear-gradient：重复线性渐变
Repeating-radial-gradient：重复径向渐变
Eg：
Background-image：linear-gradient（渐变参数）；
1.线性渐变
语法：
Linear-gradient（angle,color-point1,color-point2）
Angle：渐变方向或角度
To top：向上 --> 0deg
To right：向右 --> 90deg
To bottom：向下 --> 180deg
To left：向左 --> 270deg
Color-point：颜色点
颜色值 位置
Red 0%
Blue 50%
Yellow 100%
2.径向渐变
语法：
Radial-gradient([size at positon],color-point1,color-point2…);

Size：圆的半径
Position：圆心位置
3.重复的线性渐变
语法：
repeating-linear-gradient(angle,color-point);

十一、文本格式化
1、字体属性
1.指定字体
属性：Font-family
值：val1，val2……
Eg：
Font-family：”microsoft yahei”,”arial”
2.字体大小
属性：font-size
值：px、pt为单位
3.字体加粗
属性：font-weight
取值：normal/bold/400-900
4.字体样式
作用：斜体
属性：Font-style
值：normal/italic
5.小型大写字母
属性：font-variant
取值：normal/small-caps
6.字体属性：font
属性：font
取值：font-style font-variant font-weight font-size font-family;
Eg：

Font:12px “microsoft yahei”;
Font:bold 12px “微软雅黑”;
Font:12px/24px “微软雅黑”;

2、文本属性
1.文本颜色
属性：color
2.文本排列（水平）
属性：text-align
取值：left、center、right
注意：设置在外层元素上控制内层的 文本和行内元素 水平对齐方式
3.文本修饰
线条修饰
属性：text-decoration
取值：none/underline/line-through
4.行高
作用：设置一行文本的高度是多少，如果行高高于文本的高度，那么文本将在这段高度中垂直居中
使用场合：制作文本的垂直居中，将行高设置成与当前元素高度一致即可。缺点：只能有一行文本
属性：line-height
值：px
5.首行文本缩进
第一行的开始处要空出多大的距离
属性：text-indent
取值：以px为单位的值
6.文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color
Eg:

text-shadow:0px  0px  1px  red;

十二、浮动定位
1、定位
定义元素框相对于其 正常位置 应该出现的位置
位置可以是相对于自身、父级元素位置、其他元素以及浏览器窗口本身的位置。

1.定位分类
1.普通流定位（文档流定位、正常流）默认定位方式
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
2.普通流定位
块级元素：从上到下的一个接一个的排列
内联元素：在一行中从左到右的水平排列
2、浮动定位
1.什么是浮动定位
将元素排除在普通流之外（脱离文档流）
元素将不再占据页面控件
将元素放在 包含框 的左边或者右边
浮动元素依旧位于包含框之内
2.浮动属性
属性：float
取值：left/right/none
3.清除浮动元素所带来的影响
属性：clear
取值：left/right/both/none
定义了元素的哪边上不允许出现浮动元素
4.浮动元素对父元素的影响
父元素的高度，与子元素（浮动的）无关
解决方案：
1.设置父元素的高度
2.通过overflow解决
在父元素内增加 overflow:hidden;属性撑起父元素高度。
5.元素只要浮动起来，就会变成块级的行内元素，要是浮动起来的话，就允许修改其宽高。

十三、显示
1、显示方式
页面元素的显示模式
属性：display
取值：none/block/inline/inline-block
None：让生成的元素没有框，即让生成的元素不显示（隐藏）。
Block：让元素表现的像块级一样。
Inline：让元素表现的像行内元素一样，多个元素占一行。
Inline-block：行内块，还是行内元素，会具备块级元素的一些特点，允许修改元素的宽和高。
2、显示效果
1.可见性
真正意义上完成元素的隐藏
属性：visibility
取值：
Visible：可见的，默认值
Hidden：元素不可见，但是依然占据空间。
Collapse：用在表格上，删除一行或一列不影响表格布局。
尤其注意：hidden和display：none的区别。
2.透明度
属性：opacity
取值：0-1之间的小数
0完全透明 1完全不透明
3.垂直对齐方式
属性：vertical-align
取值：
Baseline：默认，基线对齐，放在父元素的基线上。
Top：顶端对齐
Bottom：底端对齐
Middle：居中对齐
使用场合：
1.table里
2.Img：图片左右的文本相对于图片本身的垂直对齐方式
3、光标
属性：cursor
取值：
Default：浏览器默认
Pointer：鼠标变成手的形状
Crosshair：十字准心
Text：I
Wait：等待
Help：帮助

十四、列表样式
1、列表样式
1.列表项标识
属性：list-style-type
无序列表：
取值：
None
Disc
Circle
Square
有序列表：
取值：
None
Decimal
Lower-roman
……
2、列表项图像
将默认的标识替换成自己的图像
属性：list-style-image
取值：url（图像路径）
3、列表项的位置
属性：list-style-position
取值：
outside：默认值
Inside：将标识放在文本区域内
4、列表属性
属性：list-style：type url position
常用方式：list-style：none；

十五、定位
1、定位方式
属性：position
偏移属性：top、bottom、left、right
1.普通流定位
语法：
Position：static；
所有元素的position默认值都为static
2.相对定位
1.什么是相对定位
相对于元素原来的位置偏移某个距离
2.特点
元素仍然保持当前的形状
元素原来所占的空间依然保留
3.语法
Position：relative；
属性：position
值：relative

通过 left/right/top/bottom 实现位置偏移
4.使用场合
1.元素位置会发生微妙的变化
2.主要配合着其他的（绝对定位）定位方式一起来使用

3.绝对定位
绝对定位和相对定位的差别，定位元素的起始位置不同
1.什么是绝对定位
将元素内容从普通流中完全移除（脱离文档流），不占据页面空间。
绝对定位的起始位置：相对于离他最近的 已定位的（relative，absolute）祖先元素。
如果当前元素不具备已经定位的祖先元素，那么它的位置就相对于最初的包含块（body）。
2.语法
属性：position
值：absolute
通过：top、bottom、right、left实现位置的偏移。
3.使用场合
1.适合配合着relative做弹出菜单
4.固定定位
将元素固定在页面中的某个位置处，不随着滚动条发生位置的变化。
固定定位也从文档流中溢出，不占用页面空间
4.层叠顺序
属性：z-index
取值：不带单位的数字
使用场合：在已定位的元素身上使用，值越大越靠前