CSS入门--CSS基础&CSS常用样式

CSS是什么？

CSS全称叫层叠样式表，是一种对网页的显示方法进行规范、美化的技术，如果把网页比喻成一个毛胚房，那CSS就是装修，把网页这个毛胚房装修的更漂亮、更整洁，对整个房间进行合理的规划，这就是CSS。

CSS的使用方法有3种：

1. 外部样式表：
   • 如可以新建一个CSS文件，设置各种属性，在页面内通过<link rel="stylesheet" type="text/css" href="css文件路径">进行引用。
   • 以上是其他一种方式，还有使用div等其他方式进行引用的方法
2. 内部样式表：
   1. 在页面内通过<style> css的属性设置 </style> 这种形式进行设置
3. 行内样式表：
   1. 如<p style="css属性设置 "></p>

现在实际开发中使用的最多的是第一种方式，这是为了统一样式风格，也是为了更好的更新迭代做准备。

CSS的选择器：

选择器是什么？选择器就是CSS要应用在哪些元素上面，比如<p>标签，把<p>标签作为选择器就是把CSS的效果应用到所有p标签定义的内容之上。那CSS常用的选择器有哪些呢？

1. 标签选择器：以html的标签为标准的选择器，定义此选择器，可以把CSS效果应用到html标签包容的内容中。
   1. CSS定义示例：p{ font-size:20px;}
2. 类选择器：可以将某一html元素自定义一个class（类名），如<p class="text"></p>\
   1. CSS定义示例：#class{font-size:20px}
3. 伪类选择器：
4. 伪元素选择器：
5. 其他选择器：

其中的第3、4、5项选择器在单独的章节介绍

CSS常用样式：

样式是指的定义CSS的各种属性特点，如颜色、尺寸等，那CSS常用样式有哪些呢？

1. 文本样式：
   1. color：设置文本颜色，值可以以英文单词、16进制数、rgb函数3种方式设置，如：red、#ff0000、rgb（255， 0，0）等形式
   2. direction：设置文本的显示方向（对阿拉伯字母有效），值为ltr、rtl，分别代表从左到右、从右到左显示
   3. letter-spacing：设置文本间距，以px（像素）为单位，可以为负值
   4. line-height：设置文本高度，以px（像素）为单位
   5. text-align：设置文本的对齐方式，值为left、center、right、justify等，分别代表左、中、右、两端对齐
   6. text-decoration：设置文本的下划线修饰，值为none、underline、overline、line-through，分别代表 无下划线、下划线、上划线、中划线
   7. text-shadow：设置文本的阴影效果，共4个参数，分别为阴影的横向偏移、竖向偏移、模糊程度、颜色。如：text-shadow:5px 5px 5px red;
   8. text-transform：设置英文字符的大小写转换，值为none、capitalize、uppercase、lowercase，分别代表 无改变、首字母大写、所有字母大写、所有字母小写
   9. text-indent：设置文本的段落缩进格式，值的单位可以为px或em，px代表像素、em代表当前的文本字符数。如： text-indent: 50px; text-indent:2em;
2. 字体样式：
   1. font-size：设置字体的尺寸大小，值以px为单位
   2. font-family：设置使用哪种字体，值为宋体、仿宋、隶书等字体属性
   3. font-style：设置字体的斜体样式，值为normal、italic、oblique，分别代表正常、斜体字、文字倾斜。italic可以使大部分设置过斜体字的文字进行斜体字的显示，有部分无效果，oblique可以使所有的文字产生倾斜的效果，达到斜体字的显示效果。但在实际开发中更多的会使用italic设置斜体字效果
   4. font-weight：设置字体的粗细，值为100-900、normal、bold，100-900代表字体的粗细程度，但是这个设置在很多的浏览器上不支持，所以现在大部分是用normal、bold来设置，分别代表 正常、加粗
3. 列表样式：
   1. list-style-type：设置以哪种图标做为列表的显示标示，值为none、disc、circle、square、decimal等，分别代表默认、实心圆、空心圆、方块、数字等，如 list-style-type:square;
   2. list-style-position：设置列表的定位方式，值有inside、outside两种，分别代表向内部靠近、向外部靠近
   3. list-style-image：以图片的形式代替图标作为列表的显示标示，当设置了此项，list-style-type设置的内容自动失效，形式为： list-style-image:url("图片路径");
   4. list-style：同时设置以上3个部分的内容，因为第3项会覆盖第1项，也可以单独设置第2、3项。示例 list-style: inside url("图片路径");