CSS基础

1.语法

	选择器 {

		属性：值；

}

2.选择器类型

	简单选择器 ==》名称 id 类

	组合选择器 ==》特定关系

	伪类选择器 ==》特定状态

	伪元素选择器 ==》选取元素的部分，并为其设置样式

	属性选择器 ==》根据属性或属性值来选取元素

3.引入方式

引入文件
<link rel='stylesheet' type='text/css' href=''>
内部
<style>
    <style/>
    
 行内设置

属性和元素

1.颜色设置

为元素设置颜色 color rgba(1，1，1，透明度)

文本颜色 color：

边框颜色 border：大小 样式 颜色

2.背景

opacity 透明度/不透明度

background-color

指定元素背景色

background-image

背景图像 指定url

background-repeat

指定在哪个方向重复 repeat-x,repeat-y;

只显示一次 on-repeat

background-attachment

指定图像是滚动还是固定

固定在屏幕上 fixed 屏幕滚动它不动，一直显示

随页面滚动 scroll 

background-position

指定背景图像的位置 right top left bottom

3.边框属性

1.border-style 边框样式

dotted 点线边框

dashed 虚线

solid 实线

double 双边框

none 无边框

hidden 定义隐藏边框

2.border-width 边框宽度

px，pt，em，cm，一般用px

上右下左

3.border-color 边框颜色

颜色，方位同上

4.边框属性简写

border：大小 样式 颜色

通过border-left等可以控制单边

5.圆角边框

border-radius 单位px

越大越圆

4.外边距

1.margin: top/right/bottom/left

设置 margin ：0 auto

元素置顶，水平居中

2.外边距合并

CSS 外边距合并（Margin collapsing）是指在特定情况下，相邻（或嵌套）元素的外边距会合并成一个较大的外边距值，而不是简单地取最大的外边距值

1.相邻块级元素的外边距合并：这个大小就是两个外边距中比较大的那个

<div style="margin-bottom: 20px;"></div>
<div style="margin-top: 30px;"></div>
这样外边距为30px

2.父元素和其第一个/最后一个子元素的外边距合并：

如果父元素没有 border、padding、inline content、height 或 min-height 来分隔它和它的第一个/最后一个子元素，则父元素的上外边距会与其第一个子元素的上外边距合并，父元素的下外边距会与其最后一个子元素的下外边距合并

意思就是合并外边距为父元素的外边距

避免合并的方法：

1.使用padding代替外边距，内边距不会触发外边距合并规则，因此可以用来控制元素之间的间距而不影响外边距的合并

2.边框或者清除浮动，可以改变元素的布局上下文，从而避免外边距合并的影响

3.使用浮动或者定位

4.用flex布局就不用担心这个问题了

5.文本

color 属性用于设置文本的颜色

background-color 背景颜色

1.文本对齐 text-align

text-align: center; 居中

text-align: left; 左

text-align: right; 右

text-align: justify;设置了以后会拉伸每一行变成宽度相同的行

3.文本方向 direction 和 unicode-bidi

属性可用于更改元素的文本方向

4.垂直对齐方式 vertical-align

top / middle / bottom

看是上对齐还是下对齐，还是中间对齐

5.文本转换 text-transform

text-transform: uppercase; 全部转大写

text-transform: lowercase; 全部转小写

text-transform: capitalize; 首字母大写

6.文本装饰 text-decoration

主要用于链接中删除下划线

上划线 overline

删除线 line-through

下划线 underline

7.字体

font-family 设置字体

font-style 指定斜体文本

normal 正常显示

italic 斜体

font-weight 指定字体的粗细

normal 正常

bold 粗体

font-variant 小写字母转成小型大写字母

 font-variant: small-caps;

font-size 字体大小

px，em，百分比等

也可以用vw（浏览器窗口大小），1vw = 视口宽度的1%

6.链接

a:link - 正常的，未访问的链接

a:visited - 用户访问过的链接

a:hover - 用户将鼠标悬停在链接上时

a:active - 链接被点击时

7.伪元素和伪类

1.伪类

用于定义元素的特殊状态

active 选择活动的链接

checked 选择被选中的input

first-child 第一个子元素

nth-child 选择子元素的第二个孩子

focus 选择获得焦点的input

hover 选择鼠标悬停的链接

visited 选择所有已访问的链接

link 选择所有未访问的链接

2.伪元素

p::after 在每个p元素后面插入内容

p::before 前面

p::first-letter 选择每个p元素的首字母

p::first-line 选择首行

p::selection 选择用户选择的元素部分

8.元素显示Display

1.display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

2.display设置属性

display可以改变元素的显示属性，让元素拥有新的特点

block 块级显示

inline 行内显示

inline-block 行内块

flex 弹性盒子，形成弹性布局