JavaWeb_02_CSS学习

CSS简介

Cascading Style Sheets (CSS)层叠样式表:en.wikipedia.org

• 层叠：一层一层的叠加样式
• 样式表：提供更多属性和属性值实现更多样式变化
• css将显示样式和网页内容分离

CSS和HTML的结合方式（四种结合方式）

（1）在每个html标签上面都有一个属性style,把css和html结合在一起
<div style="background-color:red; color:green;">
（2）使用html的一个标签实现<style>标签，写在head里面

<style type="text/css">
    css代码;
</style>

<style type="text/css">
    div {
        background-color: blue;
        color: red;
    }
</style>

（3）在style标签里面使用语句（在某些浏览器下不起作用）

@import url(css文件的路径);

- 第一步，创建一个css文件
    <style type="text/css">
        @import url(div.css);
    </style>

（4）使用头标签link，引入外部css文件

• 第一步，创建一个css文件
• <link rel="stylesheet" type="text/css" href="css文件的路径" />

CSS的基本选择器

• 标签选择器 ；使用标签名作为选择器的名称
• class选择器
  每个html标签都有一个class属性

// css内
.xxx {
        background-color:red;
        color:green;
}
// html内
<div class="xxx">aaa</div>

• id选择器 #名称

CSS基本选择器的优先级

标签内的style属性 > id选择器 > class选择器 > 标签选择器

扩展选择器（了解）

• 关联选择器
  • 设置嵌套标签的样式 div p {}
• 组合选择器
  • 不同的标签具有相同的样式 div,p {}
• 伪元素选择器
  • 超链接的状态
    • 原始：link
    • 悬停：hover
    • 点击：active
    • 点击之后：visited

css的盒子模型

在进行布局前需要报数据封装到一块一块的区域内（div）

• 边框
  eg:border: 2px solid red; //(粗细|样式|颜色) border:统一设置 上 border-top 下 border-bottom 左 border-left 右 border-right
• 内边距
  padding:20px; 使用padding统一设置
  也可以分别设置
  上下左右四个内边距
• 外边距
  margin:20px;
  可以使用margin统一设置
  也可以分别设置
  上下左右四个外边距

CSS的布局的漂浮（了解）

float:
    * 属性值
    left:文本流向对象的右边
    right:文本流向对象的左边

CSS布局的定位（了解）

position:
    * 属性值
        * absolute:
          -> 将对象从文档流中拖出
          -> 可以是top、bottom等属性进行定位
        * relative:
          -> 不会把对象从文档流中拖出
          -> 可以使用top、bottom等属性进行定位

来源：https://www.cnblogs.com/flatcc/p/7202190.html