美文网首页
day03

day03

作者: 孔子曰_f425 | 来源:发表于2017-08-24 17:35 被阅读0次

    A我今天学到了什么

    一.css基本样式

    1.css背景

    背景颜色：background color

    背景图片:backgorund-image。
列： <style>
        p{background-image:url("img/down.jpg");width: 800px;height: 800px}
    </style>

    背景重复：background-repeat。
列：<style>
        p {
            background-image: url("img/down.jpg");width:800px;height:800px;background-repeat:no-repeat}
    </style>

    背景吸附：background-attachment:fixed | scroll

    背景位置：background-position: x y 
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center
简写background: color image repeat  position

    背景图片大小：background-size: x y;
//x表示宽度，y表示高度
//background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;

    2.css文本

    color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
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文本缩进

    3.css字体

    font-family
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}

    font-size:字体大小

    字体样式：font-style:normal | italic

    字体粗细：font-weight:normal | bold | lighter

    行高：line-height

    4.css链接

    四个链接状态：

    1.a:link - 正常，未访问过的链接

    2.a:visited - 用户已访问过的链接

    3.a:hover - 当用户鼠标放在链接上时

    4.a:active - 链接被点击的那一刻

    *若单独设置几个链接，必须遵守如下规则：

    a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

    5css列表样式(针对ul)

    列表样式：无；list-style:none;

    目录样式类型：圆|平方 ；list-style-type:circle|square

    列表样式图片:list-style-image:url("xxx")

    6边框

    border-width  边框的宽度
border-style   边框的样式
border-color 边框的颜色
可以简写成
border： width style color
p{border:1px solid #333}

    *边框-单独设置各边
p
{border-top:1px solid #ccc:}

    7表格

    border-collapse 属性设置表格的边框被折叠成一个单一的边框

table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行

    列子：//HTML
制作表格：
<table>
    <tr>
        <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr>
        <td>天猫商城</td>
       <td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td>
       <td>小米手机</td>
    </tr>
  </table>

    列：//HTML
跨越的行：
<table>
    <tr>
      <th rowspan="3">商城</th>
      <td>衣服</td>
     <td>电脑</td>
    </tr>
    <tr>
        <td>鞋子</td>
       <td>手机</td>
    </tr>
    <tr>
        <td>裤子</td>
        <td>眼睛</td>
    </tr>
</table>

    列：//HTML
跨越的列：
<table>
    <tr>
        <th colspan="2">商城</th>
    </tr>
    <tr>
        <td>天猫商城</td><td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td><td>小米手机</td>
    </tr>

    列：//HTML
有间隔的table：
<table>
    <tr>
       <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr class="one" ></tr>
    <tr>
       <td>TMALL</td>
       <td>iphone</td>
    </tr>
    <tr class="one"></tr>
    <tr>
       <td>JD</td>
       <td>ipad</td>
    </tr>
</table>

    列：//css
   table{
            border-collapse: collapse;
            width:300px;
            text-align: center;
        }
        table,td,th{border:1px solid #333}
        tr{height:50px;}

    8轮廓属性

    轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}

    visibility:透明度{一般取值(o-1)}；   hidden：（事物存在，但是隐藏了）   ；  visible：（事物可以看见）
visibility:hidden|visible

    visibility：hidden 与 display:none的区别
visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）
overflow：hidden（溢出：隐藏）

    二.css样式的继承

    继承:是子元素对父元素的继承

    1width和height

    width
如果子元素不设置宽度，默认情况下继承父元素的宽度

    height
如果父元素不设置高度，默认情况下父元素继承子元素的高度

    2css可以继承的属性

    文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)

    字体相关属性:font-family,font-style,font-size,font-weight,line-height

    列表相关属性:list-style

    表格相关属性:border-collapse

    其他属性:cursor,visibility

    B.我今天掌握了什么

    一.css基本样式

    1.css背景

    背景颜色：background color

    背景图片:backgorund-image。
列： <style>
        p{background-image:url("img/down.jpg");width: 800px;height: 800px}
    </style>

    背景重复：background-repeat。
列：<style>
        p {
            background-image: url("img/down.jpg");width:800px;height:800px;background-repeat:no-repeat}
    </style>

    背景吸附：background-attachment:fixed | scroll

    背景位置：background-position: x y 
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center
简写background: color image repeat  position

    背景图片大小：background-size: x y;
//x表示宽度，y表示高度
//background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;

    2.css文本

    color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
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文本缩进

    3.css字体

    font-family
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}

    font-size:字体大小

    字体样式：font-style:normal | italic

    字体粗细：font-weight:normal | bold | lighter

    行高：line-height

    4.css链接

    四个链接状态：

    1.a:link - 正常，未访问过的链接

    2.a:visited - 用户已访问过的链接

    3.a:hover - 当用户鼠标放在链接上时

    4.a:active - 链接被点击的那一刻

    *若单独设置几个链接，必须遵守如下规则：

    a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

    5css列表样式(针对ul)

    列表样式：无；list-style:none;

    目录样式类型：圆|平方 ；list-style-type:circle|square

    列表样式图片:list-style-image:url("xxx")

    6边框

    border-width  边框的宽度
