CSS教程

绿叶学习网CSS技术细节

本文主要是介绍绿叶学习网CSS技术细节，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS技术细节

引入方式

  1. 外联样式表，使用link标签引入，而link 标签放在head标签内

    html {
    background-color: darkgreen;
    color: azure;
    font-size: 20px;
  }
  
  ul {
    background: darkred;
    padding: 10px;
    border: 1px solid black;
  }
  
  li {
    margin-left: 20px;
  }

  2. 内部样式表，css样式在style标签内定义，而style标签是放在head标签内

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSON王晨</title>
    <style type="text/css">
      div{color:red;}
    </style>
  </head>

  <body>
      <div>don't give up</div>
  </body>
</html>

  3. 行内样式表，在标签的style属性中定义的

    <div style="color: blue;">don't give up</div>

选择器

  1. 元素选择器，

    <style type="text/css">
      div{color:red;}
 </style>

  2. id选择器，

    <style type="text/css">
        #lvye{color:red;}
</style>

  3. class选择器,

    <style type="text/css">
        .lv{color:red;}
</style>

  4. 后代选择器,

    <style type="text/css">
        #father1 div {color:red;}
        #father2 span{color:blue;}
</style>

  5. 群组选择器,

     <style type="text/css">
        h3, div, p, span {color:red;}
 </style>

选择器测试

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSON王晨</title>
    <style type="text/css">
      div,p{color:red;}
      .lv{color: chartreuse;font-size: large;}
    </style>
  </head>

  <body>
      <div style="color: blue;">don't give up</div>
      <div class="lv">下面有一段代码，</div>
      <p class="lv">如果我们想要选中所有的div和p，</p>
      <p class="lv">请用至少两种不同的选择器方式来实现，并且选出<strong>最简单</strong>的一种。</p>
      <span>进行选择</span>

  </body>
</html>

字体

  1. font-famliy，字体类型，可以设置不止一种，从左到右顺寻选择

  2. font-size,使用px作为单位

  3. font-weight,lighter,normal.bold,bolder

  4. font-style,斜体，正常

  5. color

    字体测试

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSON王晨</title>
    <style type="text/css">
      p{
        font-family: 'Courier New', Courier, monospace;
        font-size: 14px;
        font-weight: bold;
        color: blue;
      }
    </style>
  </head>

  <body>
      <p>"有规划的人生叫蓝图，没规划的人生叫拼图。"</p>

  </body>
</html>

文本样式

  1. text-indent,首行缩进
  2. text-align，水平对齐
  3. text-decoration，文本修饰，underline下划线，line-through中划线
  4. text-transform，大小写转换，capitalize只将英文单词首字母转换为大写
  5. line-height，行高,顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。
  6. letter-spacing，字母间距
  7. word-spacing，词间距

文本样式测试

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSON王晨</title>
    <style type="text/css">
      p{
        font-family: 'Courier New', Courier, monospace;
        font-size: 14px;
        text-indent: 28px;
      }
      span{
        text-decoration: underline;
        font-weight: bold;
      }
      #lv{
        text-align: center;
        text-transform: uppercase;
      }
    </style>
  </head>

  <body>
      <p>"有规划的人生叫蓝图，没规划的人生叫拼图。"</p>
      <p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p>
      <p id="lv">Remember: no pain, no gain！</p>

  </body>
</html>

边框样式

  1. border-width,宽度

  2. border-style，外观

  3. border-color，颜色

    简写方式

    border:1px solid red;

列表项符号

list-style-type，针对ol或者ul标签的，常用为list-style-type:none;

list-style-image,定义列表项图片

列表项练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      ul{
        list-style-type: none;
        text-decoration: none;
        
      }
      a{
        color: pink;

      }
      div{
        width: 150px;
        height: 300px;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div>
      <ul>
        <li><a href="http://www.baidu.com" target="_blank">Top1:百度</a></li>
        <li><a href="http://www.taobao.com" target="_blank">Top2:淘宝</a></li>
        <li><a href="http://www.xina.com" target="_blank">Top3:新浪</a></li>
        <li><a href="http://www.wangyi.com" target="_blank">Top4:网易</a></li>
        <li><a href="http://www.souhu.com" target="_blank">Top5:搜狐</a></li>
      </ul>

    </div>
      

  </body>
</html>

表格

  1. caption-side,表格标题位置
  2. boeder-collapse,表格边框合并
  3. border-spacing,表格边框间距

图片

  1. 图片对齐,text-align是在img的父元素中对齐的
  2. 文字环绕，float,

背景样式

  1. 背景颜色，background-color；；color是定义文本颜色
  2. 背景图片，背景图片位置，在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）

设置背景图片练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div {
        width: 1000px;
        height: 1000px;
        background-image: url(images/lovefull.png);
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

鼠标样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      a{
        text-decoration: none;
        color: red;
      }
      a:hover{
        text-decoration: underline;
        color: blue;
      }
    </style>
  </head>
  <body>
    <a href="http://www.bytedance.com" target="_blank">字节跳动</a>
  
  </body>
</html>

简介盒子模型

  1. content,块元素定义width,height才有意义

  2. padding，

  3. border

  4. margin

简介浮动

float浮动，clear：both清除浮动

使用浮动布局，实现多列布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #father{
        width: 820px;
        height: 620px;
      }
      #div1{
        width: 800px;
        height: 100px;
        background-color: blue;
        margin: 10px;
      }
      #div2-1{
        width: 595px;
        height: 380px;
        background-color: purple;
        float: left;
        margin:0 0 0 10px;
      }
      #div2-2{
        width: 195px;
        height: 380px;
        margin: 0 10px;
        background-color: purple;
        float: left;
      }
      #div3{
        width: 800px;
        height: 100px;
        margin: 10px;
        background-color: blue;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <div id="div1"></div>
      <div id="div2-1"></div>
      <div id="div2-2"></div>
      <div id="div3"></div>

    </div>>
  
  </body>
</html>

定位布局

  1. fixed，固定定位，相对于浏览器
  2. relative,相对定位，相对于原始位置
  3. absolution，绝对定位，相对于浏览器
  4. static,静态定位（默认值）
这篇关于绿叶学习网CSS技术细节的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航