CSS基础

什么是css

• css 是层叠样式表，它可以用来修饰html元素，格式化元素

css规则构成

• css规则由两个部分组成，选择器以及一条或多条声明:

p {color:red;text-align:center;}

• p 是选择器
• color:red 是声明，声明又分为属性和值，属性：color，值：red
• text-align:center 是声明，属性：text-align，值：center

css分为行内样式和内嵌式和链接式

/* 这个是行内样式 */
<p style="font-size:24;color:pink;">这是一个段落标签</p>


/* 这个是内嵌式 */
#id {
   color: aqua;
   font-size: 400;
   font-weight: 400;
}
<div id="test">这个是内嵌样式</div>


<!-- 这个是链接式 -->
<link rel="stylesheet" href="./css/test.css">
<div class="test">这个是链接式</div>
/* css文件内容 */
.test {
    background: black;
    color: red;
}

多重样式优先级

• （内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

• 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

选择器优先级(从低到高)

• 通用选择器（*）
• 元素(类型)选择器
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式

class和id选择器

id选择器

• id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
• HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
• ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
• 以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;  // 文本格式居中
    color:red;
}

class选择器

• class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
• class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
• • 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
• 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}
<div class="center">使用class选择器</div>

链接样式

/* css样式 */

<style>
   a:link {color:#000000;}      /* 未访问链接*/
   a:visited {color:#00FF00;}  /* 已访问链接 */
   a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
   a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

盒子模型

• 所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
• 标准盒模型：宽度+左填充+右填充+左边框+右边框+左边距+右边距
• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

<!-- 250 像素的元素 -->
<div class="ex">这个是250px的元素</div>

<!-- css -->
.ex {
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

边框

• css中边框由border来确定
• 边框的样式

border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

背景

background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-color	规定要使用的背景颜色。
background-position	规定背景图像的位置。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-origin	规定背景图片的定位区域。
background-clip	规定背景的绘制区域。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-image	规定要使用的背景图像。

background-repeat的属性	值
repeat 默认。	背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-position的属性	值
inherit	规定应该从父元素继承 background 属性的设置。
left top
left center
left bottom
right top
right center	全部都是第一个值是水平位置，第二个值是垂直。
right bottom
center top
center center
center bottom

• 简写
  background: url(images/bg.gif) no-repeat top right

• 背景图片的滚动
  背景图片是否随着内容的滚动而滚动由background-attachment设置

• background-attachment:fixed; 固定，不随内容的滚动而滚动

• background-attachment:scroll; 滚动，随内容的滚动而滚动

margin和padding

margin

• margin(外边距)属性定义元素周围的空间。
• margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
• margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
• auto 设置浏览器边距，这样做的结果会依赖于浏览器。
• length 定义一个固定的margin（使用像素，pt，em等）
• % 定义一个使用百分比的边距

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px

margin:25px 50px;
上下边距为25px
左右边距为50px

margin:25px;
所有的4个边距都是25px
遵循上右下左的顺序

• 其他属性

margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

padding

• padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
• length 定义一个固定的填充(像素, pt, em,等)
• % 使用百分比值定义一个填充
• 当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度

padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;
上下填充为25px
左右填充为50px

padding:25px;
所有的填充都是25px
和margin属性一样，都遵循上右下左的顺序

float 脱离文档流浮动

• CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。往往是用于图像，但它在布局时一样非常有用。
• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

清除浮动

• 清除浮动 - 使用 clear
• 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;   // 外边距上右下左都是5px
}
.text_line
{
	clear:both;
	margin-bottom:2px;  // 底外边距是2px
}

属性：clear
指定不允许元素周围有浮动元素。	
值：
left   // 清除左浮动
right  // 清除右浮动
both   // 清除全部浮动
none   // 不改变
属性：float	
指定一个盒子（元素）是否可以浮动。	
left   // 向左浮动
right  // 向右浮动
none   // 不改变

块级元素、行内元素

• 块级元素：

  • 他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；
    块级元素可以设置width、height属性；
    块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

• 行内元素：

  • 行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
    行内元素的width、height属性则无效；
    行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

• 行内元素转换

  • display:none; 不显示
    display:block;变成块级元素
    display:inline; 变成行内元素
    display:inline-block;以块级元素样式展示，以行级元素样式排列

• 块级元素

address 地址
center 举中对齐块
div- 常用块级容易
dl 定义列表
form 交互表单 （只能用来容纳其它块元素）
h标签
hr 水平分隔线
ol 无需列表
ul有序列表
p 段落
pre 格式化文本

• 行内元素

a - 锚点
b - 粗体(不推荐)
br- 换行
code - 计算机代码(在引用源码的时候需要)
em - 强调
i - 斜体
img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）
当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体强调
textarea - 多行文本输入框