【Java Web_02】CSS | 易学教程

一、CSS与HTML的连接方式

1. 概述

* Cascading Style Sheets 层叠样式表
* 好处
    降低耦合度
    样式增强

2. 内联样式

① 格式
    <div style="color:red;" >hello world</div>
② 注意
    * 任何标签都有 style 属性【一般不使用内联样式】
    * 作用范围为当前标签体

3. 内部样式

① 格式
    <head>
        <style>
            div {
                color:red;
            }
        </style>
    </head>
    
    <body>
        <div>hello world</div>
    </body>
② 注意    
    * 内部样式 css 写在 head 的 style 中
    * 作用范围为当前页面

4. 外部样式

① 格式    
    /*
    *    css.css文件
    */
    div {
        color:red;
    }
    
    <head>
        <link rel="stylesheet" type="text/css" href="./css.css" />
    </head>
    
    <body>
        <div>hello world</div>
    </body>
② 另
    <style>
        import "./css.css";
    </style>
③ 注意
    * 作用范围为引用了该样式的页面

二、CSS选择器

1. 元素选择器

① 格式    
    div {
        属性:值
        ···
    }
② 注意
    * 使用元素选择器该元素将全部应用该样式
    * 元素选择器等级最低可被id、类选择器覆盖

2. 类选择器

① 格式
    .name {
        属性:值
        ···
    }
    
    <div class="name" > </div>
② 注意    
    * class可以重名
    * 类选择器会被id选择器覆盖

3. id选择器

① 格式    
    #id {
        属性:值
        ···
    }
    
    <div id="id" > </div>
② 注意    
    * id不能重名

3. 其他选择器

① 并集选择器
    .name1,.name2,.name3 { ··· }    /* 多个选择器公用一个 */
② 伪类选择器
    a:link{}           /* 连接访问前的样式 */
    a:visited{}        /* 连接被访问后的样式 */
    a:active{}         /* 连接正在被访问的样式 */
    a:hover{}          /* 鼠标悬浮的样式 */

三、盒子模型

1. 边距

① 外边距
    * margin
② 内边距
    * padding
③ 固定盒子大小
    * box-sizing: border-box;
④ 使用 margin 实现垂直居中
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

2. 浮动

① 左浮动
    * float:left;
② 右浮动
    * float:right;
③ 三个盒子并排
    * 前两个左浮动，后一个右浮动

来源：oschina

链接：https://my.oschina.net/chinaSoftware/blog/3165931

标签

cascading

visited

java

RED