css笔记

ゝ一世哀愁。 2022-01-10 01:25 248阅读 0赞

1 css注释
      2 /*   */
      3 
      4 css样式使用方式：
      5 1.head中放style标签(内部)
      6 <style>
      7     span{
      8             font-size:50px;
      9 }
     10 </style>
     11 
     12 2.在标签身上加style属性(内联)
     13 <span style="font-size:50px;">aaa</span>
     14 
     15 3.专门写个.css文件(外部)
     16 <link rel="stylesheet" href="" />
     17 .css文件中直接写style标签中间的东西
     18 
     19 css优先级：
     20 1.内联
     21 2.内部或者外部
     22 注：谁离标签近谁优先级高
     23 
     24 css长度:
     25 1.px像素
     26 2.em倍数
     27 
     28 css颜色:
     29 1.#ffffff
     30 2.red,green,blue
     31 
     32 css选择器:
     33 1.标签选择器
     34 *{} //所有标签
     35 span{}
     36 2.
     37     .scls{
     38     font-size:1em;
     39     color:blue;
     40 }
     41     <span class="scls" id="sid"></span>
     42     
     43 3.组合用，隔开
     44     span,.scls{
     45     font-
     46 }
     47 4.#div2 h1{}
     48 
     49 ====================
     50 css样式
     51 1.字体
     52 font 
     53 font-family字体类型(宋体)
     54 font-size:30px
     55 font-weight:bold;//加粗
     56 font-style:normal|italic//斜体
     57 color:
     58 
     59 2.div块
     60 width
     61 height
     62 标准宽度:960-990!!!!!!!!!!!!!!!!!设宽不设高
     63 !!!!!!
     64 background-color:
     65 background-image:url("")
     66 background-repeat:no-repeat | repeat-x//不重复|x轴平铺
     67 background-position:先x后y----top|center|buttom    left|center|right
     68 background-attachment:scroll|fixed//是否跟着页面滚动
     69 
     70 text-decoration:none;
     71 没有下划线
     72 text-align:center//文字对齐
     73 line-height:50px;//行高 设置文字垂直居中
     74 text-indent: //首行缩进
     75 
     76 word-break:break-all;//碰到墙壁(div)折行
     77 letter-spacing://字间距
     78 word-spacing://词间距
     79 
     80 光标属性:
     81 cursor: pointer(小手)|wait|help
     82 
     83 边框属性:
     84 border:5px solid//实线 red
     85 每个body都有初始边框，要想顶左上角，必须*{
     86 margin:0px;
     87 padding:0px;
     88 }
     89 
     90 border-top||-left||-bottom|-right
     91 去除ul li的小点点 ul{list-style-type:none;}
     92 li{
     93     folat:left;//横着
     94     margin-right:100px;
     95 
     96 }
     97 border-style:none|dashed|solid|double|inset|outset
     98 
     99 margin:0px;
    100 padding:0px;
    101 
    102 本来消失的:display:none;
    103 
    104 菜单鼠标一扫过 弹出底下的菜单 离开关闭
    105 $("dt").mouseenter(function()
    106 {
    107     $(this).nextALL("dd").show();
    108 });
    109 $("dl").mouseleave(function()
    110 {
    111     $(this).children("dd");
    112 });
    113 详情见视频 css边框、光标 58分钟
    114 
    115 min-width://最小宽度
    116 
    117 textarea文本框:
    118 resize:none;//不出现拖动的框
    119 
    120 定位：
    121 div居中
    122 margin-left:auto;
    123 margin-right:auto;
    124 or
    125 margin:0 auto//0是上下   auto是左右
    126 margin:上右下左
    127 
    128 position:absolute;绝对定位
    129 top: px;
    130 left: px;
    131 position:relative;
    132 
    133 z-index:  数字越大越高
    134 
    135 
    136 
    137 漂浮:
    138 float:left
    139 
    140 overflow:visible|auto//滚动条
    141 
    142 显示:
    143 display:block;
    144 visiblity:visible;
    145 
    146 隐藏:
    147 占位隐藏:
    148 visibility:hidden;
    149 不占位隐藏:
    150 display:none;

转载于:https://www.cnblogs.com/Duskcl/p/4173386.html