CSS的基础知识@TOC

CSS的发展历史

1.CSS的英文

Cascading Style Sheets
层叠样式表

目前CSS只支持：横向或者纵向布局

1.两个人合作发明了CSS
1994年哈肯.维姆莱提出了css的最初建议。伯特波斯当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS
2.W3C开始接管CSS
1997年初。W3C内组织了专门管CSS的工作组，其负责人是克里斯李雷
3.css2.1
1988年5月W3C发表了CSS2
CSS2.1修改了CSS2中的一些错误，删除了其中不被支持的内容和增加了一些已有的浏览器的扩展内容
4.CSS3
从2011年开始CSS被分为多个模块单独升级。统称为CSS3
这些模块有：
CSS选择器level3
CSS媒体查询level3
CSScolor level3
5.CSS4?
没有CSS4，只有模块的level4
周边工具
LESS CSS
一种简化、功能更多的CSS语言
SASS
一种简化、功能更多的CSS语言
PostCSS
一种CSS处理程序

CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着html的成长，为了满足前端开发者的需要，html新增很多样式属性，html变得更加杂乱，html越来越臃肿，这时，css诞生了

CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。

如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师

\没有不漂亮的女人，只有不会打扮的女人。

\没有不好看的网页，只有不会CSS的前端。

CSS的基本属性

1.border:边框

边框样式的参数：

solid;/边框为实线实线边框（常用）/

none; /无边框/

dotted; /边框为点线/

dashed;/边框为长短线/

double;/边框为双线/

groove ;/根据border-color的值画3D凹槽/

ridge;/根据border-color的值画菱形边框/

inset; /根据border-color的值画3D凹边/

outset ;/根据border-color的值画3D凸边/

1.1、border四个边框
border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框

在开发中我们一般这样写CSS 边框，优化简写，常见对对象设置使用属性代码：border:1px solid #blue;。

2.背景属性： (background)

background /颜色/

background-image: url();/背景图片/

在开发中我们经常看到一些小图标，那样做法就是页面的减少请求，

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面。

在线合并网站：https://www.toptal.com/developers/css/sprite-generator

background-repeat: no-repeat;/不重复平铺背景图片/

repeat-x;/使图片只在水平方向上平铺/

repeat-y;/使图片只在垂直方向上平铺/

/如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。/

/*背景图片固定，背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览

器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定*/

background-attachment: 参数

参数取值范围：

background-attachment: fixed;(固定)

scroll;(滚动)

background-position: left;(水平)

top(垂直);位置

fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动

scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动

3、超链接设置 text-decoration: 参数主要用途是改变浏览器显示文字链接时的下划线。
参数取值范围： underline：为文字加下划线
overline：为文字加上划线
line-through：为文字加删除线
blink：使文字闪烁
none：不显示上述任何效果

CSS连接属性：

a /所有超链接/

a:link /超链接文字格式/

a:visited /浏览过的链接文字格式/

a:active /按下链接的格式/

a:hover /鼠标转到链接/

鼠标

cursor：鼠标形状参

CSS鼠标形状参数表：

cursor:hand手

cursor:crosshair十字形

cursor:text" 文本形

cursor:wait沙漏形

cursor:move"十字箭头形：

cursor:help问号形

cursor:e-resize右箭头形

cursor:n-resize上箭头形

cursor:nw-resize左上箭头形

cursor:w-resize左箭头形

cursor:s-resize下箭头形

cursor:se-resize右下箭头形

cursor:sw-resize"左下箭头形

4.Float常跟属性值left、right、none

Float:none 不使用浮动

Float:left 靠左浮动

Float:right 靠右浮动

清除浮动：clear:none|left|right|both

5.margin延伸（单独设置四边间距属性单词）
简写写法：margin：上右下左（四个值） margin-left 对象左边外延边距 margin-left:80px; 左边外延距离80 margin-right 对象右边外延边距 margin-right:80px; 右边外延距离80 margin-top 对象上边外延边距 margin-top:80px; 上边外延距离80px
margin-bottom 对象下边外延边距 margin-bottom:80px; 下边外延距离80px

6.padding内补白(内边距)left right top bottom

padding-top:10px; /上边框留空白/

padding-right:10px; /右边框留空白/

padding-bottom:10px; /下边框留空白/

padding-left:10px; /左边框留空白/

7.position绝对定位absolute relative 固定 fixed 还有一个z-index

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。此时对象不具有边距，但仍有补白和边框

relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

fixed left，right，top，bottom 对象固定一个位置

Z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性

div{z-index:10}
注意：z-index的数值不跟单位。不用加上px.

z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。就显示谁。如果二个div一起重叠，这个时候设置你想看到的div,那就可以把那个div的z-index设置大一点，这样就可以覆盖之前那个。

8.字体属性

1.color：加上颜色

2.font-size:20px;/每个浏览器默认的字体不一样的谷歌的默认字体大小是16或者18/

x-small:较小

small:小x-small:较小

small:小xx-small:最小

medium:正常(默认值)

large:大

x-large:较大

xx-large:最大

2.font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

3.line-height: normal;(正常)

4.line-height：50px;/div的高度也是五十，这样你的内容结束平行居中/

5.font-weight: bold;(粗体) , lighter;(细体) normal;(正常)，设置数字也是可以的 (100px,200px)

6.font-variant: small-caps;(小型大写字母) normal;(正常)

7.text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

8.text-shadow：none：无阴影①：

第1个长度值用来设置对象的阴影水平偏移值。可以为负值②：

第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值：设置对象的阴影的颜色。

举例：p{text-shadow:3px 10px rgba(0,0,0,.3);}

