Java学习笔记--CSS笔记

css语法:

a{
font-size:36px;
color:#008800;
}
主要

包含以下三部分内容:

选择器
css样式属性
css样式属性的值

css中的选择器:
1.标签选择器:选中同名的所有标签
语法:标签名称{ css代码}

2.类选择器:选中所有同名的类的标签
使用规则:标签内部必须有class属性
使用语法:
.类名{css代码}
注意:当一个标签同时被标签选择器和类选择器同时选中的时候,类选择器起作用,类选择器相对于标签选择器的优先级更高

3.id选择器
使用规则:标签内必须有id属性,选中对应的id的值的标签进行样式的设定
语法:#id值{css样式}
注意:
1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高
2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签

4.并集选择器
当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取

5.交集选择器:作用是选中某一个标签中的子标签(外标签 内标签)
语法:
外部选择器 内部标签选择器{css代码}
6.伪类选择器:可以控制标签在不同的状态下展示出的不同的样式
link:没有访问过的状态
hover:鼠标划过的状态
active:鼠标按下没有松开的状态
visited:已经访问过的状态

设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
CSS中的图片显示：
需要在css代码中调试background相关的参数;此处要注意的是background-postion的调试时有两个参数，参数1代表，显示的图片需要从哪个位置开始显示(指图片)，参数2代表你的图片展示的位置(指图片的位置)

常用的CSS属性和值

    CSS文本-->
    body{
            /*color：颜色*/
            color:#F00;
            /*字符间距*/
            letter-spacing:10px;
            /*对齐方式*/
            text-align:center;
            /*文本修饰  下划线-underline，  中划线(line-through)   上划线-overline  没有:none*/
            text-decoration:line-through;
            /*单词间距*/
            word-spacing:30px;
        }```

CSS字体-->
            body{
            /*字体类型 
            注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。
            */
            /*
            font-family:"宋体";
            */
            /*字体大小*/
            /* 
            font-size:24px;
            */
            /*字体样式: 正(normal默认)  斜(italic)*/
            /*
            font-style:italic;
            */
            /*字体粗细  bold 加粗*/
            /*
            font-weight:bold;
            */
            /* font: 简写属性 */
            font:italic bold 36px "黑体";
        }


CSS背景-->
                body{
        /*背景颜色*/
            /*
            background-color:#0CF;
            */
            /*背景图片*/
            /*
            background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
            */
            /*设置背景图片是否重复，或如何重复
                not-repeat: 不重复
                repeat-x: x轴重复
                repeat-y: y轴重复
                repeat: x和y轴重复(默认)
            */
            /*
            background-repeat:no-repeat;
            */
            /*设置背景的起始位置*/
            /*
            /*需要画图详细讲解*/
            background-position:top center;
            */
            /*简写属性*/
            background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
            }
    CSS列表-->
        <style type="text/css">
        ul{
            /*列表符号类型*/
            list-style-type:none;
            /*设置列表符号的图片*/
            list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
        }
    </style>
    CSS表格-->
                <style type="text/css">
                table{
                /*合并表格的边框*/
                border-collapse:collapse;
                }
                </style>

盒子模型
定义:
可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离

CSS定位:
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

    div{
        width:100px;
        height:100px;
        border:10px solid #999;}
    #div1{
        background-color:#006;
                              }
    #div2{
        background-color:#0C0;}
    #div3{
        background-color:#3F0;
        /*position:relative;
        top:10px;
        left:10px;*/
        /*
        position:absolute;
        top:20px;
        left:20px;*/
        position:fixed;
        top:200px;
        left:450px;
        }