为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
最热 最新
  • 慕桂英1217631 
    文本装饰text-decoration 
      none:定义标准文本           
         例如p{text-decoration:none;}       
      underline：定义文本下一条线           
         例如p{text-decoration:underlin;}       
      overline：定义文本上的一条线           
          例如p{text-decoration:overline;}       
      line-through：定义穿过文本的一条线           
          例如p{text-decoration:lin-through;}
开头空两格text-indent 
          例如：p{text-indent:2em;} 这里2em 表示文字的2倍大小
文字间的行间距(行高)设置：line-height           
          例如：p{line-height:2em;}
文字（字母）间的间隔letter-spacing           
          例如：p{letter-spacing:20px;}
单词间的间距设置word-spacing           
          例如：p{word-spacing:20px;}
块状元素排列方式text-align           
          例如：p{text-align:center;}           
          例如：p{text-align:right;}           
          例如：p{text-align:left;}
长度值：常用单位 px,em,%        
          px像素 (90像素=1英寸)        
          em
    查看全部
    0 采集 收起 来源：长度值

    2022-04-25

  • 慕桂英1217631 
    文字的设置
字体设置 font-family: 
       例如：body{font-family:"宋体";} 
       例如：body{font-family:"微软黑体";}
       或者 body{font-family:"Microsoft Yahei";}
字体大小设置 font-szie: 
       例如：body{font-size:12px;}
字体粗细设置 font-weight:             
        例如：body{font-weight:blod;}
字体颜色设置：color            
       三种设置方式：            
     英文命令颜色  例如：p{color:red;}            
     RGB 颜色 例如：p{color:rgb(133,45,200);}------每一项值都在（0-255)
              例如：p{color:rgb(20%,33%,25%);}-----每一项值都在（0%-100%）
     十六进制颜色  例如：p{color:#00ffff;}
                                -----每一项值由0-255变为十六进制00-ff
字体样式设置 font-style:            
      三种设置方式            
      1正常字体：normal 
           例如：p{font-style:normal;}            
      2 斜体：italic（字体本身有倾斜的样式）
           例如：p{font-style:italic;} 
      3 斜体：oblique(强制将字体倾斜)       
           例如：p{font-style:oblique;}
font样式的简写方式       
         1.使用这一简写方式你至少要指定：font-size和font-family属性 
           其他属性（如：font-weight,font-style,
           font-variant,line-height）如未指定就使用默认值       
          2.在缩写时font-size与line-height中间要加"/"斜杠。      
           例如：body{font-style: italic;                          
                      font-weight: bold;                
                      font-size: 20px;                          
                      line-height: 1.6em;                          
                      font-family: "宋体", sans-serif;}        
                       可缩写为：
                 body{font:italic bold 25px/1.6em "宋体",sans-serif;}
    查看全部
    0 采集 收起 来源：偷个懒 - font样式的简写方式

    2022-04-25

  • 2020064680

    如果一个元素使用了对个选择器，则会按照选择的优先级来给定样式。

    选择器的优先级：内联式>id选择器>类选择器>标签选择器>通配符选择器

    查看全部
    0 采集 收起 来源：别插队啊 - 选择器的优先级

    2022-04-24

  • 2020064680

    有一些css样式不具有继承性，如：border:1px solid red;

    查看全部
    0 采集 收起 来源：继承者 - 样式的继承

    2022-04-24

  • qq_慕少0021725

    水平居中设置-定宽块状元素:

    注意：当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

    定宽块状元素：块状元素的宽度width为固定值。

    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

    eg：

    margin-left:auto;
    margin-right:auto;
    也可以写成：

    margin:20px auto;

    查看全部
    0 采集 收起 来源：水平居中设置-定宽块状元素

    2022-04-24

  • qq_慕少0021725

    水平居中设置-行内元素:

    如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

    查看全部
    0 采集 收起 来源：水平居中设置-行内元素

    2022-04-24

  • qq_慕少0021725

    给子元素设置flex占比

    技术点的解释：

    1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

    2、flex属性的值只能是正整数,表示占比多少。

    3、给子元素设置了flex之后,其宽度属性会失效。

    查看全部
    0 采集 收起 来源：我想占大头 - 给子元素设置flex占比

    2022-04-24

  • qq_慕少0021725

    align-items属性:

    设置纵轴排列方式,本属性定义了项目在交叉轴上的对齐方式。属性值分别为：align-items: flex-start | flex-end | center | baseline | stretch;
    flex-start：默认值，左对齐

    flex-end：交叉轴的终点对齐

    center： 交叉轴的中点对齐

    baseline：项目的第一行文字的基线对齐。

    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

    查看全部
    0 采集 收起 来源：操作一下竖轴- 使用align-items属性设置纵轴排列方式

    2022-04-24

  • qq_慕少0021725

    justify-content属性:
    设置横轴排列方式，本属性定义了项目在主轴上的对齐方式。

    属性值分别为： justify-content: flex-start | flex-end | center | space-between | space-around;
    flex-start：交叉轴的起点对齐

    flex-end：右对齐

    center： 居中

    space-between：两端对齐，项目之间的间隔都相等。

    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    查看全部
    0 采集 收起 来源：操作一下横轴- 使用justify-content属性设置横轴排列方式

    2022-04-24

  • weixin_慕用4322165

     浏览器标题栏 <body>

            <h1>小哥，做头么？</h1>

        </body>

    查看全部
    0 采集 收起 来源：小哥,做头么? - 认识head标签

    2022-04-24

  • qq_慕少0021725

    弹性盒模型 - 弹性盒模型之flex属性:

    display: flex;

    技术点的解释：

    1、设置display: flex属性可以把块级元素在一排显示。

    2、flex需要添加在父元素上，改变子元素的排列顺序。

    3、默认为从左往右依次排列,且和父元素左边没有间隙。

    查看全部
    0 采集 收起 来源：弹性盒模型 - 弹性盒模型之flex属性

    2022-04-24

  • qq_慕少0021725

    Relative与Absolute组合使用:

    使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位,使用position:relative来帮忙可以相对于其它元素进行定位.

    1、参照定位的元素必须是相对定位元素的前辈元素：

    <div id="box1"><!--参照定位的元素-->
       <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
    </div>

    2、参照定位的元素必须加入position:relative;

    3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

    查看全部
    0 采集 收起 来源：Relative与Absolute组合使用

    2022-04-24

  • 慕桂英1217631 
    样式的继承：
 样式不仅应用于某个特定html标签元素，而且可以应用于其后代
 例如：p{color:red;}----通过这个语句下面一段话均会变为红色
 <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。 </p>
 注意有一些css样式是不具有继承性的。
 例如：p{border:1px solid red;}---下面整段文字会有边框
 但是  <span></span>中的内容是没有边框的
 <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
 选择器的优先级：
  内联式>id选择器>类选择器>标签选择器>通配选择器
  权值计算—特殊性:
  为同一个元素设置了不同的css样式代码时，
  元素会按权值来判断使用哪种css样式
  标签选择器的权值为1
  类选择器的权值为10I
  D选择器的权值为100
  继承的权值为0.1
  例如：p{color:red;}/*权值为1*/
  p span{color:green;}/*权值为1+1=2*/
  .warning{ciolor:white;}/*权值为10*/
  p span.warning{color:purple;}/*权值为1+1+10=12*/
  #footer.note p{color:yellow;}/*权值为100+10+1=111*/
  权值越大优先级越高
  选择器的最高层!important
  使用!important可以改变样式的权重
   例如：p{color:red!important;}
    查看全部
    0 采集 收起 来源：为所欲为 - 选择器最高层级!important

    2022-04-24

  • qq_慕少0021725

    层模型之固定定位:

    fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

    查看全部
    0 采集 收起 来源：我就在那不动了-层模型之固定定位

    2022-04-24

  • qq_慕少0021725

    层模型之相对定位:

    如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

    偏移前的位置保留不动:

    虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着

    查看全部
    0 采集 收起 来源：相对于自己的位置-层模型之相对定位

    2022-04-24

首页上一页100101102103104105106下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么？
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程