2.CSS学习笔记

CSS笔记

1.CSS基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

eg：

selector {
	declaration1;
	declaration2;
	 ... 
	declarationN 
	}

---

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。属性和值被冒号分开。
eg：

h1 {
	color:red;
	font-size:14px;
	}
ps:html中大小距离的单位为px(像素)

ps：如果值为若干单词，则要给值加引号
p {font-family: "sans serif";}

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

---

2.CSS选择器

id选择器一般用于js，class一般用于css。

class常用命名方式为top，left，top_left…

id常用命名方式为 实际使用名，比如说，做计算器就命名calculator

---

1.id选择器

id 选择器以 #来定义。

eg:

<!--在html中定义id-->
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

<!--CSS中-->
#red {color:red;}
#green {color:green;}

ps:id 属性只能在每个 HTML 文档中出现一次。

---

在现代布局中，id 选择器常常用于建立派生选择器。

eg:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
ps:上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

通过这种用法，即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

eg：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}
ps:在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

---

2.类选择器

在 CSS 中，类选择器以一个点号显示：

eg：

<!--在html中-->
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

<!--在CSS中-->
.center {text-align: center}

---

和 id 一样，class 也可被用作派生选择器：

.fancy td {
	color: #f60;
	background: #666;
	}
ps:在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：

td.fancy {
	color: #f60;
	background: #666;
	}
ps:类名为 fancy 的表格单元将是带有灰色背景的橙色
eg:<td class="fancy">

---

3.元素选择器

h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

---

4.通配符选择器

*
{
	margin : 0px;
	padding : 0px;
}

---

3.CSS创建

1.外部样式表

2.内部样式表

3.内联样式

​ ps：详细参考html最后一部分

---

4.CSS样式

1.背景

• 背景色 background-color

• 背景图像 background-image

p {background-color: gray;}
body {background-image: url(/i/eg_bg_04.gif);}
ps:如果需要设置一个背景图像，必须为这个属性设置一个 URL 值

---

2.文本位置

• 缩进文本 text-indent

ps：通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。这个属性最常见的用途是将段落的首行缩进。

• 水平对齐 text-align

ps：它会影响一个元素中的文本行互相之间的对齐方式。不影响元素。

p {text-indent: 5em;}
td{text-align:right;}
ps:
1.text-indent所用单位em(=14px)
2.text_align属性值left、right、center 

---

3.文本颜色

• color属性

---

4.字体

CSS 定义了 5 种通用字体（每种包含若干分支）系列：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

---

• 文本字体 font-family

h1 {font-family: Georgia, serif;}
ps:如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示。我们可以通过结合特定字体名和通用字体系列来解决这个问题。

---

• 字体风格 font-style

该属性有两个值：

• normal - 文本正常显示

• italic - 文本斜体显示

p.normal {font-style:normal;}
p.italic {font-style:italic;}

---

• 字体加粗 font-weight

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
ps:使用 bold 关键字可以将文本设置为粗体

---

• 字体大小 font-size

h1 {font-size:60px;}
p {font-size:14px;}

---

综合实例：

<span class = "sp">满船清梦压星河</span>

.sp
{
	/*文字颜色*/
	color : red ;
	/*文字大小*/
	font-size : 24px;
	/*文字字体*/
	font-family:楷体
	/*文字加粗*/
	font-weight:100;
	/*边框*/
	border：1px red solid；
	ps：可缺省，且无序
	/*边框圆角显示(半径)*/
	border-radius:clac(10px);
}

---

5.边框属性

• 边框 border 属性

• 表格的宽度和高度 width 和 height

table, th, td
  {
  border: 1px solid blue;
  }

table
  {
  width:100%;
  }
th
  {
  height:50px;
  }

---

6.表格内边距（内容与边框的距离）

td
  {
  padding:15px;
  }
ps:如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性

---

5.CSS盒模型★

1.概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距（padding）、边框(border) 和 外边距(margin) 的方式。

ps：元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距（padding)、边框(border)和外边距(margin)都是可选的，默认值是零。可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

---

width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

---

2.内边距

元素的内边距在边框和内容区之间。控制该区域的属性是 padding 。

eg：

h1 {padding: 10px 25px 3px 20%;} <!--上右下左(顺时针方向)-->
或者
h1 {
  padding-top: 10px;
  padding-right: 25px;
  padding-bottom: 2px;
  padding-left: 20%;
  }

---

3.边框

每个边框有 3 个方面：宽度、样式，以及颜色。

---

4.外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距使用 margin 属性

eg：

h1 {margin : 10px 0px 15px 5px;}<!--顺时针-->
或者
h1 {margin : 10px 15px;}<!--第一个表示上下，第二个表示左右-->
或者
h1 {margin : 10px auto;}<!--auto对上下无效，对水平的作用是水平居中-->
ps：一般是在margin中使用，padding中使用较少
或者(较少使用)
h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

ps:元素块垂直居中使用margin-top

---

6.定位★

1.相对定位

​ 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元 素“相对于”它的起点进行移动。

​ 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素 左边创建 30 像素的空间，也就是将元素向右移动。

​

eg:

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}
ps：相对于这个元素块原来的位置进行偏移，position的参数为relative

ps:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

---

2.绝对定位

​ 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者 是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成 一个块级框，而不论原来它在正常流中生成何种类型的框。

​

eg:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}
ps:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块

---

3.浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

---

在 CSS 中，我们通过 float 属性实现元素的浮动。

img
  {
  float:right;
  }

.父div的最后一个子divclassname
{
	clear:both;
}
父div没设置高度时，使用子div会造成父div高度塌陷，所以要清除浮动

---

4.固定定位

相对于浏览器的定位，position的属性为fixed。