HTML+CSS入门

<strong>加粗</strong>

<em>斜体</em>

<p>段落</p>

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

<q>引用别人的话，自加双引号</q>

<blockquote>带缩进引入大段文本</blockquote>

<br />换行，标准写法

&nbsp; 空格，注意最后的分号

<hr /> 横线，标准写法

<address>地址，斜体加单独换行</address>

<code>单行代码</code>

<pre>多行代码</pre>

<ul><li>新闻列表，无序</li></ul>

<ol><li>排行列表，有序</li></ol>

<div>切割块</div>

<div id="">id版块名称</div>

<tr>

<thead>列表头</thead>

<th></td>

<td>列表内容</td>

</tr>

table tr td,th{border:1px solid #000;}标签框

<table summary=""></table>summary表示摘要

<table><caption>列表标题</caption></table>

<a href="目标网址" title="鼠标滑过文本" target="_blank">链接文本</a>

<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法。">发送邮件</a>

<img src="图片地址" alt="下载失败时的替换文本" title="提示文本"></img>

<form method="传送方式" action="服务器文件">

<input type="" name="为文本框命名，以备后台程序ASP 、PHP使用。" value="为文本输入框设置默认值。(一般起到提示作用)"/>

<textarea cols="50" rows="10">在这里输入内容...</textarea>

<input type="submit" value="确定"  name="submit" />

<input type="reset" value="重置"  name="reset" />

当 type="radio" 时，控件为单选框　　当 type="checkbox" 时，控件为复选框

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

<form action="save.php" method="post" >
    <label>爱好:</label>
    <select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>

<label for="控件id名称">

<style type="text/css">
span{
   color:red;
}
</style>

<link href="base.css" rel="stylesheet" type="text/css"/>

直接使用css中已有的标签如Body， span， blockquote

“选择器”指明了{}中的“样式”的作用对象

p{font-size:12px;line-height:1.6em;}

---

.类选择器名称{CSS样式代码;}

.setGreen{

color:green;

}

 

#id选择器，使用<id>

#setGreen{

color:green;

}

　　ID选择器只能在文档中使用一次

　　可以使用类选择器词列表方法为一个元素同时设置多个样式

子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素

.first>span{

　　border:1px, solid, red;

}

---

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

 * {color:red;font-size:20px}

---

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：　　a:hover{color:red;font-size:20px}鼠标滑过字体会变大。

---

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

.first, #second span{color:green;} 将class=”first“的标签设为绿色，将id="second"标签下的span设置为绿色。

---

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/
有些特殊的情况需要为某些样式设置具有最高权值,这时候我们可以使用!important来解决.

p{color:red!important;}

---

p span{font-weight:bold;}粗体

p a{font-style:italic;}斜体

p a{text-decoration:underline;}下划线

.oldPrice{text-decoration:line-through;}删除线

p{text-indent:2em;}段落排版--缩进,注意：2em的意思就是文字的2倍大小。

p{line-height:2em;}段落排版--行间距（行高）

h1{    word-spacing:20px;}段落排版--中文字间距、字母间距,只有有空格的地方才会起作用

h1{　　letter-spacing:20px;}所有字符都要隔开

div{text-align:center;}段落排版--对齐

---

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

a{display:block;}设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

---

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

---

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签

---