绿叶学习网CSS技术细节

2021/7/18 6:09:07

本文主要是介绍绿叶学习网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技术细节的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程