9.ul里面的属性：默认是实心圆，下面的就可以更改。

list-style-type:none; /不编号/

list-style-type:decimal; /阿拉伯数字/

list-style-type:lower-roman; /小写罗马数字/

list-style-type:upper-roman; /大写罗马数字/

list-style-type:lower-alpha; /小写英文字母/

list-style-type:upper-alpha; /大写英文字母/

list-style-type:disc; /实心圆形符号/

list-style-type:circle; /空心圆形符号/

list-style-type:square; /实心方形符号/

list-style-image:url(/dot.gif); /图片式符号/

list-style-position: outside; /凸排/

list-style-position:inside; /缩进/

10.随便举例几种字体：

font-family:“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana

font-family: “Times New Roman”, Times, serif; font-size: 14px;

font-family:Arial,Helvetica,sans-serif;font-size:100%;

font-family:“微软雅黑”,“黑体”,“宋体”;

font-family:arial, sans-serif; font-size:12px;

区块

1.单词间距

1.word-spacing:

间隔距离

2.字母间距

letter-spacing:

字母间距

3.文本对齐

text-align:

参数的取值：

left：左对齐

right：右对齐

center：居中对齐

justify：相对左右对齐

4、垂直对齐

vertical-align:

参数

top：顶对齐

bottom：底对齐

text-top：相对文本顶对齐

text-bottom：相对文本底对齐

baseline：基准线对齐

middle：中心对齐

sub：以下标的形式显示

super：以上标的形式显示

5、文本缩进

text-indent: 缩进距离

12px相当于一个文字距离

6、空格

white-space:

参数

normal 正常

pre 保留

nowrap 不换行

7、显示样式

display:

参数

参数取值范围：

block：块级元素，在对象前后都换行

inline：在对象前后都不换行

list-item：在对象前后都换行，增加了项目符号

none：无显示

8.text-overflow超出范围显示…

text-overflow参数值和解释：
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…）

white-space:同一行内显示所有文本文字，让所有文字内容中一排显示不换行。

white-space: nowrap;

overflow:hidden;
text-overflow:ellipsis;

9.Overflow参数值解释：
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条，DIV默认情况也是这个值，但需要设置时候设置即可
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

第二部分：学了CSS的小总结

**
1.CSS属性的缩写

缩写的好处：

1、简化代码。一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节，加快网页下载速度和网页加载打开速度。

我们开发中，简写代码量是必要的。

如：font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:30px;

我们可以简写缩写为font:12px/22px bold Arial, Helvetica, sans-serif;

前面说的margin，padding，都可以简写。我就不全部写出来了

2.div和span的区别：

二者都是用来划分区间的。它们差别就在于div是块级元素,不会其他元素在同一行;span是内联元素，可以与其他元素位于同一行。

1.1：span标签是不能改大小的。span占用的是内容有多宽就占用多宽的空间距离，如果你把span标签的大小想改掉就必须把它变成块级元素。display:inline-block;

块级元素有：div p form ul ol li …

行内元素有：span img a…

3.盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content）。

插入链接与图片

文档参考: https://www.cnblogs.com/LCH-M/p/8214658.html.

CSS发展历程基本属性相关推荐

JAVASCRIPT发展历程
JAVASCRIPT发展历程诞生 JavaScript 因为互联网而生,紧跟着浏览器的出现而问世.回顾它的历史,就要从浏览器的历史讲起. 1990年底,欧洲核能研究组织(CERN)科学家 Tim B ...
【华为云技术分享】一文带你了解Web前端发展历程
摘要:自互联网行业发展以来,web前端不断发展变化着.在前人的基础上,后人有幸能够站在前人的肩膀上行走.前端的发展变化不仅是继承式的迭代,同时也是不断的变革和创造. 一.前端到底是个什么? 简单点说, ...
WEB的发展历程、Tomcat服务器、与HTTP协议
1 web的发展历程 C/S和B/S都是软件架构的两种不同的表现形式: C/S架构:Client/Server:客户端和服务端的架构.该软件运行在电脑桌面:比如,QQ,FeiQ,POS机/火车站买票. ...
如何向小白讲述软件架构发展历程？
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 作者简介:kimmking,关注于互联网电商,金融,支付等系统领域,10多年研发管理和架构经 ...
MVC5发展历程，从MVC2谈起
目前,MVC已经发布了5个版本,不包括一些临时的版本,为了更好的了解MVC5,知道MVC的发展历程是非常重要的.本篇随笔主要讲解3个版本的内容及其新特性. 1.MVC 2,发布日期:2010年3月部 ...
软件架构发展历程分享
本文来自作者 kimmking 在 GitChat 上分享「软件架构发展历程分享」,「阅读原文」查看交流实录. 编辑 | 哈比什么是架构计算机科学和程序设计的飞速发展,使得软件设计应用到从航空航 ...
HTTP 笔记发展历程缓存
菜鸟教程参考笔记发展历程蛋老师视频 HTTP1.1 特点:一次一份,默认持久链接(keep-alive),管线化技术存在的问题: http 队头阻塞浏览器限制连接数管线化技术要求有序传递 ...
一文带你了解Web前端发展历程
摘要:自互联网行业发展以来,web前端不断发展变化着.在前人的基础上,后人有幸能够站在前人的肩膀上行走.前端的发展变化不仅是继承式的迭代,同时也是不断的变革和创造. 一.前端到底是个什么? 简单点说, ...
Web开发技术十年发展历程
回顾web开发技术这十年发展历程: Ajax 03年的时候我上六年级,那时候网吧刚在小县城的角落萌生.传奇,大话西游第一代网游一时风靡.我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的 ...

CSS发展历程基本属性