前端HTML初学-css，五种选择器，图像，表单

1.小于号，等等符号不可以直接显示，必须通过参考字符显示，参考字符以&开始，以;结束。例如：1

2.对于初学者来讲，用viual studio code就是很好用的编辑器。

3.在标题中h1是最大的标题，h6是最小的标题。

4.align用于设置段落的对其格式，但是学习了CSS之后应该避免使用align。

5.字体设置属于显示效果的实现，应当使用CSS。常用的物理字符样式有（黑色）,斜体样式，下划线标记。

样式定义的语法：

h1{text-align:center;font-family:"黑体";}

font-family用于规定元素的字体序列。

五种选择器

1.HTML标记符选择器

2.id选择器

3.class类选择器

4.虚类选择器

5.分组选择器

第一种HTML标记符选择器

//名称
body{
//背景颜色
    background-color = #FOFOFO;
//左边距
    margin-left = 8em;
//右边距
    margin-right = 8em;
//上边距
    margin-top = 3em;
//下边距
    margin-bottom = 3em;
}

解释：em的含义是：em是一个相对单位，大小相对于字体本身而言。比如：

的大小被设置为20px，那么8em即为160px。

分组选择器

body,td,th{
    font-size = 14px;
    color:#343434;
}

id选择器

//名称
#container{
//宽度
    width:14px;
//边缘
    margin:0 auto;
    border:1px soild #000000;
}

解释：margin是一个复合属性，同时设置元素的上下左右四个方向的外边距。（例如第一段代码）0表示上下边距为0，auto表示左右边距自动调整。

这个第三种id选择器与前面两个不同的地方在于在名称的前面加上了#

class选择器

.style{
    font-weight = bold;
    font-size = 14px;
    font-family = "楷体_GB2312";
}

class选择器的特点：在名称前面有个.（点）。

font-weight属性描述的是字体的粗细程度2，取值有两种方式：关键字取值以及数字取值。

关键字取值：四种：normal,bold,bolder,lighter。normal就是正常字体，相对于数字取值就是400.bold为粗体字，对应数字700。bolder是比父元素的字体更粗，lighter是比父元素的字体更细。数字取值的范围是100-900，而且必须是100的整数倍。数字越大，字体越粗。

虚类选择器

a:link{
    text-decoration:underline;
    color:#00CC00;
}

这五类选择器的主要区别在于名称前面的修饰不同。

CSS三种基本属性

1.颜色与背景属性

color,background-color,background-image(url(URL)),background-attachment(scroll/fixed),background-repeat(no-repeat/repeat),background-position(x,y),background.

其中background-attachment(scroll/fixed)表示背景图片是否随着元素移动还是固定。

background-position(x,y)的使用可以为关键字，比如left top,right top。还可以为百分比

background-position:20% 30%;

还可以是长度值

background-position:20px 30px;

字体属性font-family(取值为字体名称)，font-style(正常normal，italic斜体，oblique斜体)，font-weight（字体的粗细），font-size（字体大小）【绝对大小：large，small，medium】【相对大小larger，smaller】【数值：px,em,rem,in,cm】【百分比：（前提是要有一个父元素）20%】

文本属性

line-height表示行与行之间的间距，可以用em,200%,2来表示

text-align表示对其方式。其中left是左对齐，right是右对齐，center是居中对齐，justify是两端对齐（通过调整字之间的间距，使每行的宽度相同）

text-decoration字体的装饰效果。

text-decoration:none;

这个常用于去掉超链接的下划线。

除此之外，还有text-decoration:underline;用于在字体下方加下划线；overline上划线。

text-indent用于设置首行文本的缩进量。

CSS图像

常用的图像格式：GIF，JPEN，PNG。

GIF：无损压缩，最多256色，可以使用透明色，交错式GIF，动画GIF

JPEN：有损压缩，没有颜色限制，可以控制压缩比。

PNG：无损压缩，没有颜色限制，支持透明度。

在网页中插入图像：

IMG标记符。

src:插入图像的路径。

alt:用于对图像简单的文本说明。（当图片无法正常显示时即显示文本说明）

;

align属性用于设置对齐方式。

*hspace设置水平方向的空白。

*vspace设置垂直方向的空白。

*width和height属性设置图像的大小。

border设置图像的边框。

以上这些用法随着CSS的发展逐渐很少使用，了解即可。

表单与表格

为表格添加标题。标题会显示在表格上方，默认居中对齐。

学生信息表

表格的开头与结尾是：