女朋友担心我的CSS基础，我用这一篇博客征服了她

目录:
1.CSS的引入方式
2.CSS选择器
3.字体样式
4.文本样式
5.边框样式
6.列表样式
7.表格样式
8.图片样式
9. 背景样式
10.超链接样式
11.盒子模型
12.浮动布局
13.定位布局
14.后续补充

1. CSS的引入方式

1.1外部样式表

意思是把HTML和CSS放在放在不同的文件里，然后用link标签来引入CSS文件

格式及说明：

<link rel="stylesheet" type="text/css" href="文件路径" />  

• link标签放在HTML的head标签里
• rel属性和取值都是固定的，表示引用一个样式表文件(即CSS文件)
• type属性和取值也都是固定的，表示这是一个标准的CSS文件
• herf是指CSS文件路径

1.1内部样式表

就是把HTML代码和CSS代码放在同一个HTML文件

格式及说明：

<style type="text/css">
    ……
</style>

• CSS代码放在style标签中，然后style标签放在head标签内
• 属性type和属性值text/css是固定不变的，表明是标准的CSS

例子：

1.3行内样式表

同样的把HTML和CSS的文件放在同一个文件里，但是此时的style不是在head标签的内部

直接一个例子：

2. CSS选择器

2.1元素的id和class

id和class都是标签最基本的两个属性，id属性的属性值具有唯一性，在一个页面，相同的id只能出现一次，class属性是为同一个页面的不同元素设置相同的class，然后使相同的class具有相同的CSS样式注意每一个标签的id名字都不能重复，不管是不是同一种标签，所以id选择器一次只能选择一个标签。id和class的命名必须是以字母开头，包含数字字母下划线或者横线

2.2元素选择器

意思就是相同的标签具有相同的属性

2.3id选择器

为元素设置id属性，然后针对设置的id元素定义CSS样式

举个例子：

注意id选择器id名的前面必须加上前缀#否则无法生效

2.4class选择器

我们可以对相同或者不同的元素定义相同的class属性，然后针对相同的class元素，使用同一CSS代码进行操作

举个例子：

注意class名前必须加上.前缀不然无法生效

2.5后代选择器

后代选择器就是选择元素内部中某一元素的所有元素，包括子元素或者其他的后代元素

例子：

2.6通配符选择器

通配符可以选择body标签里边所有的标签

*+{
   }

一般通配符选择器都用于清除默认样式：
很多标签都有一些默认的盒子样式比如body，div等都有默认的内外边框需要清除可以用下面代码进行清除默认样式

*{
margin:0;
padding:0;
   }

2.7群组选择器

指同时对几个选择器进行操作

举例：

2.8交集选择器

就是一个class属性里边有多个class的值，比如

我们可以看到

  p.box1.box2{
    		
    	background: green;
    }

这行代码p标签内class值既有box1又有box2的标签，那么就对应<p class="box1 box2">

2.9兄弟选择器

直接看代码

cc会被标注成红色
.aaa+p代表的意思是选中和.aaa紧挨着的p元素，如果不是紧挨着就不会被选中
如果是.aaa~p就是选中.aaa后边的所有的p标签

3.字体样式

3.1字体样式属性

3.2字体类型

font-family：我们往往会使用不同的字体，比如宋体，微软雅黑。

格式及说明：

font-family: 字体1, 字体2, ... , 字体N;

• font-family可以指多种字体，指多种字体的时候按从左到右的顺序进行排序
• 如果不定义此属性那么默认是宋体
• 如果字体类型是由多个单词组成那么需要加上双引号
• 定义多种字体的意思，每个人的电脑的字体有可能不一样，有可能有些字体安装，有可能有些字体没安装，比如 p{font-family:Arial,Verdana,Georgia;}意思是p标签内优先使用Arial字体，如果电脑没有那么再考虑Verdana,依次类推

3.3字体大小

