CSS样式中选择器+盒子模型+定位+浮动
一、选择器
选择器，选择你所需要修饰的HTML元素
1.通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 通配符选择器：选择html文档中所有的标签
*/
*{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用真心待她人</p>
<p>做美丽的自己</p>
</body>
</html>
2.标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 标签选择器
*/
p{
color: red;
}
/*
* class选择器
* 注意：以.开头
*/
.myclass{
color: green;
}
/*
* id选择器
* 注意：
* 1.以#开头
* 2.潜规则：id是唯一的
*/
#myid{
color: blue;
}
</style>
</head>
<body>
<h1 class="myclass">一级标签</h1>
<h2>二级标签</h2>
<h3 class="myclass">三级标签</h3>
<h4>四级标签</h4>
<h5 class="myclass">五级标签</h5>
<h6 id="myid">六级标签</h6>
<p>用真心待她人</p>
<p>做美丽的自己</p>
</body>
</html>
3.基本选择器的优先级别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 基本选择器的优先级别：ID选择器>CLASS选择器>标签选择器
*/
p{
color: red;
}
.myclass{
color: green;
}
#myid{
color: blue;
}
</style>
</head>
<body>
<p id="myid" class="myclass">用良心做教育</p>
</body>
</html>
4.群组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 群组选择器
*/
h1,h3,h5,p{
color: red;
}
</style>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>用真心待她人</p>
<p>做美丽的自己</p>
</body>
</html>
5.派生选择器/上下文关系选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 派生选择器/上下文关系选择器
*
* 后台选择器
* ul a{
color: red;
}
子代选择器
li>a{
color: red;
}
相邻兄弟选择器
注意：效果作用于后者
a+a{
color: red;
}
*/
</style>
</head>
<body>
<ul>
<li>
<a href="#">超链接1</a>
</li>
<li>
<a href="#">超链接2</a>
</li>
<li>
<a href="#">超链接3</a>
</li>
</ul>
<ul>
<li>
<a href="#">超链接4</a>
</li>
<li>
<a href="#">超链接5</a>
</li>
<li>
<a href="#">超链接6</a>
</li>
<li>
<a href="#">超链接7</a>
</li>
</ul>
<a href="#">超链接8</a>
<a href="#">超链接9</a>
<a href="#">超链接10</a>
<a href="#">超链接11</a>
<a href="#">超链接12</a>
</body>
</html>
6.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 属性选择器 --- 单个属性
* input[placeholder]{
color: red;
}
属性选择器 --- 单个属性+值
input[type=password]{
color: red;
}
属性选择器 --- 多个属性
input[type][placeholder]{
color: red;
}
属性选择器 --- 多个属性+值
input[type=password][name=repassword]{
color: red;
}
*/
</style>
</head>
<body>
<form action="服务器地址" method="post">
账号：<input name="username" type="text" placeholder="请输入账号"/><br />
密码：<input name="password" type="password" placeholder="请输入密码"/><br />
确认密码：<input name="repassword" type="password" placeholder="请输入确认密码"/><br />
性别：
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
<br />
爱好：
<input type="checkbox" name="hobbys" value="football"/>足球
<input type="checkbox" name="hobbys" value="basketball"/>篮球
<input type="checkbox" name="hobbys" value="shop"/>购物
<br />
籍贯：
<select name="province">
<option value="sc">四川</option>
<option value="hn" selected="selected">湖南</option>
<option value="hb">湖北</option>
</select>省
<select name="city">
<option value="cs">长沙</option>
<option value="yy">岳阳</option>
<option value="xy" selected="selected">襄阳</option>
<option value="ld">娄底</option>
<option value="yz">永州</option>
</select>市
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
7.样式的优先级别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
样式的优先级别：行内样式 > 内部样式和外部样式
注意：内部样式和外部样式看加载顺序
-->
<!--内部样式-->
<style type="text/css">
p{color: red;}
</style>
<!--外部样式-->
<link rel="stylesheet" href="../css/new_file.css" />
</head>
<body>
<!--行内样式-->
<p style="color: blue;">用良心做教育</p>
</body>
</html>
8.锚伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {color: #66CCFF} /* 未访问的链接 */
a:visited {color: #CC0000} /* 已访问的链接 */
a:hover {color: #33FFFF} /* 鼠标移动到链接上 */
a:active {color: #9900FF} /* 选定的链接 */
</style>
</head>
<body>
<a href="http://www.sina.com.cn">新浪微博</a>
</body>
</html>
9.常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-family: "微软雅黑";/*字体*/
font-size: 30px;/*大小*/
/*
* ---- normal标准样式
---- italic斜体
---- oblique倾斜
---- inherit从父类继承的字体样式
*/
font-style: oblique;/*风格*/
/*
----normal标准样式
----bold粗体
----bolder更粗
----lighter更细
*/
font-weight: bolder;/*字体加粗*/
letter-spacing: 20px;/*字符间隔*/
text-decoration: underline;/*添加划线*/
text-align: center;/*字体居中*/
background-color: red;/*背景*/
color: white;
/*
* 边框
属性名称
border-bottom
solid(实线)
dashed(虚线)
double(双实线)
*/
border:orange 10px solid;/*边框：颜色、粗细、实线*/
}
</style>
</head>
<body>
<p>用良心做教育</p>
</body>
</html>
二、盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: red 1px solid;
/*padding: 50px;设置上下左右内边距*/
/*padding-top: 20px;设置顶部内边距*/
/*padding-bottom: 20px;设置底部内边距*/
/*padding-left: 20px;设置左边内边距*/
/*padding-right: 20px;设置右边内边距*/
/*margin: 50px;设置上下左右外边距*/
margin-top: 20px;/*设置顶部外边距*/
margin-bottom: 20px;/*设置底部外边距*/
margin-left: 20px;/*设置左边外边距*/
margin-right: 20px;/*设置右边外边距*/
/*margin: 0 auto;水平居中*/
}
</style>
</head>
<body>
<div>
<span>元素</span>
</div>
</body>
</html>
三、定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
1.相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 50px;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: relative;/*相对定位：保留原来的位置，相对于原来的位置进行位移*/
left: 30px;
top: 30px;
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
2.绝对定位
绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。
并且绝对定位不会保留原有的位置空间。
z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
margin-top: 50px;
position: relative;
}
#box01{
width: 100px;
height: 100px;
border: red 1px solid;
}
#box02{
width: 100px;
height: 100px;
border: green 1px solid;
position: absolute;/*绝对定位：不保留原来的位置，向上去找寻父级标签，查看父级标签是否有position属性，如果有就按照父级标签位置进行位移，如果没有就继续向上找寻，直到body位置*/
left: 30px;
top: 30px;
}
#box03{
width: 100px;
height: 100px;
border: blue 1px solid;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</div>
</body>
</html>
3.固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#top{
position: fixed;/*固定定位*/
top:70%;
left: 90%;
}
</style>
</head>
<body>
<a id="top" href="#new01">☝</a>
<a href="#new01">法制</a>
<a href="#new02">国际</a>
<a href="#new03">教育</a>
<a href="#new04">娱乐</a>
<a name="new01"></a><!--锚点-->
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<h1>法制新闻</h1>
<a name="new02"></a><!--锚点-->
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<a name="new03"></a><!--锚点-->
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<h1>教育新闻</h1>
<a name="new04"></a><!--锚点-->
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
</body>
</html>
四、浮动
浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。
副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。
解决办法：添加空盒子
在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div
.clear{clear:both;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#manager{
border: orange 1px solid;
width: 80%;
margin: 0 auto;
padding: 5px;
}
#box01{
border: orange 1px solid;
width: 100%;
height: 150px;
}
#box02{
border: orange 1px solid;
width: 25%;
height: 200px;
float: left;
}
#box03{
border: orange 1px solid;
width: 45%;
height: 200px;
float: left;
}
#box04{
border: orange 1px solid;
width: 25%;
height: 200px;
float: left;
}
.myclear{
clear: both;
}
</style>
</head>
<body>
<div id="manager">
<div id="box01"></div>
<div>
<div id="box02"></div>
<div id="box03"></div>
<div id="box04"></div>
<div class="myclear"></div>
</div>
</div>
</body>
</html>
五、扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;
}
input{
width: 100px;
height: 50px;
color: white;
font-weight: bolder;
background-color: orange;
border-radius: 15px;/*圆角属性*/
box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
}
</style>
</head>
<body>
<input type="button" value="普通按钮" />
</body>
</html>
六、新增语义化标签
| 标签 | 描述 |
|---|---|
|
| 头部标签 |
| 导航标签 | |
| 内容标签 | |
| 块级标签 | |
| 侧边栏标签 | |
| 尾部标签 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
header,nav,article,aside,footer,section{
background-color: #87A442;
text-align: center;
border: black 1px solid;
border-radius:20px;
margin: 10px;
padding: 10px;
}
header{
height: 120px;
}
nav{
height: 50px;
}
article{
width: 46%;
height: 120px;
float: left;
}
aside{
width: 46%;
height: 120px;
float: right;yu
}
footer{
clear: both;
height: 120px;
}
section{
height: 70px;
}
</style>
<header>头部标签 - header</header>
<nav>导航标签 - nav</nav>
<div>
<article>内容标签 - article
<section>块级标签 - section</section>
</article>
<aside>侧边栏标签 - aside</aside>
</div>
<footer>尾部标签 - footer</footer>
</body>
</html>
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
