• 【干货】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="index.html#chai">see chai tea</a>。

    用target属性打开窗口:链接在新窗口打开,<a target="_blank" href="http://sougou.com/">sougou</a>,不写此属性的话默认是在本窗口打开链接。当然target也可以指定其他名字如coffee,那么用了这个的链接都会在同一个coffee窗口打开。

    五、为页面增加图像,认识媒体

    img 元素:<img src="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="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:文本行间距,可以用比例,表示是字体大小的多少倍。还可以直接用数字比如1.2,表示个元素行高是自己字体大小的1.2倍,方便用于在父元素中有多个不同类型行高的设定,否则全部按照父元素字体大小的倍数,对有些标题来说太小了。

    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

  • 相关阅读:
    UVA 11525 好大好大的排列(线段树)
    UVA 11525 好大好大的排列(线段树)
    UVALive 4108城市天际线,混杂着递归与非递归的线段树
    UVALive 4108城市天际线,混杂着递归与非递归的线段树
    zencart搜索结果页面静态化 advanced_search_result
    .htaccess 一段神奇的跳转代码
    清除zencart分类页多页后面的&disp_order &sort字符串的方法
    zencart只有购买过此产品的客户才能评价产品
    mysql自增字段AUTO_INCREMENT重排或归零
    mysql语句修改zencart产品原价为特价的倍数
  • 原文地址:https://www.cnblogs.com/ziye89/p/7246253.html
Copyright © 2020-2023  润新知