day03

作者: 喑哑先生 | 来源:发表于2017-08-14 21:53 被阅读0次

    A今天我学到了什么

    1css背景:

    背景颜色:background-color
    背景图片:backgorund-image
    背景重复:background-repeat
    背景吸附: background-attachment:fixed|scroll
    
    背景位置:background-position: x y 
    //背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
    //参数可以传递left|right|top|bottom|center
    以上可以简写为:
    background: color image repeat  position
    
    举例://HTML
    <div>hello world</div>
    //css
    <style>
    div{
     width:500px;
     height:100px;
     background:pink url(images/logo.png) no-repeat   100px 50px;
    }
    </style> 
    
    背景图片大小:
    background-size: x y;
    //x表示宽度,y表示高度
    background-size:cover;
    //此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
    相当于background-size:100% 100%;
    

    2css文本

    text-align:文本对齐方式
    text-align: right|left|center
    text-decoration:文本修饰
    text-decoration: underline|overline|line-through
    text-transform:文本转换
    text-transform:uppercase|lowercase|capitalize
    text-indent:文本缩进
    
    color:设置字体的颜色
    body {color:red;}
    颜色是通过CSS最经常的指定:
    十六进制值 - 如: #FF0000
    h1 {color:#00ff00;}
    一个RGB值 - 如: RGB(255,0,0)
    h2 {color:rgb(255,0,0);}
    .注:rgba(255,0,255,0.1)a 代表文本透明清晰度
    

    css字体

    font-size:字体大小
    font-style:字体样式
    normal | italic
    font-weight:字体粗细
    normal | bold | lighter
    line-height:行高
    font-family:字体
    p{font-family:Helvetica,Microsoft YaHei}
    { 可设置备用字体 如果浏览器不支持该字体会变成默认字体}
    

    4css链接
    4个链接如下

    a:link - 正常,未访问过的链接
    a:visited - 用户已访问过的链接
    a:hover - 当鼠标悬停在链接上时
    a:active - 链接被点击的那一刻
    特注:a:hover 必须跟在 a:link 和 a:visited后面
    a:active 必须跟在 a:hover后面
    

    5css列表样式(仅限ul)

    list-style:none;{样式 (none:清除小黑点)}
    list-style-type:circle|square(空心圆、方块)
    list-style-image:url("xxx"){图片}
    

    6边框

    border-width : 边框的宽度
    border-style: 边框的样式
    border-color :边框的颜色
    (//以上可以简写成
    border: width style color)
    
    //边框-单独设置各边
    p
    {
        border-top-style:dotted;
        border-right-style:solid;
    }
    
    例://HTML
    <p>
       hello world
    </p>
    //CSS
    p {
        border-top-style: dotted;
        border-right-style: solid;
        border-top-width: 5px;
        border-right-width: 5px;
        border-top-color: red;
        border-right-color: green;
        width: 50px;
        height: 50px;
    }
    

    7表格

    border-collapse:属性设置表格的边框被折叠成一个单一的边框;
    table{border-collapse:collapse}
    //可以在td,th设置这个两个属性
    colspan:value    //跨越的列
    rowspan:value   //跨越的行
    

    8透明

    opacity:透明度
    一般取值(o-1);
    visibility:可见度
    visibility:hidden(事物存在,但是隐藏了)
    visibility:visible(事物可以看见)
    display:none(事物确确实实不存在了)
    

    9继承
    1 width

     width:如果子元素不设置宽,默认情况下继承父级元素的宽度
    (仅仅只是块元素)
    

    2 height

    height:如果父级元素不设置高,默认情况下继承子元素高度
    (父级继承所有子元素高度)
    

    3css可继承的属性

    文本相关属性
    color,text-align,text-decoration,text-transform,
    注:(text-indent)内联元素不能设置此属性
    
    字体相关属性
    font-family:  ;font-size:  ;font-style: ;font-weight:; line-height: ;
    
    列表相关属性:list-style
    
    表格相关属性:border-collapse
    (直接对table进行修饰)
    
    其他属性:
    cursor:
    //光标
    visibility
    //可见度
    

    我今天掌握了什么

    css常用样式

    color:设置字体的颜色
    body {color:red;}
    颜色是通过CSS最经常的指定:
    十六进制值 - 如: #FF0000
    h1 {color:#00ff00;}
    一个RGB值 - 如: RGB(255,0,0)
    h2 {color:rgb(255,0,0);}
    text-align:文本对齐方式
    text-align: right|left|center
    text-decoration:文本修饰
    text-decoration: underline|overline|line-through(上划线/下划线/中划线)
    text-transform:文本转换
    text-transform:uppercase|lowercase|capitalize(大写字母、小写字母/首字母大写)
    text-indent:文本缩进
    

    边框

    border-width : 边框的宽度
    border-style: 边框的样式
    border-color :边框的颜色
    //以上可以简写成
    border: width style color
    p{border:1px solid #333 }
    注://*边框-单独设置各边
    p
    {
        border-top-style:dotted;
        border-right-style:solid;
    }
    

    表格

    border-collapse:属性设置表格的边框被折叠成一个单一的边框;
    *table{border-collapse:collapse}
    //可以在td,th设置这个两个属性
    colspan:value    //跨越的列
    rowspan:value   //跨越的行
    
    文本相关属性:
    color:
    //字体颜色
    text-align:left/right/center
    //文本对齐方向
    text-decoration: underline|overline|line-through
    //文本修饰
    text-indent:
    //文本缩近
    text-transform:uppercase|lowercase|capitalize
    //文本转换
    
    字体相关属性:
    font-family:Helvetica,Microsoft YaHei
    font-style:
    //字体样式
    font-size:
    //字体大小
    font-weight:
    //字体粗细
    line-height:
    //行高
    

    我今天掌握了什么

    基本全掌握了
    

    相关文章

      网友评论

          本文标题:day03

          本文链接:https://www.haomeiwen.com/subject/ofjprxtx.html