一文带你认识 CSS
1.什么是 CSS？
CSS 是什么呢？去一趟韩国你就知道了（一个梗，开玩笑）,它可以将一个漂亮的小姐姐整成美若天仙，沉鱼落雁，神采奕奕的神仙小姐姐，反正就是非常牛逼就是了。停，说错了，不是给小姐姐化，而是给我们的网页页面进行化妆。我们知道使用 HTML 写出来的页面，我们只能呵呵，太丑了，而 CSS 可以将页面优化的非常好看，具体有多好看，找一个你最喜欢的网页，就是那么好看。
换句话说，CSS 可以自由地设置网页的布局，只要你能想到的展示页面，都能做出来，如果做不出来，那做不出来咯。
正式点，CSS 即层叠样式表，CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2.CSS 基本知识
2.1 在 HTML 引入 CSS
内部样式
内联样式
外部样式
显示效果：
2.2 选择器
像上面我们使用内部或外部样式引用 CSS 代码时，那个大括号前面带的一个标签名就是一个选择器，这种选择器顾名思义，就叫做标签选择器。针对选择的这个标签，一个 html 里面所有带此标签的代码都会生效。
CSS 的选择器包括两类，一类是基础选择器，另一类是复合选择器。
基础选择器又包括标签选择器，类选择器，id 选择器，通配符选择器等。复合选择器包括后代选择器
类选择器可以随心所欲地选择想要的元素，前提得先为标签添加class属性，选择时需要使用.+class属性名来进行元素的选择。
id 选择器，可以根据标签的 id 属性来找到对应的元素，同一页面中 id 属性不能重复。
通配符选择器，直接使用*来直接选择页面上所有的元素。
演示：
这个可以用来设置页面的默认样式。
后代选择器，可以通过基础选择器组合找到某一元素的子元素或更后代的元素。
演示：
如果空格漏掉了就会去找元素标签为 ol 并且 class 值为 java 的元素。
子选择器，能够选择某个元素中的子元素，子元素后代元素不能被选择，这是和后代选择器的区别。
演示：
并集选择器，其实就是同时选择多个类型的元素。
选择器可以是基础的，也可以是复合的。演示：
伪类选择器，就是当遇到不同的事件时，有不同的格式反应，也就是添加一些过渡的样式，这方面 JS 做得更加丰富一点，比如鼠标触碰文字是一种样式，不触碰是另外的一种样式。如：hover 选择鼠标指针悬停上的元素 active 选择鼠标按下了但是未弹起的元素
鼠标悬停：
效果：
鼠标按住：
效果：
当然选择器还有很多很多，我们介绍了最常用的几个。当多个选择器选择同一个元素时，会进行属性的叠加，具体叠加规则就不细说了，因为我也不知道。
2.3CSS 属性
2.3.1 文本属性
文字的颜色与大小前面演示的时候有写，常用文本 CSS 属性如下：
color，表示字体颜色，可以使用常用颜色的英文或使用 rgb 或 rgba（比 rgb 多一维透明度）比例调色，十六进制也可以表示 rgb 的颜色。
font-size，表示字体大小，常用单位为
px。font-family，表示字体格式，比如宋体，楷体等。
font-weight，表示字体粗细，可以使用数字和常用英文单词设置。
font-style，表示字体样式，如倾斜，值为 italic 表示设置倾斜，值为 normal 表示取消倾斜，多用于取消倾斜。
text-align，表示文本对齐，left 左对齐，right 右对齐，center 居中对齐。
text-decoration，表示文本装饰，可以设置和取消下划线或删除线，值为 un 表示取消下划线和删除线，underline 表示下划线，line-through 表示删除线，overline 上划线。
对于字体的颜色标注，可以使用颜色的英文单词来表示，但是颜色种类受限，除了这个方案，我们更常用的是使用 rgb 色光三原色（红 绿 黄）来调制各种各样的颜色，理论上颜色种类是无限的，使用方法是设置 color 属性的值为 rgb(红色比例(0-255)，绿色比例(0-255)，黄色比例(0-255))比如红色就是 rgb(255,0,0)，或者使用十六进制来表示，每 4 位表示一种颜色的比例，比如红色格式为 #ff0000,可以缩写成 #f00。
2.3.2 文本格式
常用文本格式属性如下：
text-indent，表示段落缩进，单位为 px 或 em，em 表示自适应字符数，具体大小取决于文字大小，比如如果文字大小为 16px，则 1em=16px，文字大小为 8px，则 1em=8px，当 text-indent 为正值为正向缩进（向右边缩进），为负值为反向缩进（向左边缩进）。
line-height，行高就是文本顶线与顶线的距离，或者是中线到中线的距离，或者是底线到底线的距离，对上下两个方向有影响，并且相同，如果两行有不同的行高，实际行高值为两个行高值中最大的一个值，如果行高与元素高度相同，表示垂直居中。
2.3.3 背景属性
background-color，背景颜色，与设置字体颜色一样，可以使用英文单词，可以使用 rgb 和十六进制表示，还可以设置透明度，需要用到 rgba，如果属性的值为
transparent，则该元素的背景颜色会跟随父元素的背景颜色变化而变化。background-image，表示设置背景图片。
background-repeat，表示背景图片平铺效果。
background-position，表示背景图片出现的位置，值的格式为
横坐标 纵坐标，横坐标向右生长，纵坐标向下生长，除了使用坐标值表示位置，还可以使用百分数与常用的单词表示，如 center 表示居中，left 表示左对齐，bottom 表示下对齐，top 表示上对齐。background-size，表示背景图片的大小，格式为
宽度 高度单位为 px，还可以使用 contain（尽可能的充满背景，可能会露出背景色），cover（完全充满背景，不会露出背景色，auto（自动）等。
当行高与元素高度相同时，可以设置垂直居中的效果。
使用 background-image 属性添加背景图片，背景图片在背景颜色之上，并且默认情况下，如果背景图片较小，会自动平铺多张相同的背景图片填满元素区域，如果背景图片较大，会截取一部分填满元素区域。
可以使用 background-repeat 设置平铺与取消平铺效果。
使图片与文字处于元素中心位置。
效果图：
尽量让背景图填满元素区域与完全填满元素区域的区别。
2.3.4 设计圆角矩形与圆
border-radius，表示将元素的边框的四角设为弧形，当元素为正方形且 border-radius 的值与元素宽高一致时，表现为圆形。
border-top-left-radius，设置左上角的圆角。
border-top-right-radius，设置右上角的圆角。
border-bottom-left-radius，设置左下角的圆角。
border-bottom-left-radius，设置右下角的圆角。
没有经过处理的矩形边框：
使用 border-radius 属性后的矩形：
如果原来的元素区域是正方形，当 border-tadius 属性的值为该区域边长的一半时，可以生成圆形区域，border-tadius 属性的值为 50%也可以做到相同的效果。
分别对四个角处理也可以达到同样的效果。
2.3.5CSS 显示模式
显示模式有三种，分别为块级元素，行内元素和行内块元素。块级元素：独占一行，可以设置宽度高度等属性。行内元素：不独占一行，不可以设置宽度高度等属性。行内块元素：不独占一行，可以设置宽度高度等属性。
CSS 中可以通过 display 属性修改在显示模式，我们知道 a 标签是行内元素，因此修改宽高是无效的，并且不独占一行。
我们可以通过 display 修改样式。
行内元素修改为行内元素。
display 还可以隐藏元素，当 display 的值为 none 时，元素不被显示，但是可以通过开发者工具查看到该元素。
2.3.6 边距与边框
CSS 元素由外边距，边框，内边距，内容由外到里四部分组成。
margin，外边距大小。
border，边框，设置边框会撑大原有元素大小（不推荐，容易破坏格式）。
padding，内边距大小，边框与内容之间的距离，默认设置四周所有的内边距，如果需要单独设置可以通过 padding-left/right/bottom/top，border， margin 也是如此。
设置边框，边框属性的值分别为线粗细 颜色 线型，前面我们说过设置边框会改变原有元素的大小，不仅只有边框，内外边距也是如此，容易破坏页面的整体格式，我们可以通过设置 box-sizing 的值为border-box来改变这种特性，即使用边框不会撑大原有的元素。
设置内边距：
设置外边距：
当两个元素的外边距不同时，对于竖直方向元素的外边距会变为两者边距的最大值，这种现象也称为外边距塌陷，对于水平方向，最终外边距是两个元素的外边距之和。
元素水平居中：margin 可以设置，但是竖直方向居中不行。
2.3.7 弹性布局
默认情况下网页布局是从上到下的，但是实际生活中看到的网页水平布局到处都是，为了实现水平方向的布局，我们可以综合利用 CSS 的一些属性，来进行排版。
原始的垂直方向的布局：
设置 display 属性值为flex就能将原来向下生长的元素转变为向右生长，这样就可以在该元素上进行水平方向进行布局了，也可以说以在一行上进行布局，这就叫弹性布局。
对于水平方向，可以设置 justify-content 属性来决定水平方向的排列方式，start表示靠左排列，end表示靠右排列，center表示居中排列。
除了这些，还可以在水平方向对排列的元素进行有间隔的排列：
space-between，靠左右边界的有间隔均匀排列。
space-around，与左右边界有间隔对水平的元素进行均分排列。
space-evenly，与左右边界有间隔，且间隔比 space-around 要小一点，均分排列。
对于竖直方向，可以设置 align-items 属性，start顶端排列，end底端排列，cneter垂直居中排布。
3.CSS 案例：实现一个经典的布局案例
基本布局模型：
实现代码：
注意：代码中的字体“汉仪南宫体简”不是电脑默认自带的字体，建议替换为你电脑有安装的字体。
实际效果：
好了，CSS 的基本用法就介绍到这里了，下篇文章开始介绍 js。
版权声明: 本文为 InfoQ 作者【未见花闻】的原创文章。
原文链接:【http://xie.infoq.cn/article/23f706c682f755c56cb7b7632】。文章转载请联系作者。
还未添加个人签名 2021.11.15 加入
还未添加个人简介
评论