html+css入门

标签：css布局   允许   target   play   multiple   使用   十六   pos   enter   

1html介绍

<meta>定义关于 HTML 文档的元信息。<link>定义文档与外部资源的关系。<style>定义文档的样式信息。<script>定义客户端脚本

2标签（1），代码语义化

<p></p>段落

<hx></hx>标题

<em></em>斜体强调

<strong></strong>粗体更强调

<span></span>设置单独样式

<q></q>短引用“”

<blockquote></blockquote>长引用，居中文本

<br/>回车

&nbsp;空格

<hr/>分割横线

<address></address>斜体地址

<code></code>贴入一行代码

<pre></pre>放入多行代码

3标签（2）

<ul>

<li></li>

</ul>排序，不分先后顺序

<ol>

<li></li>

</ol>排序，从1开始排序

<div></div>划分板块，逻辑独立分出来

<div id=”xxx”></div>给板块命名

<table summary=””>表格，表格简介介绍（不显示出来）

<caption></caption>表格标题

<tbody>表格分块，板块

<tr><th></th></tr>表格行/表格标头

<tr><td></td></tr>表格行/表格单元格

<tr><td></td></tr>

</tbody>

</table>

4标签（3）

<a href=”” title=””> </a>

<a name=”” title=””> </a>锚点

href

title

target=”_blank”

mailto:xx；aa？cc=xx&bcc=xx&subject=xx&body=xx

<img src =”” alt=”” title=””></img>

5使用表单标签，与用户交互

<form> method=”” acion=””</form>表单/方式postget/行为传送到比如save.php

<input type=”text” name=”myname”/>输入标签，文本框

<input type=”password” name=”pass/”>密码框password

type=”” 类型

text文本框

password密码框

submit提交按钮

reset重置按钮

radio单选框

type=”checked” checked=”默认值” 复选框和默认值设置

name=””文本框命名，为后台程序ASP、PHP使用

value=””为文本框设置默认值，为按钮文字

<testarea rows=”10” cols=”50”>在这里输入内容……</textarea>多行文本，rows行cols列

<select>下拉列表框

<option value=”xx” selected=”selected”>xx</option>设置默认 select=”select”，value向服务器提交的值

<option value=”cc” >cc</option>

</select>

<select multiple=”multiple”></select>下拉列表多选，复合multiple

<input type=”submit” vaue=”提交” name=”submit”>

<input type=”reset” value=”重置” name=”reset”>

<label for=”控件id名称”></label>注释，与id关联，for与id对应

6认识css

/**/

7嵌入式css

<style type=”text/css”>

p{ color : red };

</style>

<p style=”color:blue”></p>

<link href=”” rel=”stylesheet” type=”text/css”>

8选择器

.class多次，同时多个样式

{

color : red

};

…

<span class=”a”></span>

#id唯一，只能一个样式样式

{

color : red

};

…

<span id=”a”></span>

*{}

a:hover{}

9.继承

p{color:red;}具有

p{border:1px solid red;}不具体

10.排版

（文字排版——字体）font-family:"宋体",sans-serif;

（文字排版——字号）font-size:12px;color:#666

（文字排版——粗体）font-weight:bold

（文字排版——斜体）font-style:italic;

（文字排版—下划线）text-decoration:underline;

（文字排版—删除线）text-decoration:line-through

（段落排版——缩进）text-indent:2em;

（段落排版—行间距）line-height:2em;

（段落排版—字间距）letter-spacing:50px

（段落排版——对齐）text-align:center;

11.模型

块级元素<div>、 <p>、<h1>、<form>、<ul> 和 <li>

display:block;

内联元素<span>、<a>、<label>、<strong>、<em>

display:inline;

内联块状元素<img>、<input>

display:inline-block

盒子模型

盒子里padding内边距、盒子与盒子的margin外边距

盒子边框border

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{

border:2px solid red;

}

上面是 border 代码的缩写形式，可以分开写：

div{

border-width:2px;

border-style:solid;

border-color:red;

}

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用像素（px）。

现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

盒子填充padding

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

盒子边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

12.css布局模型

在网页中，元素有三种布局模型：

1、流动模型（Flow）（默认）

2、浮动模型 (Float)

3、层模型（Layer）

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

absolute和relative

#box3{

width:200px;

height:200px;

position:relative;

}

#box4{

position:absolute;

width:99%;

bottom:0px;

}

13.css代码缩写，减少带宽

（斜体）font-style:italic;

（文字参数）font-variant:small-caps;

（排版粗体）font-weight:bold;

（字号，颜色）font-size:12px;

（行高）line-height:1.6em;

（字体） font-family:"宋体",sans-serif;

body{

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.5em;

font-family:"宋体",sans-serif;

}

这么多行的代码其实可以缩写为一句：

body{

font:italic small-caps bold 12px/1.5em "宋体",sans-serif;

}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{

font:12px/1.5em "宋体",sans-serif;

}

只是有字号、行间距、中文字体、英文字体设置。

14.颜色值

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

1、英文命令颜色

前面几个小节中经常用到的就是这种设置方法：

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

配色表：

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}

span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

15.css样式设置的小技

html+css入门

标签：css布局   允许   target   play   multiple   使用   十六   pos   enter   

原文地址：https://www.cnblogs.com/qqfff/p/12244451.html