1.段落首行缩进 :p{text-indent:2em;}
2.字体:
大小:font-size:12px;
粗细:font-weight:normal(默认值)/bold(粗体)/bolder(更粗)/lighter(更细)/100-900(整百,400=normal、700=bold)/inherit(继承父辈)
样式:font-family:"宋体";
风格:font-style:normal(默认值)/italic(斜体)/oblique(倾斜)/inherit(继承父辈)
font-variant:small-caps;(把段落设置为小型大写字母字体)
缩写: 至少要指定 font-size 和 font-family 属性。其余可不写,若要写,写在前面。
font-size 与 line-height 中间要加入“/”
3.设置行高(行间距)为字体的130%:p{font-size:12px;line-height:130%(也可使用Xem)}
4.居中:非块状:text-align:center/left(居左—默认值)/right(居右)/justify(两端对齐文本)/inherit(继承父辈);也可内嵌class="txtCenter"
块状:margin:5px auto;(通过auto控制左右居中)/也可写成margin-left:auto; margin-right:auto;
5.插入图片::<img src="图片地址" alt="图像不可见时看见的文本" title = "鼠标滑过图片时显示的文本">
修改图片大小:img{width:100px;height:100px;}
6.插入链接:<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>(有target="_blank"则在新窗口打开链接,没有则直接跳转)
7.注释:<!--注释文字 --> /*注释语句*/
8.粗体:<strong>"爵士乐时代"</strong>
9.斜体:<em>尼克•卡拉威</em>
10.换行:<br/>
11.输入空格: (若直接输入空格,不管输入几个空格都只算一个)
12.分隔线:<hr/>
13.无序列表:<ul><li>我的第一个列表信息</li></ul>
14.有序列表:<ol><li>我的第一个列表信息</li></ol>
15.表格:<table summary="表格简介文本,可以没有">
<caption>标题文本</caption>
<tbody>
<tr>
<th>班级</th>
(th是首行标题内容)
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
(td表示表格内容,一行中包含几对<td>...</td>,说明一行中就有几列。)
<td>30</td>
<td>89</td>
</tr>
(表格的一行,所以有几对tr 表格就有几行。)
</tbody>
(当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。)
一个边框定义多个样式:border-style: solid dotted dashed double;(满足上右下左)
单边框设置:border-top(right/bottom/left)-style
边框宽度设置:border-width:5px(thin/medium/thick) 3px 15px 15px;(满足上右下左)也可写成border-top(right/bottom/left)-width
边框颜色:border-color:black;(满足上右下左)也可写成border-top(right/bottom/left)-color
17.文本框:<textarea rows="10" cols="30">我是一个文本框。 </textarea>
18.输入框:<input type="text(文本输入)/password(密码输入)" name="名称" placeholder="提示默认文本" >(一般用在表单form中)
19.选择框:<input type="radio(单选框——name必须相同)/checkbox(复选框)" value="提交到服务器的数据" name="为控件命名" checked="checked">(一般用在表单form中、当设置 checked="checked" 时,该选项被默认选中)
20.下拉框:<form action="save.php" method="post" >
【action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php);method : 数据传送的方式(get/post)】
<label>爱好:</label>
<select>(在<select>标签中设置multiple="multiple"可以实现多选)
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
(设置selected="selected"属性,则该选项就被默认选中。)
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
21.按钮:<input type="submit(提交)/reset(重置)" value="按钮上显示的文字" name="为控件命名" >
<button type="submit/reset/button" value="Submit">Like</button>
22.外部CSS样式使用:<link href="外部样式名字" rel="stylesheet" type="text/css" />(位置一般写在<head>标签之内。)
23.选择器:类选择器(.类选器名称)
ID选择器(#ID名称)
子选择器(.first>span——表示class="first"下的子元素span)
后代选择器(.first span——作用于所有子后代元素,子选择器只作用用儿子,后代作用包括儿孙等)
通用选择器(* {color:red;}——作用于所有标签)
伪类选择符:a:hover{color:red}(鼠标滑过时变红,不止可作用于a,还可作用于其他标签)
分组选择符:.first,#second span{color:green;}(多个标签元素设置同一个样式)
24.重要性:最重要的可以用important强调,使其不被覆盖。p{color:red!important;}
25.文本修饰:text-decoration:underline(下划线)/overline(文本上的一条线)/line-through(删除线)/blink(闪烁文本——IE、Chrome 或 Safari 不支持)/inherit(继承父辈)
26.字间距:文字间隔或者字母间隔:letter-spacing:2px;
单词之间的间距:word-spacing:5px;
27.设置为块状/内联元素:在style板块中:display:block(块状)/inline(内联)/inline-block(内联块状);
内联:不能设置长宽高,在同一行
块状:可以设置长宽高,在不同行
内联块状:可以设置长宽高,在同一行
28.元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
边界(外间距):margin 边框:border 填充(内间距):padding
四边均可单独设置
29.浮动模型:一般块状元素单独成行,浮动模型使其不单独成行。
float:left(从左开始放置)/right(右)/inherit(继承父辈)
2.字体:
大小:font-size:12px;
粗细:font-weight:normal(默认值)/bold(粗体)/bolder(更粗)/lighter(更细)/100-900(整百,400=normal、700=bold)/inherit(继承父辈)
样式:font-family:"宋体";
风格:font-style:normal(默认值)/italic(斜体)/oblique(倾斜)/inherit(继承父辈)
font-variant:small-caps;(把段落设置为小型大写字母字体)
缩写: 至少要指定 font-size 和 font-family 属性。其余可不写,若要写,写在前面。
font-size 与 line-height 中间要加入“/”
3.设置行高(行间距)为字体的130%:p{font-size:12px;line-height:130%(也可使用Xem)}
4.居中:非块状:text-align:center/left(居左—默认值)/right(居右)/justify(两端对齐文本)/inherit(继承父辈);也可内嵌class="txtCenter"
块状:margin:5px auto;(通过auto控制左右居中)/也可写成margin-left:auto; margin-right:auto;
5.插入图片::<img src="图片地址" alt="图像不可见时看见的文本" title = "鼠标滑过图片时显示的文本">
修改图片大小:img{width:100px;height:100px;}
6.插入链接:<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>(有target="_blank"则在新窗口打开链接,没有则直接跳转)
7.注释:<!--注释文字 --> /*注释语句*/
8.粗体:<strong>"爵士乐时代"</strong>
9.斜体:<em>尼克•卡拉威</em>
10.换行:<br/>
11.输入空格: (若直接输入空格,不管输入几个空格都只算一个)
12.分隔线:<hr/>
13.无序列表:<ul><li>我的第一个列表信息</li></ul>
14.有序列表:<ol><li>我的第一个列表信息</li></ol>
15.表格:<table summary="表格简介文本,可以没有">
<caption>标题文本</caption>
<tbody>
<tr>
<th>班级</th>
(th是首行标题内容)
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
(td表示表格内容,一行中包含几对<td>...</td>,说明一行中就有几列。)
<td>30</td>
<td>89</td>
</tr>
(表格的一行,所以有几对tr 表格就有几行。)
</tbody>
(当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。)
</table>
一个边框定义多个样式:border-style: solid dotted dashed double;(满足上右下左)
单边框设置:border-top(right/bottom/left)-style
边框宽度设置:border-width:5px(thin/medium/thick) 3px 15px 15px;(满足上右下左)也可写成border-top(right/bottom/left)-width
边框颜色:border-color:black;(满足上右下左)也可写成border-top(right/bottom/left)-color
17.文本框:<textarea rows="10" cols="30">我是一个文本框。 </textarea>
18.输入框:<input type="text(文本输入)/password(密码输入)" name="名称" placeholder="提示默认文本" >(一般用在表单form中)
19.选择框:<input type="radio(单选框——name必须相同)/checkbox(复选框)" value="提交到服务器的数据" name="为控件命名" checked="checked">(一般用在表单form中、当设置 checked="checked" 时,该选项被默认选中)
20.下拉框:<form action="save.php" method="post" >
【action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php);method : 数据传送的方式(get/post)】
<label>爱好:</label>
<select>(在<select>标签中设置multiple="multiple"可以实现多选)
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
(设置selected="selected"属性,则该选项就被默认选中。)
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
21.按钮:<input type="submit(提交)/reset(重置)" value="按钮上显示的文字" name="为控件命名" >
<button type="submit/reset/button" value="Submit">Like</button>
22.外部CSS样式使用:<link href="外部样式名字" rel="stylesheet" type="text/css" />(位置一般写在<head>标签之内。)
23.选择器:类选择器(.类选器名称)
ID选择器(#ID名称)
子选择器(.first>span——表示class="first"下的子元素span)
后代选择器(.first span——作用于所有子后代元素,子选择器只作用用儿子,后代作用包括儿孙等)
通用选择器(* {color:red;}——作用于所有标签)
伪类选择符:a:hover{color:red}(鼠标滑过时变红,不止可作用于a,还可作用于其他标签)
分组选择符:.first,#second span{color:green;}(多个标签元素设置同一个样式)
24.重要性:最重要的可以用important强调,使其不被覆盖。p{color:red!important;}
25.文本修饰:text-decoration:underline(下划线)/overline(文本上的一条线)/line-through(删除线)/blink(闪烁文本——IE、Chrome 或 Safari 不支持)/inherit(继承父辈)
26.字间距:文字间隔或者字母间隔:letter-spacing:2px;
单词之间的间距:word-spacing:5px;
27.设置为块状/内联元素:在style板块中:display:block(块状)/inline(内联)/inline-block(内联块状);
内联:不能设置长宽高,在同一行
块状:可以设置长宽高,在不同行
内联块状:可以设置长宽高,在同一行
28.元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
边界(外间距):margin 边框:border 填充(内间距):padding
四边均可单独设置
29.浮动模型:一般块状元素单独成行,浮动模型使其不单独成行。
float:left(从左开始放置)/right(右)/inherit(继承父辈)