CSS基础

CSS基础

样式，让页面变得更加好看

1、CSS语法

选择器{属性:值;}

2、CSS创建方式

方式一：

①创建一个独立的css文件，后缀名为.css
②创建一个独立的html文件，后缀名为.html
③让两者进行关联，在html页面的head标签中添加

<link rel="stylesheet" type="text/css" href="文件地址">

3、选择器

选中指定的元素（标签 标记）

三大基本选择器：

类型选择器（标签选择器）：div span a img…

类选择器（class选择器）：

①给标签添加属性<标签 class="name"></标签>
②作为选择器使用：.name{}
【注】①在同一个页面中可以多次出现相同的class值
   ②在同一个class属性中可以有多个值
   ③class具有重用性，通常用来写样式

id选择器

①给标签添加属性<标签 id="name"></标签>
②作为选择器使用：#name{}
【注】①在同一个页面中只有一个相同的id值
   ②在同一个id中，只有一个值
   ③id具有唯一性，通常不用来写样式

4、浮动

让原本竖着排列的元素横着排列

float：属性值;

left：左浮动
right：右浮动
none：不浮动

影响：脱离文档流
文档流：就是一种排列方式，从上至下，从左到右的排列方式。

**注意：**子元素浮动，会导致没有设置高度的父元素坍缩，因此解决方法有：①给父元素设置高度。②在子元素的最后加上clear:both，如：

<div>
	<div style="float:left;">111</div>
	<div style="float:left;">111</div>
	<div style="clear:both;"></div><!--清除浮动-->
</div>

5、盒模型

内容区：width height
内边距区域：padding
边框区域：border
外边距区域：margin

padding：内边距
【注】①会撑大元素的大小②不能为负数

padding-left：左内边距
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距

margin：外边距
【注】①不会撑大元素的大小②可以为负数

margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距

6、背景相关属性

background：背景相关属性
background-color：背景颜色；
background-image:url("图片地址");
【注】背景图不占位，需要依托于其他标签，默认重复
background-repeat:repeat; 重复（默认）
background-repeat:repeat-x; 水平方向重复
background-repeat:repeat-y;垂直方向重复
background-repeat:no-repeat;不重复
background-position:10px 20px;将图片定位向右移动10px，向下移动20px