JavaWeb之CSS基础

CSS

CSS简介

• Cascading Style Sheets
• 层叠样式表
• 可以在同一个区域中设置不同的样式效果，可以实现效果的层叠

使用CSS

• CSS不是独立存在的，必须与HTML一起使用
• 行内写法
<p style="background: #00FFFF;height: 20px;"> </p>
• 块写法
<style type="text/css">
    p{
              background: #FF0000;
              color: cadetblue;
              height: 30px;
              50px;
 }</style>

• 使用@import url(CSS资源) -- 暂不支持

• • 导入CSS文件
            <link rel="stylesheet" type="text/css" href="路径"/>

CSS中的选择器

• 选择器是指使用CSS的操作方式
• 标签选择器
• 以次标签命名的样式
• 设置次标签的样式，不管在页面出现多少次标签，都会使用该样式
• 类选择器
• 在HTML标签中有class属性
<p class="我是定义的类名"></p>
<style type="text/css">
      .class{
             background: aqua;

</style>
• ID选择器
在html标签中有id属性使用#
        <style type="text/css">
                  #myp{
                 background: blue;
}</style>

CSS中的扩展选择器

• 关联选择器
• 选择器之间可以嵌套

• 组合选择器
• 对多个不同选择器进行相同样式的设置，用逗号隔开

• 伪元素(伪类)选择器
• 在HTML中已经预定义了一些样式或选择器，可以直接使用
<style type="text/css">

        a:link{/*原始状态*/ background-color:bisque ; }

        a:hover{/*悬停状态*/ background-color: #FFE4C4; }

        a:active{/*点击状态*/ background-color: #0000FF; }

        a:visited{/*点击后状态*/ background-color: #00FFFF; }

</style>

CSS的盒子模式

• 在进行布局钱，需要将数据封装到区块中
• 参数信息
• 边框 ：border
<style type="text/css">
        div{
                 border-top: #00FFFF;
                 border-bottom: #FFE4C4;
                 border-right: #0000FF;
                 border-left:#5F9EA0 ;
                 border: 2px solid red;/*线宽，线类型，线颜色*/
} </style>

• 内边距： padding
• 内边距是盒子内，内容和盒子边框的距离
• 设置区块中的标签元素与区块的距离
<style type="text/css"> div{ padding: 20px; } </style>

• 外边距：margin
<style type="text/css"> div{ margin: 20px; } </style>

• 浮动
• 将某一区域“上浮”
<style type="text/css"> div{ float: left; /*取消浮动*/ clear: both; } </style>