You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
4.4 KiB
168 lines
4.4 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<!--外部CSS
|
|
只需修改一个文件即可改变整个网站的外观
|
|
-->
|
|
<link rel="stylesheet" type="text/css" href="mystyle.css">
|
|
|
|
<style>
|
|
/*内部CSS
|
|
在 head 部分的 <style> 元素中进行定义
|
|
*/
|
|
/*元素选择器*/
|
|
p {
|
|
text-align: center;
|
|
color: red;
|
|
border: 2px solid red;
|
|
border-radius: 5px;/*圆角边框*/
|
|
}
|
|
|
|
/*id选择器*/
|
|
#para1 {
|
|
text-align: center;
|
|
color: red;
|
|
}
|
|
|
|
/*类选择器*/
|
|
.center {
|
|
text-align: center;
|
|
color: red;
|
|
}
|
|
|
|
/*通配符选择器 * { } */
|
|
|
|
/*分组选择器*/
|
|
h1, h2, p {
|
|
text-align: center;
|
|
color: red;
|
|
}
|
|
|
|
/*设置背景颜色
|
|
有效的颜色名称 - 比如 "red"
|
|
十六进制值 - 比如 "#ff0000"
|
|
RGB 值 - 比如 "rgb(255,0,0)"
|
|
*/
|
|
body {
|
|
background-color: lightblue;
|
|
/*background: rgba(0, 128, 0, 0.3) 30% 不透明度的绿色背景 */
|
|
background-image: url("paper.gif");/*背景图像*/
|
|
background-repeat: repeat-x;/*背景图像重复方式 repeat-y垂直*/
|
|
background-position: right top;/*背景图像位置*/
|
|
background-attachment: fixed;/*背景图像是否随内容滚动 scroll*/
|
|
|
|
/*简写属性顺序：
|
|
background-color
|
|
background-image
|
|
background-repeat
|
|
background-attachment
|
|
background-position
|
|
*/
|
|
}
|
|
|
|
/*盒模型
|
|
每个 HTML 元素都可以看作是一个盒子
|
|
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
|
|
|
|
盒子模型由四个部分组成：
|
|
边距（margin）：清除元素周围的区域，外边距是透明的
|
|
边框（border）：围绕内边距和内容的边框
|
|
内边距（padding）：清除内容周围的区域，内边距也是透明的
|
|
内容（content）：包含文本和图像的实际内容
|
|
*/
|
|
div {
|
|
width: 300px;
|
|
border: 25px solid green;
|
|
padding: 25px;
|
|
margin: 25px; /*水平居中用 auto*/
|
|
}
|
|
|
|
p.ex {
|
|
outline: 5px solid yellow; /*轮廓线，不占空间*/
|
|
outline-offset: 25px;/*轮廓线与元素边框的距离*/
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* unvisited link */
|
|
a:link {
|
|
color: red;
|
|
}
|
|
|
|
/* visited link */
|
|
a:visited {
|
|
color: green;
|
|
}
|
|
|
|
/* mouse over link */
|
|
a:hover {
|
|
color: hotpink;
|
|
}
|
|
|
|
/* selected link */
|
|
a:active {
|
|
color: blue;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<!--
|
|
CSS 指的是层叠样式表* (Cascading Style Sheets)
|
|
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
|
|
CSS 节省了大量工作。它可以同时控制多张网页的布局
|
|
外部样式表存储在 CSS 文件中-->
|
|
|
|
<p>每个段落都会受到样式的影响。</p>
|
|
<p id="para1">1111111</p>
|
|
|
|
<h1 class="center">居中的红色标题</h1>
|
|
<p class="center">居中的红色段落。</p>
|
|
|
|
<!--行内CSS
|
|
在相关元素的 "style" 属性中定义
|
|
-->
|
|
<h1 style="color:blue;text-align:center;">This is a heading</h1>
|
|
|
|
<!--如果在不同样式表中为同一选择器（元素）定义了一些属性
|
|
则将使用最后读取的样式表中的值。
|
|
层叠顺序:行内样式（在 HTML 元素中）
|
|
外部和内部样式表（在 head 部分）
|
|
浏览器默认样式
|
|
-->
|
|
|
|
<!--边框颜色-->
|
|
<h1 style="border:2px solid Tomato;">Hello World</h1>
|
|
<h1 style="background-color:rgb(255, 99, 71);">...</h1><!--红绿蓝-->
|
|
<h1 style="background-color:#ff6347;">...</h1><!--十六进制-->
|
|
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1><!--色相、饱和度和明度-->
|
|
|
|
<p class="ex">5 像素的黄色实线轮廓。</p>
|
|
|
|
<p>没有下划线的链接：
|
|
<a href="https://www.w3school.com.cn">W3School.com.cn</a>
|
|
</p>
|
|
|
|
<h1>CSS 链接</h1>
|
|
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
|
|
<!--在 CSS 定义中
|
|
a:hover 必须位于 a:link 和 a:visited 之后才能生效。
|
|
a:active 必须位于 a:hover 之后才能生效。-->
|
|
|
|
<!--导航菜单=链接列表-->
|
|
<ul>
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#news">News</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html>
|