border-style   边框的样式
border-color 边框的颜色
可以简写成
border： width style color
p{border:1px solid #333}

    *边框-单独设置各边
p
{border-top:1px solid #ccc:}

    7表格

    border-collapse 属性设置表格的边框被折叠成一个单一的边框

table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value    //跨越的列
rowspan:value   //跨越的行

    列子：//HTML
制作表格：
<table>
    <tr>
        <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr>
        <td>天猫商城</td>
       <td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td>
       <td>小米手机</td>
    </tr>
  </table>

    列：//HTML
跨越的行：
<table>
    <tr>
      <th rowspan="3">商城</th>
      <td>衣服</td>
     <td>电脑</td>
    </tr>
    <tr>
        <td>鞋子</td>
       <td>手机</td>
    </tr>
    <tr>
        <td>裤子</td>
        <td>眼睛</td>
    </tr>
</table>

    列：//HTML
跨越的列：
<table>
    <tr>
        <th colspan="2">商城</th>
    </tr>
    <tr>
        <td>天猫商城</td><td>iphone</td>
    </tr>
    <tr>
        <td>京东商城</td><td>小米手机</td>
    </tr>

    列：//HTML
有间隔的table：
<table>
    <tr>
       <th>商城</th>
       <th>电子产品</th>
    </tr>
    <tr class="one" ></tr>
    <tr>
       <td>TMALL</td>
       <td>iphone</td>
    </tr>
    <tr class="one"></tr>
    <tr>
       <td>JD</td>
       <td>ipad</td>
    </tr>
</table>

    列：//css
   table{
            border-collapse: collapse;
            width:300px;
            text-align: center;
        }
        table,td,th{border:1px solid #333}
        tr{height:50px;}

    8轮廓属性

    轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}

    visibility:透明度{一般取值(o-1)}；   hidden：（事物存在，但是隐藏了）   ；  visible：（事物可以看见）
visibility:hidden|visible

    visibility：hidden 与 display:none的区别
visibility：hidden（事物存在，但是隐藏了）
display:none（事物确确实实不存在了）
overflow：hidden（溢出：隐藏）

    二.css样式的继承

    继承:是子元素对父元素的继承

    1width和height

    width
如果子元素不设置宽度，默认情况下继承父元素的宽度

    height
如果父元素不设置高度，默认情况下父元素继承子元素的高度

    2css可以继承的属性

    文本相关属性:color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)

    字体相关属性:font-family,font-style,font-size,font-weight,line-height

    列表相关属性:list-style

    表格相关属性:border-collapse

    其他属性:cursor,visibility

    C.今天没有掌握什么

    没有

    相关文章

      网友评论

          本文标题：day03

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|day03|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！