1 changed files with 0 additions and 168 deletions
@ -1,168 +0,0 @@ |
|||
<!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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue