HTML和CSS一些基础知识总结
“网页太长，我想导航到某个部分”
使用<a>元素创建登陆点：三步曲
- 找到网页中需要创建登陆点的地方
- 用
<a>元素把他围起来 - 使用
<a>元素的id属性定义登陆点的标识名
例子：
对index.html设置登陆点
<h2><a id="chai">Chai Tea, $1.85</a></h2>在需要引用到目标锚的地方：
<a href="index.html#chai">See Chai Tea</a>”链接到一个新窗口“
使用<target>属性
取值为”_blank”：每次都打开新窗口。
<a target="_blank" href="http://wickedlysmart.com/buzz/#Coffee" title="Read all about caffeine on the Buzz">Caffeine Buzz</a>Target 怎么理解？告诉浏览器新窗口的窗口名。如果你起coffee，那么，所有target为coffee的链接都会在同一个窗口中打开。
万一图片下载失败？
会显示一个白色图片框，中间打一个叉，使用<alt>属性，在图片打不开时提供备选项。
<img src="images/drinks.gif" width = "500" height = "100" alt="some drinks.">
<img>元素是一个内联元素，意味着浏览器不会在图像前边或后边插入换行符。HTML标准
严格的HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">相较于正向HTML 4.01过渡的版本
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">给每个图片链接加上alt属性并指定字符编码
简记版
更加严格，要求内联元素必须包含于块元素！连img都不例外
<p>
<img src = "images/drinks.gif" alt="drinks">
</p>CSS
h1, h2 {
font-family:sans-serif;
color:gray;
}
h1 {
border-bottom: 1px solid black;
}使用text-decoration:underline;替换border-bottom: 1px solid black;按照自己的实际需求来按需编写
text-decoration:
none：取消文本修饰
line-through：中划线
underline：下划线
overline：上划线(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
两个包含语义和文本修饰的HTML元素
<ins>：插入内容，下划线。
<del>：删除内容，中划线。将css抽象成文件并使用，这样只用修改一个.css文件就能对全部使用了这个css的html文件进行样式升级
<link type="text/css" rel="stylesheet" href="lounge.css" />不想要带衬线字体？为body增加 font-family 属性
属性值为” sans-serif “。(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
这样，p元素和h1、h2元素就自动拥有了font-family属性，这就是“继承”的好处。
但是，如果我想让段落中的em元素内容有特殊的格式呢？比如采用serif字体？
“继承”是可以被“覆盖”的。
两条规则，一条选择body，一条选择em！
css文件编写：
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
}
em{
font-family:serif;
}
body {
font-family:sans-serif;
font-size:36px;
}给相关的<p>元素添加class属性
让每段描述饮料的文字，有和饮料相同的颜色。
绿茶就用绿色文字介绍。红茶就用红色的文字介绍。
可是，这些文字都是在<p>元素里面，怎样区分出来呢？
没关系，我们有“类”！
<p class="greentea">……</p>CSS中创建类的选择符
p . greentea {
color: green;
}如果还有同一类的其他元素呢？
blockquote.greentea, p.greentea {/*逗号分隔*/
color: green;
}如果我要greentea类的所有元素！
.greentea {
color: green;/*省略元素名称，
就是指所有元素
*/
}一个元素可以加入多个类！(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
<p class ="products on-sale greentea">用空格隔开就可以如果每个类都有规则，冲突了怎么办？
会彼此覆盖，以具体和靠后的为准，即“层叠”的含义。
用class属性将一个元素加入类中。
使用“.”符号来选择类里的某个元素。
文本和字体：
font-family：字体
font-size：字体大小
color：文字颜色
font-weight：字体粗细
text-decoration：更多样式
body {
font-family: Verdana, Geneva, Arial, sans-serif;/*最后一个字体要用常用字体，作为保险*/
}怎样安排多个候选字体？
特定字体放在前面，字体系列作为最后一个保险。
PC和Mac支持的字体最好都要有。
如果字体名称是多个单词组成的，单词之间的空格会不会被认错成是两个字体？
答：会，所以这时需要给字体名称加上英文引号。
“Courier New”字体，用的较多
调整字体大小
PX方式：像素
body {
font-size: 14px;
}
%方式：
h1 {
font-size: 150%;
}
相对于父元素的大小百分比。增加行间距：
line-height : 1.6em ;/*1.6倍行距*/设置边框和背景色
.guarantee {
border-color: black;
/*border-color
以名字指定：red
rgb(100%,0%,0%)
#f00
*/
border-width: 1px;
/*thin, medium, thick
以px为单位，如5px
*/
border-style: solid;
/*边框快速指南
solid
double
groove
outset
dotted
dashed
inset
ridge
*/
background-color: #a7cece;
padding: 25px;//我们在内容区四周
各添加了25像素的补白
margin: 30px;//新增的外边距
//插入文字修饰和背景图
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;
background-image: url(images/background.gif); //无需双引号
background-repeat属性
no-repeat和repeat（默认值）
repeat-x和repeat-y
inherit：从父元素继承
background-position属性
top，left，right，bottom，center
百分数 如0% 100%表示left bottom
像素值 如20px 100px
百分数和像素值还可以为负值
}
不对称的补白和外边距可以使用层叠覆盖的原理(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
顺序不能错
定义边框的一侧,可以使用top，right，bottom和left，以如下格式单独定义边框的一侧：
border-top-color: black
border-top-style: dashed
border-top-width: thick
制定圆角边框
可以在4个角都创建圆角
border-radius: 15px;
如果只想要左上左下角为圆角怎么办？
border-top-left-radius: 3em;
border-bottom-left-radius: 3em;
锯齿边框
border-style: dashed;
border-color: white;
因为，背景色会延伸到边框下面。
边框若选择虚线，虚线的空白部分会显示背景色。
虚线若设置为白色，则产生白色和背景色交替的锯齿形状。ID属性
同一页面中是id应该唯一的
<p id="guarantee">some text</p>规则中的选择器
p#guarantee {color: red; }唯一的不同就是：使用#号，而不是”.”
链接外部的css后越在下面被链接的，优先级越高
Padding设置的简写：顺序为上 右 下 左，不能错
检测是否符合标准
(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
visitor tracker
扫一扫
3258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