font-size：属性值分为两种，一种是关键字small,medium,large 依次加大，另一种直接是像素值

3.4字体粗细

font-weight：属性值分为两种，一种是100~900的数值依次加粗，还有一种关键字lighter，bold,bolder依次加粗

介绍完这三种属性后，我们会发现，如果一个一个属性的写，那么显得麻烦，这里就可以用到font的复合属性

font-size: 20px;
line-height: 400%;//行高，后边会讲
font-family:“宋体”;

上边这三行等价于

font:20px/400% “宋体”;

这里注意行高属性在书写时必须在文字自号后边。

3.5字体风格

font-style：属性值为italic时为斜体，属性值为oblique时也为斜体

既然都是斜体，那么有什么区别呢，可以这么理解：
有些字体有italic属性，但是有些字体却没有italic属性。oblique是让没有italic属性的字体也有斜体的效果

3.6字体颜色

color：介绍两种属性值，一种是关键字red，green等，一种是十六进制的RGB值。

RGB其实就是是通过三种颜色(红绿蓝)不同的浓度来表示不同的颜色，浓度在0~255之间

例如：

color:rgb(255,0,0)表示红色

表示成十六进制就是：

color:#ff0000就表示红色
color:#000000就表示黑色
color:#ffffff就表示白色

4.文本样式

4.1文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写转换
line-height	行高
letter-spacing,word-spacing	字母间距词间距

4.2首行缩进

text-indent：属性值为像素值
例子：

4.3水平对齐

text-align：有三个属性值分别为left(左对齐)，center(居中对齐)，right(右对齐)

4.4文本修饰

text-decoration：常用的属性值为underline(下划线)，line-through(中划线)，overline(顶划线)

举例;

一般的，我们的超链接都会有下划线

那么只要我们把text-decoration属性值变成none就行了

4.5大小写

text-transform：有三个属性值uppercase(转换成大写)，lowercase(转换成小写)，capitalize(只将每个英文单词的首字母变成大写)

4.6行高

line-height：属性值就是像素值或百分比(百分比是和字号比较200%就是字号的两倍)
这里有一个妙用让行高等于盒子高让文字在盒子内居中对齐

4.7间距

1.letter-spacing：字间距(如果有英文的话，把每一个英文的单词看出一个字)，属性值为自定义像素值
2.word-spacing：单词间距(只针对英文)，属性值为自定义像素值

5.边框样式

5.1边框样式属性

5.2整体样式

1.border-width：定义边框的宽度取值是一个像素值
2.border-style：通常属性值有两个dashed(虚线)，solid(实线)

举个例子，我们为div添加边框

比如我们给一个图片添加边框

其实div里边的CSS代码可以等价于border:1px solid red,这是CSS里边的简写形式

5.3局部样式

每个边框都可以自己设置自己的width,style和color,举个例子：

6.列表样式

6.1列表项符号

6.2list-style-type有序列表的属性取值

属性值	说明
decimal	阿拉伯数字(也是默认值)
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母

例子：

6.3list-style-type无序列表的属性取值

属性值	说明
disc	实心圆(默认值)
circle	空心圆
square	实心正方形

例子：

6.4去除列表项符号

list-style-type

例子：

6.5列表项图片

list-style-image：ulr(图片路径)：我们可以自定义列表项符号

7.表格样式

7.1表格标题的样式

caption-side：两个属性值，第一个top(默认值)表示标题子顶部，第二个属性值botton,表示标题在底部

例子：

7.2表格边框合并

border-collapse：由于表格之间是有空隙的，所以可以使用这个属性进行边框合并，属性值常用的有两个，separate(边框分开，有空隙也是默认值)，collapse(边框合并，无空隙)

例子：

当我们不合并的时候:

合并后

7.3表格边框间距

border-spacing：属性值为像素值

例子：

图片样式

8.1图片大小

1.width：设置图片宽度，属性值为自定义像素值
2.heigth：设置图片高度，属性值为自定义像素值

