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;
}

秒客网

Java学习笔记--CSS笔记

相关文章