JAVA_EE第三章 CSS

一、什么是CSS（Cascading style sheets）层叠样式表

控制HTML的显示方式。
样式，页面布局

二、CSS的引入方式

（一）内联样式（行间样式）：

不建议用。通用性不好，一个只能用在一个标签里。
优先级最高。
内容和样式没有分离

<body>
<p style = "color : red;font-size: 24px;">你好 </p>
</body>

（二）内部样式表

选择器{
    声明1；（属性名：属性值）
    声明2；
}
    <style>
        p{
            color:green;
            font-size: 50;
            }
    </style>

（三）外部样式表（外链样式）

引用：

<link rel="stylesheet" href="css/mystyle.css"/>

编写样式文件(.css)(单独的一个文件，而不是在html文件里）

p{
    color:red;
    font-size:50;
}

（四）优先级

行间样式最高；内部样式和外部样式谁在后边，谁生效

三，书写规范（非行间样式）

（一）颜色

A。简单英文单词如red

B。使用16进制的数据表示

#000000 rgb每个颜色的成分用两位表示。如#ff0000是正红色，#00ff00是正绿色。
特殊：每两位一样的话可以写一个。如红色#f00

C。RGB（0，0，0）0-255调整三原色的分量。

（二）属性值

由多个单词构成必须加双引号。

四、CSS的选择器

（一）基本选择器

1.ID选择器唯一#ID

    <style>
            #p1{
                color:green;
                font-size: 50;
            }
    </style>

2.标签选择器

    <style>
            p{
                color:green;
                font-size: 50;
            }
    </style>

3.类选择器给需要改变的地方增加属性class

    <head>
        <meta charset="utf-8" />
        <title></title>
    <style>
            .red{
                color:green;
                font-size: 50;
            }
    </style>        
    </head>
    <body>
        <p id="p1" clss = "red">你好</p>
        <p clss = "red">春天</p>
        <span clss = "red">bbb</span>
        <h1 clss = "red">ccc</h1>
    </body>

优先级

ID选择器最高，其次是类选择器，标签选择器最低。

（二）属性选择器

[type="text"]{
                border: 1px solid red;
            }

（三）其他选择器

1.后代选择器

    <style>
        <!--后代标签-->
        p span{
            color:chartreuse
        }
    </style>

2.并集选择器，所有基本选择器都可以用(,)并起来选择

    <style>
        p,red {
            color:red;
        }
    </style>

3.交集选择器(.)

    <style>
        p.red {
            color:red;
        }
    </style>

4.通配选择器，给全文都变 *

    <style>
        * {
            color:red;
        }
    </style>

五、CSS的基本样式

（一）文本样式

1.color：文本颜色

2.Text-align:元素中内容水平对齐方式:left/right/center

3.line-height:设置行高:默认nomal,其他的单位为px.

(二)文字样式

1.font-size:文字大小，单位为px

2.font-family:文字样式，如“微软雅黑”

同时有中英文时，设置方式：font-family: “arial”,”华文行楷”;

3.font-weight: 100到900;或light,nomal

    <style>
        div {
            width:300px;
            height: 200px;
            background: #f1f1f1;
            text-align: center;
            line-height: 200px;
            font-size:20px;
            font-family: "arial","华文行楷";
            font-style: italic;
            font-weight: 900;           
        }
    </style>

4.font的简写：顺序是固定的

顺序：font-style | font-variant | font-weight | font-size /line-height | font-family

    <style>
        div {
            font: italic 900 20px/200px "arial","华文行楷" 
        }
    </style>

（三）背景样式

background-color: red;
background-image: url(img/p1.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;

background: red url(img/p1.jpg) no-repeat 20px 20px;

（四）宽高样式

width
height

（五）列表样式

list-style-type: none;

（六）其他样式

display:控制元素的显示
- block
- none

六、“盒子”模型

边框:
border-width: 1px;
border-style: dashed;
border-color: black;

border: 1px dashed black;

内边距: padding
真实内容距离边框之间的距离
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;

padding: 10px 20px 30px 10px;  上右下左

外边距:边框距离父级组件或者其他兄弟组件边框的距离  margin
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
margin: 10px;
margin: 10px 20px 30px 30px;

盒子宽度=内容宽度+2(padding+border+margin)

七、浮动和定位

1.浮动

float：left
脱离文档流，遇到父级组件的左边框或已经浮动的兄弟组建右边框。

2.清除浮动

clear：left/right/both

3.定位：确定位置。

属性：position

Relative：相对定位

没有脱离文档流，通过top/left设置相对于父级容器的位置

absolute：绝对定位

脱离文档流
如果父级组建未设置定位方式，此时将会继续向上级寻找，知道找到window为止。