CSS总结

1、HTML块标签
    div 默认占一行,自动换行
    span 内容显示在同一行 中间加空格
2、CSS 层叠样式表
    主要用于        1、美化HTML页面
                2、CSS用于美化与HTML页面分离
        1、CSS简单语法
            
        2、选择器
            帮助找到我们要修饰的标签或元素
        元素选择器
            元素的名称{
                属性名称:属性值;
                }
        ID选择器
            以#号开头,ID在整个页面中必须是唯一的
            #ID的名称{
                属性名称:属性值;
            }
        类选择器
            以.开头
            .类的名称{
                属性名称:属性值;
            }
        其他选择器:
            分组选择器  
                选择器1,选择器2{属性名:属性值} 
                (对多个标签进行分组后统一修饰)
                h1,h2{}
            属性选择器
                a[title]{}
                a[title="123"]{}
                a[href][title]{}
            后代选择器
                祖宗选择器 子孙选择器 (找出所有后代)
                h1 em{}
            子代选择器
                父选择器 子选择器 (找出儿子)
                h1 > em{}
            伪类选择器
                多用在标签上
                a:link{} 未访问
                a:visited{} 已访问
                a:hover{} 鼠标移动到
                a:active{} 选中
        3、CSS的引入方式
                页面内部调用
                    内部样式:直接在style中编辑
                    行内样式:直接在标签内添加style属性进行编辑
                外部文件调用
                    外部样式:通过link标签引入一个外部CSS文件
        4、CSS浮动:浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
                float属性:
                    left
                    right
                clear属性:清除浮动
                    both 两边都不允许浮动
                    left 左边不允许浮动
                    right 右边不允许浮动
            流式布局:便于在小页面浏览器中的阅读
            图片环绕:浮动让文字环绕图片
        5、CSS选择器优先级
            按照选择器搜索精度来编写
                行内样式 > ID选择器 > 类选择器 > 元素选择器
            同一类选择器中的多个选择器,根据就近原则来确定
        6、CSS的盒子模型
            内边距:
                padding-top
                padding-right
                padding-left
                padding-bottom
                
                padding:10px 20px 30px 40px
                注意:其顺序为顺时针,上右下左
            外边距:
                margin-top
                margin-bottom
                margin-left
                margin-right
                
                同上
        7、CSS绝对定位:
            position absolute
            top 控制顶部距离
            left 控制左侧距离
        

你可能感兴趣的:(JAVA,WEB)