HTML&CSS学习

HTML&CSS学习

HTML的一些标签

标题

<h1>~<h5>

段落

<p>

超链接

<a href="">a>

图片

是一个void元素,没有任何内容的元素,甚至没有结束标记。

<img src=".jpg">

短引用

常常以双引号显示,当然也可以通过设置css更换样式

<q>q>

长引用

<blockquote>blockquote>

换行

<br>

列表

可嵌套使用,制作嵌套列表


<ul>ul>

<ol>ol>

<li>li>

一些属性

id属性


<h2 id="chai">Chai Tea, $1.85h2>


<a href="index.html#chai">see Chai Teaa>

使用target打开新窗口

<a target="_blank" href="mission.html">Read about our Missiona>

开始的一些准备工作

版本说明

html4版本共说明


HTML&CSS学习_第1张图片

html5版本说明,事实上,浏览器认为你正在使用标准html,不再考虑版本号。事实上html不再会有6,7,8…,制定标准的人已经把这个规范变成了一个活的标准,随着技术的发展不断更新,所以不再有版本号,认知你可以不再叫它html5,因为现在它只是html


指定字符编码

写在head中

<meta charset="utf-8">

CSS(层叠样式表)

style元素

<html>
<head>
    <title>Titletitle>
    
    <style type="text/css">
        body{
            background-color: #d2b48c;
            margin-left: 20%;
            margin-right: 20%;
            border:2px dotted black;
            padding: 10px 10px 10px 10px;
            font-family: sans-serif;
        }
        p{
        background-color: #954b4b;
        color: #a7cece;
        border: 1px solid gray;
      }
        h1{
        font-family: sans-serif;
        color: gray;
      }
        h2{
        font-family: sans-serif;
        color: gray;
      }
    style>
head>
<body>
body>
html>

link元素

当需要大量页面需要使用相同的css时,可以创建.css文件,统一css样式,同时也方便统一管理和修改。.css文件中的内容(不能包含html)

body {
	font-family: sans-serif;
}

h1, h2 {    
	color: gray;
}

h1 { 
	border-bottom: 1px solid black;
}

p {
	color: maroon;
}

p.greentea {
	color: green;
}

在html中使用

<link type="text/css" rel="stylesheet" href="lounge.css">
HTML&CSS学习_第2张图片

创建类选择器

在css中创建一个类,对段落使用

p.pfguo{
	color: red;
}

在HTML中使用

    <p class="pfguo">
      Join us any evening for refreshing 
      <a href="beverages/elixir.html">elixirsa>, 
      conversation and maybe a game or two of 
      <em>Dance Dance Revolutionem>.  
      Wireless access is always provided;  
      BYOWS (Bring Your Own Web Server).
    p>

如果需要对多个元素使用?

在css中这样写规则

.pfguo2{
	color: black;
}

一个元素可以加入多个类

<p class="pfguo1 pfguo2 pfguo3">

广泛的属性

字体

设置字体,可设置多个,当访问用户计算机无第一种字体时,会顺延使用下一个字体,同理,若不含有,依次顺延。

当然如果有需要,也可以设置web字体,有很多网址会提供这样的字体托管服务

font-family:Verdana,Geneva,Arial;

字体大小

设置字体大小,其实是字体的高,当然也有其他的设置方法,如large或者百分数等等

font-size:14px;

字体颜色

color:silver;/*设置字体颜色*/

当然也可以使用16进制码

HTML&CSS学习_第3张图片

当然还有很多属性,自己查吧~

font-weight:bold/*可选的有:lighter、normal、bold、bolder*/
text-decoration:underline;/*下划线:underline 上划线:overline 删除线:line-through*/

你可能感兴趣的:(web)