一、CSS简介
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。
样式通常存储在样式表中,⽬的也是为了解决内容与表现分离的问题。
样式层叠次序
⼀般⽽⾔,所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中,其中数字 4 拥有最⾼的 优先权。
1. 浏览器缺省设置 (默认的)
2. 外部样式表 (使用link引入)
3. 内部样式表(style内部)
4. 内联样式(在 HTML 元素内部)
二、CSS基础语法和使用方式
1、css语法
格式: 选择器{属性:值;属性:值;属性:值;....}
p{
color:red;
text-align:center;
}
2、注释
格式: /* ... */
3、如何插⼊样式表
内联⽅式 (直接在html标签后面定义)
<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
特点:仅作⽤于本标签
内部⽅式(在当前页面在head标签中使⽤ 标签来设置css样式)
<style type = "text/css" > ... .css 样式代码 </style>特点:作⽤于当前整个⻚⾯
外部导⼊⽅式(在head标签中使⽤标签导⼊⼀个css⽂件,在作⽤于本⻚⾯,实现css样式设置)
<link href = " ⽂件名 .css" type = "text/css" rel = "stylesheet" />特点:作⽤于当前整个 ⽹站
三、常用选择器
1、html选择器
就是把html标签作为选择符使⽤
p{....} ⽹⻚中所有p标签采⽤此样式
h2{....} ⽹⻚中所有h2标签采⽤此样式
2、class类选择器
使⽤ . 将⾃定义名(类名)来定义的选择符
<html 标签 class=" 类名 ">...</html 标签> (class="类名1 类名2" 同时代表两个类名).mc{color:blue;} /* 凡是 class 属性值为 mc 的都采⽤此样式 */p.ps{color:green;} /* 只有 p 标签中 class 属性值为 ps 的才采⽤此样式 */注意:类选择符可以在⽹⻚中重复使⽤(多个class可以使用同一个类名)
3、id选择器。
和class选择器类似
<html 标签 id="id 名 ">...</html 标签 >#id 名 { 样式 .....}注意:id选择符只在⽹⻚中使⽤⼀次.
指定关系下的选择器
table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/
div>p{...} 选择所有作为div元素得到直接子标签p
div+p 选择紧贴在div元素之后的一个p元素
div~p 选择div元素后⾯的所有兄弟元素p
5、选择器组
几个选择器都能用
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/
6、伪类选(伪元素)择器
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */、
h1:hover{...} 设置元素在其⿏标悬停时的样式
h1:focus{...} 设置元素在其获取焦点时的样式
四、CSS常用属性
1、颜色
可以使用颜色名或者rgb(x,x,x)或者#rrggbb 来定义颜色
RGB 颜⾊ : 红 (R) 、绿 (G) 、蓝 (B)三个颜⾊通道的变化 rba(255,0,0) 或者改成16进制:#ffff0000
设置图片的透明度: img.opacity{ opacity:0.25;}
font-size: 字体⼤⼩:20px,60%基于⽗对象的百分⽐取值
font-family :字体:宋体,Arial
font-weight:字体加粗 :bold
3、文本属性
text-align: ⽂本的位置:left center right
text-decoration: 字体画线:none⽆、underline下画线,line-through贯穿线
text-shadow: ⽂本的⽂字是否有阴影及模糊效果
letter-spacing: ⽂字或字⺟的间距
line-height:⾏⾼
4、背景
background-color: 背景颜⾊
background-image: 背景图⽚ -> url("图片地址")
background-repeat:重复(平铺):repeat 不重复:no-repeat
background-position:定位 (比如想把一个图片放在div的右下角,就可以写成:bottom right)
这里定位也有点像数学上的坐标系,只是它的y轴正方向是向下的,原点在div左上角
可以设置具体移动的像素:x px y px
background-attachment:是否固定背景,scroll: 默认值。背景图像是随对象内容滚动fixed: 背景图像固定
抠图:
还可以使用这种方式来达到,鼠标移到一个图标上显示另一个图标的效果,就是鼠标当移到小狗上面的时候,再把定位移到右边那个彩色的小狗上,就可以实现
5、边框属性
border:宽度 样式 颜⾊;。
border-color;
border-style; 边框样式:solid实现,dotted点状线,dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
border-radius:圆⻆处理 (50%就可以变成一个圆)
box-shadow: 设置或检索对象阴影
6、补白
内补白:
padding: 检索或设置对象四边的内部边距,如padding:10px;
padding-top : 检索或设置对象顶边的内部边距padding-right : 检索或设置对象右边的内部边距padding-bottom :检索或设置对象下边的内部边距padding-left : 检索或设置对象左边的内部边距
外补白:
margin: 检索或设置对象四边的外延边距,如 margin:10px;
margin:5px auto; 上下5px,左右居中
margin-top : 检索或设置对象顶边的外延边距margin-right : 检索或设置对象右边的外延边距。margin-bottom : 检索或设置对象下边的外延边距margin-left : 检索或设置对象左边的外延边距
外补白的时候,两个div之间的补白距离不会叠加,会选择最大的那个。但是如果设置了浮动,就会叠加。
注意:div的设置的宽度是内容宽度,不包括内外补白。如果设置了box-sizing:border-box,就可以包含补白了。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*公共样式的设置*/
h4,body,ul,li,a{padding:0px;margin:0px;}
ul{list-style: none;} /*废除无序列表符号*/
a{color:#222;text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
/*盒子模型的样式*/
.box{
width:260px;
margin:50px;
border: 1px solid #ddfab8;
}
.box .header{
width:100%;
height:26px;
background-image: url(./images/spph_bg.gif);
}
.box .header h4{
font-size:14px;
height:26px;
line-height:26px;
color:green;
padding-left:8px;
}
.box .content{
padding:5px;
}
.box .content ul li.tag{
height:23px;
line-height:23px;
padding-left:30px;
background:url(./images/spph_ico.gif) no-repeat;
}
.box .content ul li.t1{background-position: 8px 6px;}
.box .content ul li.t2{background-position: 8px -19px;}
.box .content ul li.t3{background-position: 8px -43px;}
.box .content ul li.t4{background-position: 8px -67px;}
.box .content ul li.t5{background-position: 8px -90px;}
.box .content ul li.t6{background-position: 8px -113px;}
.box .content ul li.t7{background-position: 8px -137px;}
.box .content ul li.t8{background-position: 8px -162px;}
.box .content ul li.t9{background-position: 8px -185px;}
.box .content ul li.t10{background-position: 8px -209px;}
.box .content ul li a{font-size:13px;}
</style>
</head>
<body>
<div class="box">
<div class="header">
<h4>商品排行</h4>
</div>
<div class="content">
<ul>
<li class="tag t1"><a href="#">6月周年庆促销活动正式开始啦!</a></li>
<li class="tag t2"><a href="#">享不尽的百货盛宴!快来体验吧!</a></li>
<li class="tag t3"><a href="#">红六月手机家电会员回馈专场</a></li>
<li class="tag t4"><a href="#">收纳用品春季热销 方便实用</a></li>
<li class="tag t5"><a href="#">时尚挂表低折扣 精细准确</a></li>
<li class="tag t6"><a href="#">24小限时达,超时即免单</a></li>
<li class="tag t7"><a href="#">注意啦,24小时限时达活动细</a></li>
<li class="tag t8"><a href="#">2010年度家电风云榜评选结果揭晓</a></li>
<li class="tag t9"><a href="#">享不尽的百货盛宴!快来体验吧!</a></li>
<li class="tag t10"><a href="#">上海市企业客户参加以旧换新调整</a></li>
</ul>
</div>
</div>
</body>
</html>
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0px;padding: 0px;}
ul{list-style: none;}
#nav{
height:50px;
background:url(./images/repeat.png);
}
#nav ul li{
width:140px;
float:left;
}
#nav ul li a{
display:block;
width:140px;
height:50px;
line-height: 50px;
text-decoration:none;
font-size:18px;
font-weight: bold;
color:white;
text-align:center;
}
#nav ul li a:hover{
background-color: white;
color: blue;
}
</style>
</head>
<body>
<h1>CSS案例:导航栏的实现</h1>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">商品展示</a></li>
<li><a href="#">新闻列表</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">在线帮助</a></li>
</ul>
</div>
</body>
</html>