HTML与CSS基础及样式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46415443/article/details/124089356

<html>整页</html>
<head>页头</head>
<title>标题</title>
<body>页体</body>
<h1>标题</h1>
<h2>子标题</h2>
<p>段落</p>
<style type="text/css">
样式标记，在head中，type指定样式类型
	body{background-color: #d2b48c; 页面背景颜色
	margin-left: 20%; 左外边距20%
	margin-right:20%; 右外边距20%
	border:2px dotted black; 页面主题黑虚边线
	padding:10px 10px 10px 10px; 页面主题周围内边距
	font-family:sans-serif;  文本字体
	}
</style>
<a href="../elix.html">超级链接</a> ../代表父路径
<img src="photo.jpg">图片链接

<em>这个是斜体</em>
<q>这个是引号标记</q>
<blockquote>这是长引用，适合作序</blockquote>
<br>这是换行
<li>这是列表</li>
<ol><li>有序列表</li></ol>
<ul><li>无序列表</li></ul>
&lt;是<
&gt;是>
&amp; 是&
<code>显示代码</code>
<time>日期时间</time>
<strong>强调</strong>
<pre>指定 文 本格式</pre>
<a href="3.html" title="链接文本描述">链接文本描述</a>
<h2 id="char">id属性提供锚点，<a href="3.html#char">链接可以直接#跳到指定锚点位置</a></h2>
<a target="_blank" href="3.html"> target="_blank"从新窗口打开</a>
<img alt="如果图像没显示，就显示这段文字">
<img width="600" height="800">限定图片尺寸
<meta charset="UTF-8">指定为Unicode编码



<style type="text/css">
    p { background-color:red;} p元素 背景色 红色
    p { border:1px solid gray;} p元素 边框 1像素 实线 灰色
    p { color: maroon;} p元素 字体 茶红色
    h1,h2 { font-family: sans-serif; color:gray;} h1h2元素 字体sans-serif 颜色灰
    h1,h2 { border-bottom: 1px solid black;} h1h2下边框 1像素 实心 黑色
    /* 这是css注释*/
    <p class="greentea">在HTML中为CSS选择器定义类</p>
    p.greentea{color: green;} CSS类选择器 标签.class属性
    .greentea{ color: green} 所有元素的greentea类都有那个应用这种样式
    <p class="greentea raspberry blueberry">如果多个类，选择器选择最特定的样式，如果同级，选择最后一个样式</p>
    font-weight 文本粗细
    left 元素左边位置
    line-height 文本行间距
    top 元素顶部位置
    border 元素边框
    padding 内边距
    font-size 文本字号
    text-align 文本对齐
    letter-spacing 字母间距
    font-style 文本斜体
    list-style 列表外观
    background-image 元素背景图片
</style>
<link type="text/css" rel="stylesheet" href="../longer.css"> 外链CSS文件

<style>

body{
    font-family: Verdana,Geneva,Arial; /* 浏览器按顺序显示字体，如果第一个没有就用后面的*/
    font-size: 14px; /*设置字体大小*/
    font-weight: bold;/*设置字体粗细*/
    font-style: italic;/*字体风格*/
    text-decoration: underline; /*文本下划线*/
    background-image: url(images/black.gif); /*背景图片*/
}
    #footer{} /*ID选择器需要前缀#*/
    p#footer{} /*选择ID为footer的P元素*/
    混合样式表兼容不同的设备，优先级由下至上
</style>
<div id="1">伪类、容器</div>
<span class="cd">内联块元素</span>
<style>
    #class h2 {} /*选择类子元素*/
</style>