CSS_1_引入、选择器、常用样式

css是指层叠样式表，依赖于HTML存在，作用：给网页进行样式开发，给网页进行布局。

注释格式：/*注释*/

 

---

一、使用过程：

　　1、声明css代码域

　　2、使用选择器选择要添加样式的标签

　　3、书写样式单

---

二、声明方式：

　　1、在head标签中使用style标签声明：一般为某类标签的公共样式。

<style type="text/css">
    css代码        
</style>

　　2、在标签上使用style属性进行声明：一般为给某个标签进行样式设置。

<!--例子-->
<div style="background-color: blue;width: 100px;height: 100px;"></div>

　　3、在head标签中使用link标签引入外部声明的css文件：一次声明，随处使用。

<link rel="stylesheet" type="text/css" href="css文件位置">

---

三、常用选择器：

　　1、标签选择器：

　　　　　　标签名{样式名1：样式值1；...}

　　　　　　本页面所有的此标签使用此样式

　　2、id选择器：（id唯一）

　　　　　　#标签的id值{样式名1：样式值1；...}

　　　　　　给指定id的标签设置样式。

　　3、类选择器：（class不唯一）

　　　　　　.标签的class值{样式名1：样式值1；...}

　　　　　　给所有class值为指定值的标签设置样式。

　　4、全部选择器：

　　　　　　*{样式名1：样式值1；...}

　　　　　　给页面的所有标签使用此样式

　　5、组合选择器：

　　　　　　标签名，#标签的id值，....{样式名1：样式值1；...}

　　　　　　解决不同选择器之间重复的问题。

　　6、子标签选择器：

　　　　　　选择器1 子标签{样式名1：样式值1；...}

　　　　　　给子标签设置样式。

　　7、属性选择器：

　　　　　　标签名[属性名=属性值]{样式名1：样式值1；...}

　　　　　　给具有指定属性值的标签设置样式。

　　8、伪类选择器：

　　　　　　其它选择器名：伪类选择器名{样式名1：样式值1；...}

　　　　　　为其它选择器添加一些事件。

---

四、常用样式单：

　　标签居中：

　　　　　　margin: 20px auto;

　　标签内文本居中：

　　　　　　text-align: center;

　　边框：

　　　　　　border：solid 1px，设置边框线，solid为实线，dashed为虚线。

　　边框圆角：

　　　　　　border-radius: 15px;

　　倾斜度：

　　　　　　transform:rotate(-10deg)，逆时针旋转10。

　　显示级别：

　　　　　　z-index，使用数字来确定同一个层次上的标签显示优先级，数字越大，级别越高。

　　字体：

　　　　　　font-size:10px，设置字体大小。

　　　　　　font-family:"黑体"，设置字体。

　　　　　　font-weight:bold，字体加粗。

　　颜色：color，设置颜色。

　　背景颜色：background-color：颜色。

　　背景图片：

　　　　　　background-image：url（图片的url）。

　　　　　　background-repeat：no-repeat，设置图片不重复。

　　　　　　background-size：cover，图片平铺整个页面。

　　浮动：float：left|right

　　行高：line-height:10