zoukankan      html  css  js  c++  java
  • 【干货】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

  • 相关阅读:
    AGC037F Counting of Subarrays
    AGC025F Addition and Andition
    CF506C Mr. Kitayuta vs. Bamboos
    AGC032D Rotation Sort
    ARC101F Robots and Exits
    AGC032E Modulo Pairing
    CF559E Gerald and Path
    CF685C Optimal Point
    聊聊Mysql索引和redis跳表
    什么是线程安全
  • 原文地址:https://www.cnblogs.com/ziye89/p/7246253.html
Copyright © 2011-2022 走看看