CSS总结

最新推荐文章于 2023-08-18 20:40:23 发布

原创最新推荐文章于 2023-08-18 20:40:23 发布 · 216 阅读

1 ·

CC 4.0 BY-SA版权

JAVA WEB 专栏收录该内容

9 篇文章

订阅专栏

1、HTML块标签
   div 默认占一行，自动换行
   span 内容显示在同一行中间加空格
2、CSS 层叠样式表
   主要用于       1、美化HTML页面
               2、CSS用于美化与HTML页面分离
       1、CSS简单语法
           <style>
               选择器{
                   属性名称:属性值;
               }
           </style>
       2、选择器
           帮助找到我们要修饰的标签或元素
       元素选择器
           元素的名称{
               属性名称:属性值;
               }
       ID选择器
           以#号开头,ID在整个页面中必须是唯一的
           #ID的名称{
               属性名称:属性值;
           }
       类选择器
           以.开头
           .类的名称{
               属性名称:属性值;
           }
       其他选择器：
           分组选择器
               选择器1，选择器2{属性名：属性值}
               (对多个标签进行分组后统一修饰)
               h1,h2{}
           属性选择器
               a[title]{}
               a[title="123"]{}
               a[href][title]{}
           后代选择器
               祖宗选择器子孙选择器（找出所有后代）
               h1 em{}
           子代选择器
               父选择器子选择器（找出儿子）
               h1 > em{}
           伪类选择器
               多用在<a>标签上
               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 控制左侧距离