CSS基础

内嵌式排版样本：
内嵌式排版中所有的样式定义都必须在<style>..</style>之间，而<style>..</style>又必须在<head>..</head>之间。
其功能又分为三种：
1、标记定义型格式：
<head>
<style type="text/css">
标记名称{属性1；属性2；属性3；}
标记名称{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称>...</标记名称>
</body>

2、class定义型格式：
<head>
<style type="text/css">
.定义名称{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称 class"定义名称">...</标记名称>
</body>

class定义型分组格式：
<head>
<style type="text/css">
.定义名称，.定义名称1{属性1；属性2；属性3；}
.定义名称{属性1；属性2；属性3；}
.定义名称1{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称 class"定义名称">...</标记名称>
<标记名称 class"定义名称1">...</标记名称>
</body>

3、id定义型格式：
<head>
<style> <style type="text/css">
#定义名称{属性1；属性2；属性3；}
#定义名称{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称 id="定义名称">...</标记名称>
</body>

外部排版样式定义：
独立的样式排版：
标记名称{属性1；属性2；属性3；}
.定义名称{属性1；属性2；属性3；}

在<head>...</head>之间使用<link>格式：

在<head>...</head>之间使用inport格式：
<head>
<style type="text/css">
@inport "定义的文件名.css"
</style>
</head>

并集选择器用“逗号”进行分隔；交集选择器用“.”进行分隔；后代选择器用“空格”进行分隔

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 并集选择器 */
div,.test2,#test3,span {
font-size: 16px;
font-weight: 400;
color: red;
}
</style>
</head>
<body>
<div>测试数据1</div>
<p class="test2">测试数据2</p>
<h1 id="test3">测试数据3</h1>
<span>测试数据4</span>
</body>
</html>

设置元素内容的字体：

（1）字体的名称：font-family属性定义文字使用的字体的名称

（2）设置字体倾斜程度：font-style属性描述字体的倾斜程度，可选的属性值包括normal、small-oblique

(3)设置字体的变体：font-variant属性的用于设置字体的变体形式，可选属性值包括normal和samll-caps

(4)设置字体的字重：font-weight:

(5)字体的大小：font-size：

font顺序应该按照font-style;font-variant; font-weight; font-size;font-family

设置元素的文本属性

（1）设置文本首行缩进：text-indent:1em

(2)设置文本对齐方式：text-align:left(right,center)

text-align:justity;两端对齐（只对英文有用）

(3)设置文本的修饰：text-decoration:none(underline下划线，overline上划线，line-through删除线）

(4)设置行高：line-height:数字，百分比

（5）设置间距：word-spacing:1em——单词与单词之间的距离（针对英文有效）

letter-spacing:1em——文字与文字之间的距离（针对中文有效）

（6）英文大小写的转换：text-transform:capitalize 单词首字母大写

uppercase:全部字母大写

lowercase:全部字母小写

盒子的概念：在css中，一个独立的盒子模型内容、边框、内边距和外边距4个部分构成。

内边距：padding-top (left, right, bottoom):10px;

外边距：margin-top (left, right, bottoom):10px;

<span>行元素的宽度和高度是无效的，padding的垂直方向是无效的，水平方向有效，margin没有重叠的效果，水平方向是有效的

margin的的垂直方向会重叠，margin会取最大的值，水平方向是有效的

元素的浮动;

使用了float属性后，浮动的元素从文档正常流中脱离出来，同时对布局中的元素造成一定的影响

列：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
div{

1000px;
height:1952px;
border:1px solid #bb8755;
background:url("././././images/border[1].jpg");

}
.hd1{
960px;
height:1902px;
background:url("././././images/container_bg[1].jpg");
border:none;
margin-left:40px;
margin-top:35px;
}
.bk{
342px;
height:1724px;
border:1px solid red;
margin-left:137px;
margin-top:179px;
}
</style>
</head>
<body>

<div>
<div class="hd1">
<div>
<p class="bk">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>
</div>
</div>
</div>
</body>
</html>