8.2图片边框

8.3图片对齐

text-align：水平对齐，常用属性值有三个，left(左对齐，默认)，center(居中对齐)，right(右对齐)

8.4文字环绕

float：常用属性值有两个，一个是left(向左浮动)，right(向右浮动)

例子：

9.背景样式

9.1背景样式属性

属性	说明
background-image	定义背景图片的地址
background-repeat	定义图片地址重复，横向或者纵向重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定

9.2背景颜色

background-color：一般我们两种属性值，第一种是英文值，一种是十六进制的RGB值

9.3背景图片样式

background-image：属性值为url(图片地址)

例子：

注意：我们要想使用图片当背景，必须设置标签的宽高，否则图片无法正常显示

9.4背景图片重复

background-repeat：repeat在水平方向和垂直方向同时平铺(默认值)，repeat-x只在水平方向平铺，repeat-y：只在垂直方向平铺，no-repeat不平铺

9.5背景图片的位置

background-position：属性值有两种一种是像素值，一种是关键字

1.像素值

我们需要同时设置水平和垂直方向的属性值，例子：

40px是水平方向图片与网页最左端的距离，20px是与最顶端与图片的距离

2.关键字

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

9.6背景图片的固定

background-attachment：scroll(随标签一起滚动)，fixed(固定不动)

10.超链接样式

10.1超链接伪类

一般情况下我们的超链接在鼠标点击后前后有不同的样式：

• 默认情况下，字体为蓝色，带有下划线
• 鼠标点击时，字体为红色，带有下划线
• 鼠标点击后，字体为紫色，带有下划线

我们可以使用超链接伪类来定义超链接点击之后的不同时期的样式，超链接伪类如下：

伪类	说明
a:link	定义元素未访问的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过a的样式
a:active	定义鼠标点击激活之后的样式

这里的text-decoration:none是去掉下划线的操作

10.2深入hover

很多朋友可能都以为hover只限用于a标签,其实不是，他其实适用于任何标签

例如，用于div标签，当我们把鼠标放在div区域上

再比如我们鼠标到为img标签时为图片添加一个边框：
下面是我们鼠标没有放在上边的效果

我们鼠标放在上边的效果：

10.3鼠标样式

cursor：这个属性代表浏览器鼠标样式，一般常用的属性值有三种，一种是默认的default，一种是pointer(手装),一种是text(大写的I装)

当然我们也可以自定义鼠标的样式语法：

cursor:url(图片地址)，属性值：属性值和上边的一样

11.盒子模型

11.1盒模型简介

盒模型也叫框模型包含五个部分：宽度(针对内容区)，高度(针对内容区)，内边距，边框，外边距

属性	说明
content	内容区，可以是我文本或者图片
padding	内边距，用于定义内容和边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框
width	内容区的宽度
height	内容区的高度

这里我们有几个个注意点

