1. CSS的使用
1.1 样式分类及基本选择器（重点）
-- 外部样式 --
<link rel="stylesheet" type="text/css" href="../css/red.css"/>-- 内部样式 --
<style type="text/css">
div{
color: blue;font-size: 36px;
font-family: "arial narrow";
}
#hh{
color: green;
}
.cc{
color: red;
}
</style>
什么是CSS：层叠样式表，多个样式可以层叠为一，如果样式出现冲突，则选择优先级高的
与html的关系：html相当于毛坯房，那CSS就是内部及外部装修
CSS作用：美化效果，表现(CSS)与内容(html)分离， 使得标签的结构更简洁
CSS使用：通过选择器来设置样式属性
选择器格式：选择器{属性：值;属性2：值2;}
- 行内样式：了解 -
<p>段落标签</p>
<div style="color: blue;font-size: 36px;">容器标签</div>
1.2 属性选择器
-- 属性选择器：基本选择器[属性][属性=‘值’]{...} --
<style type="text/css">
h1[name='zs'][id]{
color: red;
}
</style>
<body>
<h1 name='zs' id="xx">标题1</h1>
<h1 name='zs'>标题2</h1>
</body>
1.3 伪元素选择器
伪元素选择器：用在a标签中，针对鼠标不同动作，显示不同效果
<style type="text/css">
a:link{ /* 未访问时的效果 */
color: red;
}
a:hover{ /*鼠标悬停效果 */
color: green;
}
a:active{ /* 触发未放开鼠标的效果 */
color: yellow;
}
a:visited{ /*完成后的效果*/
color: gray;
}
</style>
<body>
<h1><a href="#">点我吧</a></h1>
</body>
1.4 层级选择器
<style type="text/css">
ul a{
color: red;
}
ul>a{
color: green;
}
#xx+li{ /*作用在弟上，自己不起作用 */
color: yellow;
}
</style>
<body>
<ul>
<li><a href="#">床前明月光</a></li>
<li id="xx"><a href="#">疑是地上霜</a></li>
<li><a href="#">举头望明月</a></li>
<a href="#">低头思故乡</a>
</ul>
</body>
2. 样式属性（重点）
2.1 基本样式属性
* 文字属性 *
font-size: 40px;
font-family: "微软雅黑";
font-style: italic; /*斜体 */
font-weight: bold; /* 1~599 细体 600~900粗体*/
* 文本属性 *
color: red;
text-indent: 50px; /* 文本缩进 */
text-decoration: underline; /* 划线修饰 */
/*text-align: center;*/ /*文本对齐 */
line-height: 120px; /*带格式行高 */
/*height: 120px;*/ /*不带格式的行高 */
word-spacing: 30px; /*字间距 */
*1.线条宽度 2.颜色 3.样式：实线,虚线,点线等 *
四个取值依次是： 水平偏移；垂直偏移；模糊值；阴影颜色；
border: 4px blue solid;
text-shadow: 30px 40px 30px gray; * 背景属性组合 *
background: yellow url(../img/005.png) no-repeat;
2.2 列表属性（了解）
<style type="text/css">
/* 列表属性，可以将列表标签的类型改变（了解） */
ol{
list-style-type: disc; /*改无序效果 */
list-style-image: url(../img/002.png);
list-style-position: inside; /*显示到内部 */
}
</style>
<body>
<ol>
<li>草根精神</li>
<li>创新精神</li>
<li>协同精神</li>
<li>奉献精神</li>
</ol>
</body>2.3 尺寸与显示属性
<style type="text/css">
/* 尺寸的属性设置： 宽，高 */
div{
width: 200px;
height: 150px;
border: dashed 3px red;
显示属性：块级显示(默认)：独占一行，行级显示，行级块：不换行，保留宽高
display: inline; /*行级：不换行，且不保留宽高 */
}
</style>
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
</body>
2.3 轮廓属性（了解）
<style type="text/css">
/* 轮廓属性： 与边框属性用法一致（了解） */
div{
width: 200px;
height: 200px;
/*
outline-color: yellow;
outline-style: solid;
outline-width: 4px;
*/
outline: solid 4px yellow; /*轮廓属性组合 */
/*
border-color: blue;
border-width: 3px;
border-style: dashed;
*/
border: dashed blue 3px; /*边框组合*/
}
</style>
<body>
<div>轮廓属性与边框区别</div>
</body>
2.4 浮动属性（重点）
浮动：
标签设计都是基于标准文档流自上而下的排版；如果需要编程横向排列，需要进行浮动
注意：设置了浮动之后，用完了要清除浮动，否则脱离了文档流的设计，排版变得混乱
<style type="text/css">
.one{
width: 100px;
height: 120px;
background-color: red;
/*float: right;*/ /*浮动到右边 */
float: left; /* 向左浮动 */
}
.two{
background-color: green;
float: left; /* 向左浮动 */
}
.three{
background-color: blue;
float: left; /* 向左浮动 */
}
.dd{
width: 100px;
height: 100px;
}
#parent{
width: 299px; /*如果父容器宽度不够，第三个盒子和移到下面 */
overflow:hidden; /*清除浮动2 */
}
#clear{
clear: both; /* 清除浮动 */
}
</style>
<body>
<div id="parent">
<div class="one"></div> <!-- 红色 100px -->
<div class="dd two"></div> <!-- 绿色 100px-->
<div class="dd three"></div> <!--蓝色 100px -->
清除浮动1
<div id="clear"></div>
</div>
<h2>标题2</h2>
</body>
3. 定位与模型
3.1 相对定位
* 定位： 相对定位，绝对定位，固定定位 *
* 相对定位：相对于当前位置的定位，移动后，保留原有位置 *
<style type="text/css">
.dd{
width: 100px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: green;
left: 50px; /*左边间隔50px*/
top: 30px; /*上边移动30px */
position: relative; /* 相对定位 */
}
.three{
background-color: blue;
}
</style>
<body>
<div class="dd one"></div> <!-- 红色 100px -->
<div class="dd two"></div> <!-- 绿色 100px-->
<div class="dd three"></div> <!--蓝色 100px -->
</body>
3.2 绝对定位
* 定位： 相对定位，绝对定位，固定定位 *
* 绝对定位：相对于父容器的定位，如果父容器没有，则最后基于body的定位,且绝对定位，不会保留原有位置 *
<style type="text/css">
.dd{
width: 100px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: green;
left: 50px; /*左边间隔50px*/
top: 30px; /*上边移动30px */
position: absolute; /* 绝对定位 */
}
.three{
background-color: blue;
}
.parent{
border: solid black 2px;
position: relative; /*相对于父容器的定位 */
}
</style>
<body>
<div class="dd parent">
<div class="dd one"></div> <!-- 红色 100px -->
<div class="dd two"></div> <!-- 绿色 100px-->
<div class="dd three"></div> <!--蓝色 100px -->
</div>
</body>3.3 固定定位
* 固定定位：与绝对定位一致，只是固定定位，任何情况下不会移动位置 *
<style type="text/css">
#left {
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 0px;
bottom: 0px;
}
#right {
width: 200px;
height: 200px;
background-color: green;
position: fixed;
right: 0px;
bottom: 0px;
}
#middle{
width: 200px;
height: 200px;
background-color: blue;
position: fixed;
left: 0px;
bottom: 50%;
}
</style>
</head>
<body>
<div id="left">左下</div>
<div id="right">右下</div>
<div id="middle">中间</div>
</body>
3.4 盒子模型
* 边框：将基本值括起来
* 内边距：边框和内容之间的间距，默认为0，会将盒子撑大
* 外边距：边框与其他控件的间距，默认为0
<style type="text/css">
.dd{
width: 100px;
height: 100px;
}
.one{
border: solid 4px red; /* 边框： */
padding-left: 30px; /*内边距左侧间隔30像素 */
/*margin-bottom: 50px; *//*外边距间隔 */
}
.two{
margin-top: 50px;
border: solid 4px green;
}
</style>
<body>
<div class="dd one">第一个盒子</div>
<div class="dd two">第二个盒子</div>
</body>4. HTML的扩展属性
<style type="text/css">
div{
width: 180px;
line-height: 50px;
background-color: red;
text-align: center;
border-radius: 20px; /* 设置圆角弧度*/
box-shadow: 30px 20px 20px gray; /*盒子阴影*/
}
body{
/* 创建单个背景图 */
/* background-image: url(../img/002.png);
background-repeat: no-repeat;
background-size: 100px 150px;*/
/*创建多张背景图 */
background-image: url(../img/002.png),url(../img/005.png);
background-repeat: no-repeat;
background-size: 100px 150px;
background-position: 0px 0px,100px 0px;
}
</style>
<body>
<div>创建圆角属性</div>
</body>
浙公网安备 33010602011771号