CSS

一、CSS概述
1、什么是CSS
CSS：层叠样式表，是用于美化、渲染网页的一门语言
和传统的html标签属性设置样式相比，使用CSS设置样式可以实现：将展示数据的html代码和设置样式的CSS代码进行分离，可以增强网页的展示能力。

2、如何在html中引入CSS
2.1.在标签上的style属性内部添加css样式
<div style="border:2px solid #FF0000;font-size:26px;background:pink;">
这是一个div...
</div>
这种方式是将css样式直接写在标签上的style属性内部,只对当前标签有效,无法实现代码的复用,而且容易造成页面结构的混乱,不利于后期的扩展和维护。所以不建议大量使用。

2.2.在head标签内的style标签内部添加css样式
这种方式是将所有的css样式在一个style标签内部统一管理,没有将css代码写在标签上,因此不会造成页面结构的混乱,而且可以实现代码的复用

2.3.通过link标签引入外部的css文件

<!-- 引入外部的demo.css文件 -->
<link rel="stylesheet" href="demo.css"/>

这种方式是将所有的css代码写在一个css文件中统一管理,真正的实现了: 将html代码和CSS代码进行分离。可以实现代码的复用，也不会造成页面结构的混乱。
推荐使用这种方式(特别是在企业开发中)

二、CSS常用选择器
所谓的选择器,就是可以帮我们在html中选中元素进行修饰的一门技术
1、元素名/标签名选择器
通过元素的名字或者标签的名字选中指定名称的所有标签
格式: 元素名/标签名{ css样式.. }
span{} -- 选中所有的span元素
div{} -- 选中所有的div元素

2、class类选择器
可以在标签上添加一个通用的属性--class,为元素设置所属的分组,class值相同的则为一组, 通过class值可以选中这一组的元素。
格式: .class值{ css样式.. }
.s1{} -- 选中所有class值为s1的元素

<div class="s1"></div>
<span class="s1"></span>
<span class="s1"></span>
<span class="s1"></span>

另外，一个元素可以同时设置多个class值，例如：
<span class="s1 s2 s3">span111</span>
表示当前这个span元素同时属于s1分组和s2分组，如果s1和s2给这个span设置背景（但值不同），最终写在后面的会覆盖前面的（针对同一类选择器）。

如果是不同类的选择器，例如：使用元素名、类选择器、id选择器选中同一个元素，设置相同的属性，但值不同，优先级顺序是：
id选择器(100)>类选择器(10)>元素名选择器(1)

3、id选择器
在标签上可以添加一个通用的属性--id,id是编号,要求在整个网页中是独一无二的。通过id值，可以唯一的选中一个元素。
格式：#id值{ css样式.. }
#p1{}选中id值为p1的元素
#one{} 选中id值为one的元素

4、后代选择器
在父选择器选中的元素内部,选中指定的后代元素
格式: 父选择器 后代选择器{ css样式... }
div span{} -- 选中所有div内部的span元素
#d1 p{} -- 选中id值为d1元素内部的p元素

5、属性选择器
可以通过元素的属性或属性值匹配元素
格式: 选择器[属性条件][属性条件]..{ css样式 }
input[type="text"]{} -- 选中所有的文本输入框
input[type="password"]{} -- 选中所有的密码输入框
input[type="checkbox"]{} -- 选中所有的复选框
div[id]{} -- 选中所有具有id属性的div元素

三、CSS常用属性总结
1、文本、字体相关属性

text-align：设置元素内文本水平排列方式
    left（居左,默认）、center（居中）、right（居右）
text-indent：设置文本首行缩进，百分比或像素值
    
text-shadow：设置字体阴影

letter-spacing：设置字符间隔/间距

font-siz：设置字体大小
font-weight：设置字体粗细，
    100~900，bold，bolder，normal
font-family：设置字体，"微软雅黑","宋体","楷体"等
color：设置字体颜色

2、背景相关属性

background是一个综合属性,可以同时设置背景颜色/背景图片/背景图片是否重复/背景图片的位置等
background-color: 设置背景颜色
background-image: 设置背景图片
background-repeat: 设置背景图片是否以及如何重复排列
backgronnd-position: 设置背景图片的位置
backgournd-size: 设置背景图片的大小

3、边框属性

border: 2px solid red; -- 同时设置边框的宽度、样式、颜色
border-width: 2px;
border-style: solid; double(双线) dotted(点状线) dashed(虚线)
border-color: red;

border-radius: 设置圆角边框

4、其他属性

width: 设置元素的宽度
height: 设置元素的高度
block:块级元素(div/p/h1~h6/form/table等)可以设置宽高
inline:行内元素(span/b/i/u等)无法设置宽高,即使设置了也不起作用
inline-block:行内块元素,既具备行内元素的特点(可以和其他行内元素或行内块元素显示在同一行)也具备块级元素的特点(可以设置宽高)
--------------------------------
margin: 设置元素的外边距
margin-top: 设置元素的上外边距
margin-left: 设置元素的左外边距
margin-right: 设置元素的右外边距
margin-bottom: 设置元素的下外边距

margin: 10px 20px 30px 40px; /* 上 右 下 左 */
margin: 10px 20px 30px; /* 上 左右 下 */
margin: 10px 20px; /* 上下 左右 */
margin: 10px; /* 上下左右 */
--------------------------------

5、补充内容：颜色取值方式

方式一: 使用颜色的名称(英文单词)
    red green blue black yellow pink
    
方式二: #六位十六进制数(AABBCC==ABC)
    #FF0000 #00FF00 #0000FF #000000 #FFFF00 #FFFFFF

    #F00    #0F0    #00F    #000    #FF0    #FFF

方式三: rgb(255,255,255)
    rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)