html-css

发布时间：2023-09-06 01:55责任编辑：苏小强关键词：暂无标签

编写css样式有三种方式：一是直接写在标签的style属性里。二是在head里面 <style>样式</style>
        1、CSS选择器
            - id选择区
                  #i1{
                    background-color: #2459a2;
                    height: 48px;
                  }

            - class选择器 ******
                .pg-body{

　　　　　　}
                  .名称{
                    ...
                  }

                  <标签 class=‘名称‘> </标签>

            - 标签选择器
                    div{
                        ...
                    }


                    所有div设置上此样式

            - 层级选择器（空格） ******
                   .c1 .c2 div{

                   }
            - 组合选择器（逗号） ******
                    #c1,.c2,div{

                   }

            - 属性选择器 ******
                   对选择到的标签再通过属性再进行一次筛选
                   .c1[n=‘n1‘]{ width:100px; height:200px; }

            PS:
                - 优先级，标签上style优先，编写顺序，就近原则

        2. css样式也可以写在单独文件中
            <link rel="stylesheet" href="commons.css" />

        3、注释
            /*   */

        4、边框
             - 宽度，样式，颜色 (border: 4px dotted red;)
             - border-left

        5、
            height，         高度百分比
            width，          宽度像素，百分比
            text-align:ceter, 水平方向居中
            line-height，垂直方向根据标签高度
            color、     字体颜色
            font-size、字体大小
            font-weight 字体加粗

        6、float
            让标签浮起来，块级标签也可以堆叠，可以将多个块级标签并列排放。
            最后要添加：
                <div style="clear: both;"></div>

        7、display
            display: none; -- 让标签消失
            display: inline;
            display: block;
            display: inline-block;
                     具有inline,默认自己有多少占多少
                     具有block，可以设置无法设置高度，宽度，padding margin
            ******
            行内标签：无法设置高度，宽度，padding margin
            块级标签：设置高度，宽度，padding margin


        8、padding 内边距

　　 margin(0,auto) 外边距设置顺序：上－右－下－左

　　9、position: 用于实现多层效果。
        a. fiexd => 固定在页面的某个位置

        b. relative + absolute

            <div style=‘position:relative;‘>
                <div style=‘position:absolute;top:0;left:0;‘></div>
            </div>

      opcity: 0.5 透明度，1最高，为不透明。
  　　 z-index: 层级顺序，层级数大的标签在上方。
  　　 overflow: hidden,auto ，当容器内的图片过多时的处理方法。
　　   hover：/*hover表示这个当鼠标指向该标签时该标签样式的变动。*/

   　　 background-image:url(‘image/4.gif‘); # 默认，div大，图片重复放。
　　   background-repeat: repeat-y;   在X 或Y轴上重复放置。
    　　background-position-x:    调整背景图片的X轴位置
  　　 background-position-y:    调整背景图片的Y轴位置

<div style="width:200px;height:40px;position: relative;"> ???????<input type="text"style="width:160px;height:30px;padding-right: 40px"/> ???????<div style="position:absolute;top:5px;right:5px;width:25px;height:25px; ???????background-image: url(icon.png);background-position-y:-160px;"> ???????????</div></div>

以上代码的效果。

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.herd{ ???????????background-color:ivory; ???????????color:black; ???????????width:100%; ???????????height:50px; ???????????position:fixed; ???????????top:0; ???????????right:0; ???????????left:0; ???????????text-align:center; ???????} ???????.pg-body{ ???????????background-color:slategrey; ???????????color:red; ???????????width:100%; ???????????height:6000px; ???????????margin-top:50px; ???????} ???</style></head><body> ???<div class="herd" >永远置顶的菜单栏。</div> ???<div ?class="pg-body">正文</div></body></html>

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-herder{ ???????????background-color: slategrey; ???????????color:red; ???????????position:fixed; ???????????top:0; ???????????left:0; ???????????right:0; ???????????width:100%; ???????????height:48px; ???????????line-height: 48px; ???????} ???????.pg-body{ ???????????margin-top:50px; ???????????width: 980px; ???????????margin:0 auto; ???????} ???????.w{ ???????????margin:0 auto; ???????????width:980px; ???????} ???????.menu{ ???????????color:blue; ???????????display:inline-block; ???????????padding: 0 10px; ???????} ???????/*hover表示这个当鼠标指向该标签时该标签样式的变动。*/ ???????.pg-herder .menu:hover{ ???????????background-color: aqua; ???????} ???</style></head><body> ???<div class="pg-herder"> ???????<div class="w"> ???????????<a class="menu">logo</a> ???????????<a class="menu">全部</a> ???????????<a class="menu">1024</a> ???????????<a class="menu">抽抽</a> ???????????<a class="menu">大从</a> ???????????<a class="menu">24区</a> ???????</div> ???</div> ???<div class="pg-body"> ???????正文 ???</div></body></html>

html-css

原文地址：https://www.cnblogs.com/lzszs/p/9061727.html

html-css

知识推荐