HTML外部样式表外部样式表
每个页⾯使⽤ 标签链接到样式表。 标签在（⽂档的）头部。
浏览器会从⽂件 mystyle.css 中读到样式声明，并根据它来格式⽂档。
外部样式表可以在任何⽂本编辑器中进⾏编辑。
⽂件不能包含任何的 html 标签。
样式表应该以 .css 扩展名进⾏保存。
cssclass属性<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="para1">Hello World!</p>
<a href="team1/team1.html">团队1</a>
<p>段落1</p>
<p class="para2">Nice to meet you.</p>
</body>
</html>
背景颜⾊
CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
页⾯的背景颜⾊使⽤在body的选择器中:
body {background-color:antiquewhite;}
背景图
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进⾏平铺重复显⽰，以覆盖整个元素实体.
css position(定位）
position 属性的五个值：
static
relative
fixed
absolute
sticky
绝对定位（absolute):
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是⼀个绝对定位了的标题</h2>
<p>⽤绝对定位,⼀个元素可以放在页⾯上的任何位置。标题下⾯放置距离左边的页⾯100 px和距离页⾯的顶部150 px的元素。.</p>
</body>
</html>
css Float(浮动）
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是⽤于图像，但它在布局时⼀样⾮常有⽤。
CSS Display(显⽰) 与 Visibility（可见性）
display属性设置⼀个元素应如何显⽰，visibility属性指定⼀个元素应可见还是隐藏。
隐藏元素 - display:none或visibility:hidden
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占⽤与未隐藏之前⼀样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
<head>
<meta charset="utf-8">
<title></title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>这是⼀个可见标题</h1>
<h1 class="hidden">这是⼀个隐藏标题</h1>
<p>注意，实例中的隐藏标题仍然占⽤空间。</p>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。