css基础1
Css（实现了页面和样式的彻底分离）
写入样式表的三种方式：
内联样式表，嵌入样式表，外部样式表。
内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外部样式表
样式表的选择器（通过选择器帮我们获得页面上要获得样式的元素）
写什么标签就拿到了什么标签。（当页面中所有标签都用同一种样式的时候用html选择器）
什么时候用id选择器什么时候用类选择器：
当同一个页面中某些元素显示同一个样式的时候一般用类选择器，id选择器一般是唯一的。
Css当中属性非常多，大体上可以分为以下几类：字体，背景，文本，位置，布局，边缘，列表。
下面是一些关于样式表的例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<!--外部样式表-->
<link href="test.css" rel="stylesheet" type="text/css" />
<!--嵌入样式表-->
<style type="text/css">
p {
background-color:yellow;
font-size:xx-small;
}
</style>
</head>
<body>
<p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
<!--内联样式表-->
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<h1>呵呵</h1>
<tt>窗前明月光，你是第上传</tt>
</body>
</html>选择器的分类：
class类选择器，HTML选择器，ID选择器，关联选择器,伪元素选择器，组合选择器。
下面是class类选择器的例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
p.pp1 {
background-color:red;
}
tt.tt1 {
background-color:yellow;
}
</style>
</head>
<body>
<p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
<!--内联样式表-->
<p class="pp1">今天天气好晴朗，处处好风光</p>
<p class="pp1">今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<h1>呵呵</h1>
<tt class="tt1">窗前明月光，你是第上传</tt>
</body>
</html>HTML选择器：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<p style="background:red;font-size:xx-large">今天天气好晴朗，处处好风光</p>
<!--内联样式表-->
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<h1>呵呵</h1>
<tt>窗前明月光，你是第上传</tt>
</body>
</html>ID选择器：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#p1 {
background-color:black;
}
#p2 {
background-color:blue;
}
</style>
<meta charset="utf-8" />
</head>
<body>
<p id="p1">今天天气很好</p>
<p id="p1">今天天气很好</p>
<p id="p2">今天天气很好</p>
<p id="p3">今天天气很好</p>
<p id="p4">今天天气很好</p>
</body>
</html>关联选择器：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
p em {
background-color:red;
}
</style>
</head>
<body>
<p><em>今天天气好晴朗，处处好风光</em></p>
<em>haha</em>
<em>haha</em>
<em>haha</em>
<em>haha</em>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<p>今天天气好晴朗，处处好风光</p>
<h1>呵呵</h1>
<tt>窗前明月光，你是第上传</tt>
</body>
</html>伪元素选择器：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<!--伪元素选择器是对同一个html元素的各种状态和其所在的部分内容的一种定义形式,例如,对于超链接标签的正常状态,访问过的状态,选中的状态,光标移到超链接上的状态-->
<style type="text/css">
a:active {
text-decoration:none;
}
a:hover {
font-size:xx-large;
}
p::first-line {
font-size:xx-small;
}
p::first-letter {
background-color:red;
}
</style>
</head>
<body>
<p>晋太原中，武陵人捕鱼为业，缘溪行<br />
晋太原中，武陵人捕鱼为业，缘溪行</p>
<a href="#">超链接</a>
</body>
</html>组合选择器：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h1,h2,td {
background-color:yellow;
}
</style>
</head>
<body>
<h1>我是一个大标题</h1>
<h2>我是一个二号标题</h2>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
</table>
</body>
</html>2.关于文档流：什么是文档流？就是html会将控件从上到下排列，不会出现覆盖的情况。
当用css给div设定位置并把position设置为：absolute时，就可以将div设置在需要固定的位置，使其摆脱文档流的束缚。
其中 z-index是元素在页面中的第多少层，越大越在上面，相当于ps中图层的概念。
下面是一个小例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
div {
height:300px;
width:300px;
}
div.div1 {
background-color:rebeccapurple;
top:100px;
left:130px;
position:absolute;/*绝对定位，定在哪儿就在哪儿，脱离文档流的限制*/
z-index:3;/*确定显示在哪一层*/
}
div.div2 {
background-color:green;
top:110px;
left:140px;
position:absolute;
z-index:2;
}
div.div3 {
background-color:yellow;
top:120px;
left:150px;
position:absolute;
z-index:1;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>效果如图所示：
在很多网页中会弹出那种恭喜你，被QQ抽中中奖的广告的弹窗怎么实现的呢？用css也能轻松实现。
下面是一个小例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.div1 {
right:0px;
bottom:0px;
position:fixed;/*absolte当页面拉动时跟着动，fixed是页面拉动的时候不动*/
height:300px;
width:300px;
background-color:red;
}
</style>
</head>
<body>
<div class="div1"></div><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
</body>
</html>其中，position的fixed的意思是把那个div窗体固定在某一位置的意思。即使页面上下拉动，它也始终固定在一个地方。
下面是运行效果：
今天就先总结到这里！88
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-12-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读