HTML+CSS注意点
1. 对于中文网页,需要在header中使用<meta charset="utf-8">声明编码,否则会出现乱码。
2. 属性
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
3. *{margin:0; padding:0;}的使用
* 代表通配符,代表HTML的所有元素。为了兼容性考虑,因为页面上有些元素具有默认的margin、padding值,通过上面的语句可以去掉默认值。
测试如下:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1{
float:left;
width: 30%;
height: 300px;
background-color: #99FF99;
}
#div2{
margin-left:30%;
width: 70%;
height: 300px;
background-color: #99FFFF;
}
</style>
</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>
</body>
</html>
页面的两边会有空白。因为body元素具有margin值。
如果,在style中加入 *{margin: 0; padding: 0;} ,页面两边的空白就会消失。
4. HTML的style属性
style作用:提供了一种改变所有HTML元素的样式的通用方法。
避免使用下面的标签和属性:请使用样式代替。
标签 | 描述 |
---|---|
<center> | 定义居中的内容。 |
<font> 和 <basefont> | 定义 HTML 字体。 |
<s> 和 <strike> | 定义删除线文本 |
<u> | 定义下划线文本 |
属性 | 描述 |
align | 定义文本的对齐方式 |
bgcolor | 定义背景颜色 |
color | 定义文本颜色 |
bgcolor -> background-color (为元素定义了背景颜色)
font -> font-family、color以及font-size属性分别定义元素中文本的字体系列、颜色和字体尺寸。
align -> text-align (规定了元素中文本的水平对齐方式)
5. 使用样式
三种方法插入样式表:外部样式表, 内部样式表, 内联样式。
6. 链接
通过<a>标签在HTML中创建链接。有一下属性:
href 属性 - 创建指向另一个文档的链接
name 属性 - 创建文档内的书签,也可以规定锚(anchor)的名称
target 属性 - 定义被链接的文档在何处显示,如_blank,在新窗口打开文档
样式:text-decoration:none 可以让链接没有下划线
7. 块
8. 设置页面占满整个浏览器
html {
height: 100%
}
body {
margin: 0 auto;
padding: 0;
height: 100%;
}
最新文章
- .NET在线培训 | C#在线培训 | .NET培训 | 最课程培训
- 将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间
- [maven] 常用插件解析
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
- [jQuery学习系列六]6-jQuery实际操作小案例
- javascript 汉字生成拼音
- yum cannot retrieve metalink for repository
- git工具使用方法及常用命令
- 新概念英语(1-71)He&#39;s awful!
- [ZJOI 2012]灾难
- spring boot添加 LocalDateTime 等 java8 时间类序列化和反序列化的支持
- 如何把遗留的Java应用托管在Service Fabric中
- 错误整理:No plugin found for prefix &#39;jetty&#39; in the current project and in the plugin groups
- MySql cmd下的学习笔记 —— 有关分组的操作(group by)
- 二进制补码除法——计算机底层整数除法模拟之Java实现
- nmap的使用
- 带事件的Bootstrap模态框的使用2
- Oracle_PL/SQL(3) 游标
- Ubuntu16.04下的stm32环境配置
- string源码分析 ——转载 http://blogs.360.cn/360cloud/2012/11/26/linux-gcc-stl-string-in-depth/
热门文章
- ZOJ3228 Searching the String —— AC自动机 + 可重叠/不可重叠
- 使用 HTML5 的 IndexedDB API
- 利用ThinkPHP做项目步骤
- 如何配置OpenFire上JVM的内存(Memory)
- hdu-5784 How Many Triangles(计算几何+极角排序)
- BZOJ3230 相似子串[后缀数组+二分+st表]
- 【Lintcode】118.Distinct Subsequences
- Standby Redo Log 的设定原则、创建、删除、查看、归档位置
- css3渐变gradient
- bzoj 1657 [Usaco2006 Mar]Mooo 奶牛的歌声——单调栈水题