JAVA12_08学习总结(CSS)

今日内容

1. frameset

框架集标签frameset
        框架集标签不能放在body中
            rows
                --划分页面为上下部分
            cols
                --划分页面为左右部分
        框架标签frame
            框架的名称name属性
                <frame src="#" name="#" />
                    src后代表这个框架中打开的页面链接
                    name后代表这个被打开页面的name属性,用来方便操作
                a标签target指定打开链接地址的方式
                需要结合框架标签中使用,必须指定frame打开
                target="frame框架标签的名称"

2. CSS使用

层叠样式表
    书写的内容样式都是系统样式库里有的内容
        1)行内样式
            在单行语句中书写,控制某一个标签,不好
        2)内部方式
            在head标签中书写样式
        3)外部样式
            在项目文件下创建专门存放CSS文件的地方,导入页面中使用
            导入固定格式
                link标签 href属性="css文件地址" rel="stylesheet"

2.1 CSS选择器

常用的CSS选择器
    标签选择器
        --通过标签的名字控制
        标签名{
            样式操作
        }
    类选择器
        --通过给标签定义class属性来控制,可以定义多个相同的类名--通过.调用
        .类名{
            样式操作
        }
    id选择器
        --通过在标签中指定id值来控制,id值必须唯一!
        #id值{
            样式操作
        }
选择器优先级
    id选择器 > 类选择器 > 标签选择器
    
    并集选择器
        --多个选择器,可以一起使用
        选择器1,选择器2,选择器3{
            样式操作
        }
    伪类选择器--锚伪类
        --描述元素(标签)的状态的
            link
                -鼠标没有经过时的状态
            hover
                -鼠标经过时的状态
            active
                -鼠标点击但没有松开时的状态
            visited
                -鼠标点击过的状态
        选择器名称:状态名称{
            样式操作
        }

2.2 CSS文本样式

文本颜色
    color
        color: #FF8C00;
    text-align:对齐方式
        text-align: center;
    text-decoration 属性用于设置或删除文本装饰
        text-decoration: underline;
    letter-spacing 属性用于指定文本中字符之间的间距
        letter-spacing: 5px;
    font-family:字体类型:系统字体库中的字体
        font-family: "楷体";
    font-size:字体大小 指定像素
        font-size: 50px;
    font-style 属性主要用于指定斜体文本
        font-style: italic ;
    font-weight:字体粗细程度  bold:适当加粗(700)
        font-weight: bold; 

2.3 CSS边框样式

border
    边框颜色
        border-color: red ;
    边框的宽度
        border-width: 3px;
    边框样式
         border-style: solid;   
    border简写属性:将上面三个声明到一个中书写
        border:border-width border-style border-color
    边框圆角  像素弧度大小
        border-radius: 5px;

2.4 CSS浮动属性

浮动
    浮动属性float:控制元素向左或者向右浮动,当前这个元素
    表现的就想块框不存在一样,碰到外边框(浏览器)或者其他的块框就停止!

2.5 CSS列表样式属性

列表样式属性
    list-style-type 属性指定列表项标记的类型
        circle 空心圆
        squqre 空心正方形
        disc 实心圆
        none 去掉前面的标记
    list-style-image 属性指定图片类型作为列表项标记
    border-collapse 属性设置是否将表格边框折叠为单一边框
        属性值:collapse  折叠为单一边框

2.6 CSS背景属性

背景属性
    background-color:背景颜色
            background-image:url(图片地址)
                    如果图片本身尺寸和系统分辨率尺寸不同,图片会重复
            background-repeat:设置背景图像是否重复以及如何重复
                    repeat-x:x轴重复
                    repeat-y:y轴重复
                    no-repeat:设置图像不重复
                    repeat:(默认值)x/y轴都重复(图片本身尺寸和系统分辨率尺寸不同,)
                        
            background-positon:设置图像的起始位置
                        top         left   (默认值)
                        center      center
                        bottom      right
    背景的简写属性--一步走         
    background: background-color background-image  background-repeatbackground-position;

3.盒子模型

主要是实践--布局
    margin
        外边框设置--设置外边框到浏览器边缘的位置
    border
        设置边框属性
            -颜色
            -粗细
    padding
        内边框设置--设置内边框到外边框的位置
    内容