HTML基础学习(二)—CSS

一、CSS概述

    CSS(Cascading Stytle Sheets)层叠样式表,用来定义网页的显示效果。可以解决HTNL代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果。即CSS将网页内容和显示样式分离,提高了显示功能。

 

二、CSS与HTML结合方式

1.style属性方式

     利用标签中style属性来改变每个标签的显示样式。

<body>
<div style="background-color: #76EE00;">这是div区域1</div>
<div>这是div区域2</div>
<span style="background-color: #76EE00;">这是span区域1</span>
<span>这是span区域2</span>
<p style="background-color: #76EE00;">这是p的区域1</p>
<p>这是p的区域2</p>
</body>

结果:

HTML基础学习(二)—CSS

     该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

 

2.style标签方式:(内嵌方式)

     在head标签中加入style标签,对多个标签进行统一修改。

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css">
div {
background-color: #76EE00;
} p{
background-color: #CD00CD;
} </style> </head> <body> <div>这是div区域1</div>
<div>这是div区域2</div>
<span>这是span区域1</span>
<span>这是span区域2</span>
<p>这是p的区域1</p>
<p>这是p的区域2</p>
</body>
</html>

结果:

HTML基础学习(二)—CSS

     该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。

 

3.导入方式

     前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到,那么就用到这种方式。

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url("css/mycss.css"); p{
background-color: #76EE00;
} </style>
</head> <body>
<div>这是div区域1</div>
<div>这是div区域2</div>
<span>这是span区域1</span>
<span>这是span区域2</span>
<p>这是p的区域1</p>
<p>这是p的区域2</p>
</body>
</html>

mycss.css

div {
background-color: #CD00CD;
}

结果:

HTML基础学习(二)—CSS

     url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准。

 

三、CSS基本选择器

     CSS选择器有三种,如下。

     HTML标签名选择器: 使用的是HTML的标签名。

                 class选择器: 使用标签中的class属性。

                      id选择器: 使用的是标签中的id属性。

     由于上面已经介绍过了HTML标签选择器,下面介绍另外两种。

 

1.class选择器

     在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。

(1)相同标签设置不同样式的时候,用class进行区分。

     p.pclass_1 {  color:#FF0000;  }

     p.pclass_2 {  color:#0000FF;  }

     <p class="pclass_1">P标签样式</p>

     <p class="pclass_2">P标签样式</p>

(2)不同标签进行相同设置的时候,用class进行统一定义。

.classname {color:#00FF00;}

<p class=”classname”>P标签样式</p>

<div class=”classname”>DIV标签样式</div>

<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css"> <!-- 相同标签 -->
div.div_hehe{
background-color: #90EE90;
} <!-- 不同标签 -->
.haha{
background-color: #9F79EE;
} </style>
</head> <body>
<div class="haha">这是div区域1</div>
<div class="div_hehe">这是div区域2</div>
<span class="haha">这是span区域1</span>
<span>这是span区域2</span>
<p>这是p的区域1</p>
<p>这是p的区域2</p>
</body>
</html>

结果:

HTML基础学习(二)—CSS

 

2.id选择器

     与class选择器类似,但格式不同,选择器的名称为: #id值

     #pid { color:#0000FF;}

     <p id="pid">P标签样式</p>

<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css"> div#id_div_hehe{
background-color: #ADFF2F;
} </style>
</head> <body>
<div id="id_div_hehe">这是div区域1</div>
<div>这是div区域2</div>
<span>这是span区域1</span>
<span>这是span区域2</span>
<p>这是p的区域1</p>
<p>这是p的区域2</p>
</body>
</html>

结果:

HTML基础学习(二)—CSS

     多个标签同样可以定义相同的id值,但是对于JavaScript对标签元素的获取就会出错。所以形成习惯,确保id值的唯一性对于以后的数据库设计也很有好处。

 

   优先级:   标签名 < class < id < style属性

 

四、CSS扩展选择器

1.关联选择器

     标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。

     p { color:#00FF00;}

     p b{ color:#FF000;}

     <p>P标签<b>刘德华</b>段落样式</p>

     <p>P标签段落</p>

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css"> div{
background-color: #BF3EFF;
} div b{
background-color: #ADFF2F;
} </style>
</head> <body>
<div>这是div<b>区域1</b></div>
<div>这是div区域2</div>
</body>
</html>

结果:

HTML基础学习(二)—CSS

2.组合选择器

    对多个不同选择器进行相同样式设置的时候应用此选择器。

    p,div { color:#FF0000;}

     <p>P标签显示段落。</p>

     <div>DIV标签显示段落</div>

     注: 多个不同选择器要用逗号分隔开。

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css"> div,span{
background-color: #9F79EE;
} </style>
</head> <body>
<div>这是div</div>
<span>这是span</span>
</body>
</html>

结果:

HTML基础学习(二)—CSS

 

五、CSS布局属性

1.漂浮属性

(1)float(漂浮)

HTML基础学习(二)—CSS

(2)clear(清除)

HTML基础学习(二)—CSS

     浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

     由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

    当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。

     HTML基础学习(二)—CSS

     当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

     如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

     HTML基础学习(二)—CSS

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css"> #div1{ border: blue solid 1px;
width: 500px;
} #div2{
float: left;
} </style>
</head> <body> <div id="div1"> <div id="div2">
<img src="1.jpg">
</div> <div id="div3">
如果选择买学区房,就要承受比附近二手房高出每平方米三四万元的价格;移民也并非想移就能移,正所谓牵一发而动全身。然而,无论选择哪一条路,徐女士都还要花大量的精力和财力带女儿参加繁重的课外辅导。 “无论选择哪一样,都要费尽心力及财力,很累,但真的没办法。”徐女士对《第一财经日报》记者表示,“现在加上舞蹈、钢琴等四类教育培训,我们每个月(两个孩子)的教育支出已经8000多元了。” 教育资源的不均衡刺激着几大产业的迅猛发展。首先,学区房一直是房产交易市场的暖冬产品,受二手房升温及“二孩放开”等影响,目前的学区房咨询量明显上升;其次,随着“移民爸爸”放弃买学区房,选择移民的故事被大量转发后,包括徐女士在内的不少家长也动了移民的念头;此外,2007年达到1238亿元规模的课外辅导市场,2015年已经突破了6000亿元。
</div> </div> </body>
</html>

结果:

     HTML基础学习(二)—CSS

 

2.定位属性

(1)position

HTML基础学习(二)—CSS

 

相对定位

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head> <body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>

结果:

      HTML基础学习(二)—CSS

 

绝对定位

<html>
<head>
<title>HTML学习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head> <body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
</body>
</html>

结果:

      HTML基础学习(二)—CSS

上一篇:Unix命令行学习


下一篇:Spring Caching集成Ehcache