阅读 58

初学HTML+CSS小结

一、 media属性:

元素中可使用media属性使其适用于指定设备的样式,如
<link href="mobile.css" media="screen and (max-device-width:500px)">
复制代码

在css中使用@media规则;

二、字体样式:

1.font-family:设置字体样式
2.font-size:设置字体大小
(1)通过px单位设置(常用);
(2)通过百分数设置(相对父元素字体大小);
(3)通过关键字,如xx-small,x-small,small,medium,large,x-large,xx-large;
3.color:设置文本颜色
4.font-weight:设置字体粗细
normal正常 / bold加粗
5.text-decoration:文本风格
下划线underline / 上划线overline / 删除线line-through
6.font-style:字体风格
斜体italic / 倾斜oblique
7.@font-face(内置的css规则):定义字体名字与位置
为css文件增加@font-face规则,放在最上面

@font-face{
    font-family:"自定义命名";
    src:url("http://....."),
        url("http://.....");
}
复制代码

此外,常用的css内置规则还有: @import / @media

三、常见css属性值简写方式

1.边距:

padding/margin : 上 右 下 左
padding/margin : 上下 左右
复制代码

2.边框/背景/字体

border: thin solid #bfa
background : white url() repeat-x
font: [ font-style  font-variant  font-weifht ] font-size / [line-height]   font-family
复制代码

四、布局

1.流
定义:块元素从上到下,每个元素前后有换行; 内联元素从左上至右下,水平紧挨。
2.布局
流体布局:随着页面的放大缩小,页面随之改变;
冻结布局:在HTML中使用<div id='allcontent'> 在css中限制其元素内容大小#allcontent{ ... }
凝胶布局:锁定内容宽度并居中

五、链接外部文件

1.链接外部css文件

<link type="text/css" rel="stylesheet" href="../loubge.css">
复制代码

2.链接外部js文件

<script src="./lounge.js"></script>
复制代码

六、HTML5新标签

1.标签

头部<header> 尾部<footer> 组织相关的内容<section>

旁栏<aside> 独立内容<article>

2.添加视频

<video  controls  autoplay  loop  width="200px"  height="200px" 
src="video/ss.mp4"  poster="poster.png"  id="video"  preload="auto">
</video>
复制代码

autoplay和controls以及loop是布尔属性,没有值
(autoplay控制自动播放,loop控制重复播放,controls控制进度条);
preload控制视频如何加载:none / metadata / auto;

七、表格

结构:

<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tboody>
</table>
复制代码

1.css属性caption-side可以指定标题在上方还是下方;
2.border-collapse:将单元格边框合为一个边框;
3.用text-align和vartical-align调整对齐
4.利用伪类对表格奇数/偶数行应用样式: :nth-child(even) / :nth-child(odd)
5.指定一个单元格跨多少行:<rowspan> 指定一个单元格跨多少列:<colspan>
6.列表标记:list-style-type: disc / circle / square / none

八、表单

1.用<form>创建表单
2.组件

文本加掩码

<input type="password" name="secret">
复制代码

文本输入

<input type="text" name="fullname">
复制代码

属性maxlength指定字符长度

提交输入

<input type="submit">
复制代码

可用value属性显示别的名字

单选钮输入

<input type="radio" name="hot or not" value="hot">
复制代码

checked属性可使浏览器默认选中该选项

复选框输入

<input type="checkbox" name="..." value="..">
复制代码

文件输入

<input type="file" name="doc">
复制代码

文本区

<textarea rows="10" cols="10" name="...">
复制代码

菜单控件(下拉列表)

<select name="..." multiple(多选)>
    <option value="..." selected(默认选中)></option>
</select>
复制代码
文章分类
前端
文章标签