• 我们常提到的盒子的宽度其实是width+padding+boreder，并不只是width
• 这里我们设置的width和heigth都是内容区,我们设置的背景颜色是针对整个盒子而言，所以在我们设置一个盒子的宽高后再设置内边距就会使盒子变大，因为内容区大小不会，变得是整个盒子的大小`

11.2内联元素和块元素在盒子模型中的用处和区别：

区别：

1. 块元素能设置宽高，而内联元素不能设置宽高，内联元素用内容撑起宽高
2. 内联元素可以设置内边距，在水平方向可以影响布局，在垂直方向不影响布局(影响布局就是元素会不会影响其他元素在网页中的位置)

内联函数和块元素的相互转换：

display: 内联函数和块元素的相互转换所用属性
属性值：
inline(将一个元素当作一个内联元素显示)
block(将一个元素当作一个块元素显示)
inline-block(使一个元素既有块元素的特点又有内联元素的特点即既可以设置宽高又不会独占一行)
none:不显示元素，并且元素不会在页面继续占有位置

11.3内边距外边距

padding：内边距
margin：外边距

设置内边距(外边距也适用)的六种方式
padding可以分别设置上下左右的内边距

1. 分别设置：上边距：padding-top:10px，右边距：padding-right:20px，下边距：padding-bottom:30px 左边距：padding-left:40px
2. 四值法：podding ：10px 20px 30px 40px(按照上右下左的顺序)
3. 三值法：padding :10px 20px 30px(上下不同左右相同,中间代表左右边距)
4. 二值法：padding:10px 20px(上下相同左右相同时第一个值代表上下边距，第二个值代表左右边距)
5. 一值法：padding :10px(上下左右边距都相同时)
6. 覆盖法：padding:10px，padding-right:20px(先设置所有的，再单独设置右边距，覆盖原来的)

外边距的水平方向还有一个特别的属性值auto

auto一般用于设置水平方向，当只给左或者右方向设置margin那么就会在这个方向有最大的外边距，如果左右都设置auto那么就会水平居中

举个例子，让子盒子在父盒子里边水平和垂直都居中

12.浮动布局

12.1正常文档流

正常文档流就是将页面从上到下将页面分成一行一行的，其中块元素独占一行，相邻的行内元素在每一行从左到右依次排满，正常文档流就是默认情况下页面元素的布局情况

看一段代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div></div>
    <span></span><span></span>
    <p></p>
    <span></span><i></i>
    <img />
    <hr />
</body>
</html>

作为正常文档流，那么它的布局就是

12.2脱离文档流

脱离文档流就是指脱离正常的文档流，正常文档流就是我们没有用浮动或者定位去改变默认的HTML文档的结构，换句话说，改变正常文档流有两种方法，浮动或者定位，这里我们主讲浮动

浮动的意义在于使块元素脱离文件流
属性值：float
属性值：
none：默认值
left：元素脱离文档流向页面左侧浮动
right：元素会立刻脱离文档流向页面的右侧浮动

关于浮动的注意点：

1. 当一个元素脱离文档流后它下边的元素会立刻向上移动
2. 元素浮动以后，会尽量向页面的左上或右上漂浮直到遇到父元素的边框或者其他浮动块元素
3. 如果浮动元素上边是一个没有浮动的块元素，则浮动的元素不会超过块元素，即浮动元素不会超过他上边的兄弟元素最多一边齐
4. 浮动元素会遮住不浮动元素的内容区，但是如果内容区有文字那么文字不会被遮住
5. 不管是内联元素还是块元素只要被设置为浮动其高度和宽度都会被内容撑开

对于第四点：

12.3高度塌陷问题：

高度塌陷问题的产生
1.在文档流中如果不给父亲设置高度，那么父亲的高度默认是被子元素撑开的即：

如果我们为子元素设置向左浮动就会导致父亲高度的塌陷从而导致整个网页的布局被打乱
即：

第一种解决方法：
1.开启元素的BFC属性：
开启后有元素有如下属性：
(1)父元素的垂直边距不会和子元素重叠(子元素设置margin比父亲的margin大的时候，父亲不会受子类的移动而发生移动)
(2)元素不会被浮动元素所覆盖
(3)可以包含浮动的元素
2.开启BFC的方法：
(1)设置父元素浮动(这种方法对打乱的网页布局不会产生效果)

(2)为父元素设置同等高度，虽然可以但是如果子元素的高度发生改变就父元素就需要同等的改变
(3)将overflow设置一个非visible的值

第二种解决方案：
先介绍一个清除其他元素对当前元素参生的影响：
属性clear:
属性值：
none：默认值不清除浮动
left：清除左侧浮动对当前元素参生的影响
right：清除右侧浮动对当前元产生的影响
both：清除两侧元素对当前元素影响最大的
比如有三个盒子：

如果对红色的元素设置左浮动蓝色设置右浮动那么就有:

设置clear的both属性(本质就是右侧浮动影响大)：

最终方案
(1)可以为高度塌陷的父元素内加一个div元素并且清除浮动带来的影响就very perfect
但是由于相当于多了一个盒子所以并不是最完美的解决方法

(2)通过after伪类向元素的最后添加一个空白的块元素然后对齐进行清除浮动
对于伪类里边的内容：
centent:必须要添加，这一项表示添加内容，当属性值什么都不加的时候就表示仅仅加了空的盒子(和加一个div相同)
display：表示是添加的是一个块装元素
clear：清除浮动的影响

定位布局

13.1定位布局简介

1.定位布局：

作用：将指定元素放在指定的页面的位置
属性：position
属性值有static(默认值)，relative(相对定位)，absolue(绝对定位)，.fixed(固定定位)

13.2相对定位

position:relative：设置相对定位的时候需要用left,right,top,bottom四个属性设置偏移量
这里注意设置的偏移量会向相反方向移动
几个注意事项：

• 开启定位后不设置偏移量就不会发生任何变化
• 相对定位是相对于文档流中原来的位置来定位
• 相对定位的元素不会脱离文档流
• 相对定位会使元素提升一个层级(每个元素都有一个层级，当两个元素重合时层级高的元素会盖住层级低的元素)
• 相对定位不会改变元素的性质块元素还是块元素内联还是内联

例子：

当我们设置相对定位后：

13.2绝对定位

position:absolue：设置绝对定位的时候需要用left,right,top,bottom四个属性设置偏移量

注意事项：

• 开启绝对定位后会使文档脱离文档流
• 开启绝对定位后不设置偏移量元素得到位置不会发生变化
• 开启绝对定位后相当于离他最近的开启了定位的元素进行定位的如果祖先元素没有开启定位(相对定位绝对定位都行)则会相当于浏览器窗口进行定位(与浏览器最左上角对齐)
• 绝对定位会使元素提升一个层级
• 绝对定位会改变元素的性质(内联元素变成块元素，块元素的宽高被内容撑开)

举个例子：

当我们添加绝对定位的代码后：

4.fixed：固定定位

position:absolue设置绝对定位的时候需要用left,right,top,bottom四个属性设置偏移量
固定定位是一种绝对定位，但他们的不同点为：

• 固定定位永远都会相对于浏览器窗口进行定位
• 固定定义会固定在浏览器窗口的某个位置，不会随网页的滚动而滚动

举例：

14.后续补充

14.1CSS继承性和重叠性

继承性和重叠性是css层叠式的两个特性
(1)css继承性：
后代元素能够继承祖先元素的文字样式(包含字体大小加粗颜色等)，不能继续盒子的样式
(2)层叠性：
如果多种选择器选择一个目标那么谁权重大听谁的
权重：id选择器>类选择器>标签选择器
计算权重的方法：数基础选择器个数id个数，类的个数，标签个数
依次比较，谁先大听谁的，比如id一样，那么听类的个数大的，如果类的个数也一样，那么比标签个数，如果标签也一样那么就比较先后顺序，听顺序靠后的。
如果没选中目标标签则需要靠继承，依靠就近原则，如果距离相同就比较权重，权重相同看先后顺序，听顺序靠后的
!important：直接把权重提升到最大
直接在一个属性后边加上!important
!important不能在就近原则中使用，当import所处标签是爷字辈还有一个爹字辈时会听爹字辈加粗样式

14.2：visibility和overflow

1.设置元素隐藏和显示属性
属性：visibility
属性值：
visible：默认值代表元素默认会在页面显示
hidden：元素隐藏不显示，但是会继续占有

2.父元素处理子元素移除部分
属性：overflow
属性值：
visible(默认值不会做出任何处理)
hidden(溢出的部分会被修剪不会显示)
scorll(为父元素加滚动条,不管子元素有没有溢出都会自动添加滚动条)
auto(需要添加水平滚动条就添加水平滚动条，需要垂直就添加垂直滚动条，不需要就不加)