首页 > 代码库 > 【2017.7.27】Html与CSS学习笔记4-8
【2017.7.27】Html与CSS学习笔记4-8
四、web镇之旅，连接起来
找一家托管公司如阿里云，购买域名和空间，然后将网页文件上传到购买的空间的根目录下。
1、绝对路径url
url:uniform resource locators 统一资源定位符，告诉服务器如何从根文件到达指定的页面。总是从"/"开始，代表根文件夹。
浏览器输入的web地址：协议+网站名+绝对路径（http + www.ceshi.com + /web/index.html ）
注：通常只写到文件夹名即可http://www.ceshi.com/web/，浏览器会尝试在这个目录web下找默认页面（如果是访问其他页面，要把页面名加上），通常是index.html 或 default.html，最后的"/"也可以不要，服务器会自动加上。
浏览器对于相对路径的访问，会根据本页面地址加相对路径，转换为一个绝对路径。
一般地，用相对路径来链接本网站内容，用url来链接其他网站页面。否则，本网站一点改名则所有本网站内链接失效。
2、其他
title属性：可以为任意元素加一个title属性，属性值会为此元素创建一个提示，鼠标放上去时。
用id属性直接链接到该元素：只需在链接后加上#id 例：<a href="http://www.mamicode.com/index.html#chai">see chai tea</a>。
用target属性打开窗口：链接在新窗口打开，<a target="_blank" href="http://sougou.com/">sougou</a>，不写此属性的话默认是在本窗口打开链接。当然target也可以指定其他名字如coffee，那么用了这个的链接都会在同一个coffee窗口打开。
五、为页面增加图像，认识媒体
img 元素：<img src="http://www.mamicode.com/logo/mypod.png" alt="mypod logo" width="48" height="100">，src属性是图像地址，alt属性是必须的，当图像无法显示时会用这个代替，鼠标移到上面也会有提示。width 和height属性可以实现页面上图像的缩放，但是图像大小还是应该在源文件上调整好，最好原样显示，这两个属性只是用于来为图像提前规划好大小占位。
图像格式有：jpg png gif，当用png或gif的透明性时，在保存为web格式对话框的蒙版matte中要选择与背景颜色一样，这样才能自然过渡。
六、标准及其他 严肃的html
现在的html5文档类型定义，直接在页面第一行，即<html>上面一行，增加<!doctype html>即可。
html文档验证工具：http://validator.w3.org
声明字符编码：在<head>的第一行添加<meta charset="utf-8">
七、css入门 加一点样式
csss语法：p{ background-color: red; }，这是一条规则，元素{ 属性：值；}。同时选择两个：h1,h2{ color: gray; }。选择子元素：p q{ color: red; }
可以直接将css规则放在<head>元素的<style></style>里。
css验证工具：http://jigsaw.w3.org/css-validator/
1、创建css文件
所有规则放在一个css文件里，链接到html文件，将内容和样式分开，一是可重用性，二是方便统一修改。
css中的注释放在/*和*/中间。
在html的<head>里放入链接，<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/index.css">，其中type属性可不要，rel属性（relevent）表明链接文件与html文件的关系，是一个样式表，所以用stylesheet。link也是一个void元素，没有结束标记。
css规则不论是外链的还是放在style里的大多都有继承性，除了a的颜色，边框等。
css中更特定的规则能覆盖上层的规则。更特定：更下级元素、相同规则更靠后的、作者>使用者自定（除非规则后加了important属性）>浏览器默认。
2、类
一类相同的元素可以放在一个class 里，在html中要增加class 属性，<p class="greentea">，然后在css中创建这个类的规则整个类用 .greentea{} ，选择类中某一元素用p.greentea, blockquote.greentea {}。
一个元素可以加入多个类<p class="greentea rasberry blueberry">。
3、属性杂烩
color:文本元素颜色
font-weight:文本粗细
left:指定元素左边所在位置
line-height:文本行间距
font-size:文本大小
padding:内边距
border:边框
background-color:背景颜色
text-align:文本对齐方式
letter-spacing:字母之间间距
fontstyle: 设置斜体
liststyle:列表项外观
background-image:元素后放一个图片当背景
八、增加字体和颜色样式 扩大你的词汇量
font-family是一系列字体候选列表，body{font-family: Verdana, Geneva, Aviral, sans-serif;}，越靠前越优先，用户浏览器没有这个字体的话继续向下选，最后要有一个保底字体集。
字体大小font-size，可以用px、%、em，还有关键字small large这些来表示，其中1.2em=120%，比例是相对于其父元素的字体大小。一般地，body字体大小选择一个关键字表示，其他元素相对于body用比例表示。这样更改body字大小其他的都会相应变化。一般不建议用像素px来指定大小，可用性低，不会随页面缩放（老版本IE浏览器，新版本已经可以缩放）。
web颜色：可以用颜色名、RGB百分比和十六进制来表示。
1、字体外观属性：
font-family:字体系列
text-decoration:上划线、下划线和删除线，类似地html中的<del>也有删除线样式，<ins>也有下划线样式，但更多地是表功能。
font-size:字体大小
font-weight:字体粗细
font-style:增加斜体，类似地html中的<em>也是斜体，但一个表结构中的强调，一个只是表现方式。
去掉继承的属性，值写为none。如font-weight:none
【2017.7.27】Html与CSS学习笔记4-8