跳至主要內容
css的3种使用方式
<!DOCTYPE html>
<html>
  <head>
     <title>css使用方式：3种</title>
     <meta charset="utf-8" />
     <!-- 第三种：css的外部样式，作用于当前整个网站所有引入该css文件的符合的标签-->
     <link href="./style.css" type="text/css" rel="stylesheet" />
     
     <!-- 第二种：css的内部样式，作用于当前脚本所有符合的标签-->
     <style type="text/css">
       div{
          /*color:blue;*/
          width:200px;
       }
     </style>
  </head>
  <body>
     <h1>css使用方式：3种</h1>
     
     <!-- 第一种：css的行内样式，只作用于当前标签 -->
     <div style="color:red;">我是一个块级元素</div>
     <div>我是第二个块级元素</div>
     <!-- 
       css样式的使用要遵循就近原则，谁离得最近，就用谁！ 
          若样式冲突，则采用就近原则，
          若样式不冲突，则采用样式叠加
     -->
  </body>
</html>
游鹄君小于 1 分钟csscss前端
css的选择器

标签,id,类,关联,混合,伪类,属性选择器

<!DOCTYOE html>
<html>
  <head>
     <meta charset="UTF-8"/>
     <title>css的选择器</title>
     <link href="./two.css" type="text/css" rel="stylesheet">
  </head>
  <body>
     <!--1 标签选择器 -->
     <h1>我是h1标签</h1><br/>
     <!-- 标签选择器的弊端是符合标签的所有选择器都会生效,符合的标准非常少! -->
     <!--2 id选择器 -->
     <div id="one">我是div标签</div><br/>
     <!-- id属性的值不能以数字开头,可以以字母开头.只能以字母数字和下划线组成,
     id必须保证唯一性 -->
     <!-- 3class类选择符 -->
     <div class="two">我是class标签</div><br/>
     <!-- 4关联选择器 -->
     <ol id="three">
       <li>涵大姐</li>
       <li>飞大妈</li>
       <li>龙大嫂</li>
       <li>
          <ul class="four">
            <li id="five">龙妹妹</li>
            <li>飞美眉</li>
            <li>涵小妞</li>
          <ul>
       </li>
     </ol>
     <!-- 5混合选择器 -->
     <p>鹅鹅鹅,</p><cite>曲项向天歌,</cite><br/><strong>白毛浮绿水,</strong><br/><u>红掌拨清波!</u>
     <br/><br/>
     
     <!-- id class 标签都有自己的权重值:分别是100 10 1 -->
     <!-- 6伪类选择器 -->
     <a href="./one.html">点击看美女</a><br/><br/>
     <!-- 7css3中属性选择器 -->
     <form action="1.php" method="post">
       账号:<input type="text" name="number" value=""/><br/><br/>
       地址:<input type="text" name="adrees" value=""/><br/><br/>
       年龄:<input type="text" name="age" value=""/><br/><br/>
       爱好:<input type="text" name="hobby" value=""/><br/><br/>
       姓名：<input type="text" name="xm" value="" /><br/><br/>
     </form>
     
  </body>
</html>
游鹄君大约 5 分钟csscss前端
css3的属性

css3属性当中的颜色属性

<!DOCTYPE html>
<html>
  <head>
   <title>css当中的属性：颜色属性</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     div{
      width:200px;
      height:200px;
      
      /*浮动：浮动起来的元素如果是块级元素会失去它所占用的多余的空间*/
      float:left;
      
      /*给所有div的四个边都添加了一个10px的外边距*/
      margin:10px;
      
      border:1px solid red;
     }
     #one{
      /*hsl工业颜色模式：h(色调),s(饱和度),l(亮度)*/
      background-color:hsl(120,100%,50%);
     }
     #two{
      /*hsla工业颜色模式：h(色调),s(饱和度),l(亮度),a(透明度0-1)*/
      background-color:hsla(120,100%,50%,0.1);
     }
     #three{
      /*rgb颜色模式：r[0-255](红色通道),g[0-255](绿色通道),b[0-255](蓝色通道)*/
      background-color:rgb(237,116,237);
     }
     #four{
      /*rgba颜色模式：r[0-255](红色通道),g[0-255](绿色通道),b[0-255](蓝色通道),a[0-1](透明度)*/
      background-color:rgba(237,116,237,0.5);
     }
     #six{
      background-color:blue;
      /*被该属性修饰的元素，元素中所有的内容均透明*/
 
      opacity:0.5;
     }
     
     /*
     #five{
      background:purple;
      position:absolute;
      left:800px;
      top:200px;
      z-index:-1;
     }*/
   </style>
  </head>
  <body>
   <h1>css当中的属性：颜色属性</h1>
   <div id="one"></div>
   <div id="two"></div>
   <div id="three"></div>
   <div id="four"></div>
   <div id="six">fdsafdsaf</div>
   
   <!-- 查看div透明度情况 -->
   <!-- <div id="five"></div> -->
  </body>
</html>
游鹄君大约 6 分钟csscss前端
css3的背景属性

示例1

<!DOCTYPE html>
<html>
  <head>
   <title>css当中的背景属性：background</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     *{
      padding:0px;
      margin:0px;
     }
     body{
      /*设置body的背景颜色*/
      background-color:rgb(123,234,125);
      
      /*修饰背景图片*/
      background-image:url('./images/4.jpg');
      
      /*设置背景图片是否重复平铺*/
      background-repeat:no-repeat;
      
      /*设置背景图片的尺寸(单位：百分比)*/
      background-size:100%;
      
      /*设置背景图片为固定定位(不跟随滚轮滚动)*/
      background-attachment:fixed;
      
     }
     #bbox{
      width:100%;
      height:2000px;
      background-color:rgba(255,255,255,0.5);
     }
   </style>
  </head>
  <body bgcolor="green" style="height:2000px;">
   <div id="bbox">
     <h1 style="color:white;">css当中的背景属性：background</h1>
   </div>
   
   
  </body>
</html>
游鹄君大约 2 分钟csscss前端
css当中的內边距

说明

<!DOCTYPE html>
<html>
  <head>
   <title>css当中的内补丁(内补白、内边距)</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     *{
      padding:0px;
      margin:0px;
     }
     #news{
      width:200px;
      height:200px;
      border:1px solid red;
      
      /*内补丁：直接写一个值会将四个边的补丁都打上(会将原来div的宽高改变)*/
      /*padding:10px;*/
      
      
      /*单独控制每一个边的内边距
      padding-left:10px;
      padding-top:20px;
      padding-right:30px;
      padding-bottom:40px;
      */
      
      /*大招：控制4个边的内边距（上右下左）*/
      /*padding:10px 20px 30px 40px;*/
      
      /*小招：控制对边的内边距（上下、左右）*/
      padding:10px 20px;
     }
   </style>
  </head>
  <body>
   <h1>css当中的内补丁(内补白、内边距)</h1>
   <div id="news">
     <h3>头条新闻</h3>
     <ul>
      <li>1.新闻1</li>
      <li>2.新闻2</li>
      <li>3.新闻3</li>
      <li>4.新闻4</li>
      <li>5.新闻5</li>
      <li>6.新闻6</li>
     </ul>
   </div>
  </body>
</html>
游鹄君大约 1 分钟csscss前端
css当中的外边距
<!DOCTYPE html>
<html>
  <head>
   <title>css属性当中的外边距：margin</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     div{
      width:300px;
      height:300px;
      float:left;
      border:1px solid red;
      /*margin-right:10px;
      margin-bottom:10px;*/
     }
     #one{
      /*设置外边距：四个边都生效*/
      /*margin:10px;*/
      
      /*单独设置每一个边的外边距*/
      /*margin-left:10px;
      margin-top:20px;
      margin-right:30px;
      margin-bottom:40px;*/
      
      /*设置上下、左右的外边距*/
      margin:10px 20px;
      
      /*设置上、右、下、左的外边距*/
      margin:10px 20px 30px 40px;
     }
     #two{
     }
   </style>
  </head>
  <body>
   <h1>css属性当中的外边距：margin</h1>
   <div id="one"></div>
   <div id="two"></div>
  </body>
</html>
游鹄君小于 1 分钟csscss前端
css当中的position定位

提示

定位文档流和浮动流不一样,定位文档流可以覆盖浮动流,浮动流不能定位.

absolute:绝对定位相对于父级(需要父级也是定位的)或(0px,0px)定位.有top/left/right/bottom属性.可以给负值.
绝对定位脱离文档流,可以覆盖浮动流.其他元素会补位.

relattive:相对定位,是相对于元素自身为参考原点定位.相对定位移动后,其他元素不会补位.

fixed:固定定位,是相对于我们可视化的窗口来定位的.所以可以top left right bottom属性用.

游鹄君大约 2 分钟csscss前端
css中folat浮动

示例1

<!DOCTYPE html>
<html>
  <head>
   <title>css当中的float浮动</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     div{
      width:300px;
      height:300px;
      border:1px solid red;
     }
     #left{
      background:blue;
      
      /*让当前元素左浮动*/
      float:left;
     }
     #right{
      background:red;
      
      /*让当前元素右浮动*/
      float:right;
     }
     #center{
      background:yellow;
      
      float:right;
     }
   </style>
  </head>
  <body>
   <h1>css当中的float浮动</h1>
   <div id="left"></div>
   <div id="right"></div>
   <div id="center"></div>
  </body>
</html>
游鹄君大约 2 分钟csscss前端
display隐藏和行块级元素转换

以下是 display 属性可能的值及其对应的描述

属性 描述
none 不显示该元素。
block 元素将作为块级元素渲染，周围有空格。
inline 默认行为（继承自 CSS2.1）。以行内形式渲染元素。
inline-block CSS2.1 新增的值，元素将作为 inline-block 形式渲染。
list-item 该元素将作为列表项显示。
run-in 根据上下文，元素可能以块级或行内形式渲染。
compact 虽然 CSS 支持此值，但不常用且已从 CSS2.1 删除。
marker 同样不常用且已从 CSS2.1 删除的值。
table 元素将作为块级表渲染（类似于 <table> 标签）。
inline-table 元素将作为行内表渲染（类似于 <table>，无周围空格）。
table-row-group 该元素将渲染表体组中的一个或多个表行（类似于 <tbody>）。
table-header-group 该元素将渲染表头组中的一个或多个表行（类似于 <thead>）。
table-footer-group 该元素将渲染表脚组中的一个或多个表行（类似于 <tfoot>）。
table-row 元素将渲染单一行表（类似于 <tr> 标签）。
table-column-group 该元素将渲染表体组中的一个或多个列（类似于 <colgroup>）。
table-column 元素将渲染单个列单元格（类似于 <col> 标签）。
table-cell 元素将渲染单个表单元格（类似于 <td> 和 <th> 标签）。
table-caption 元素将渲染表标题（类似于 <caption> 标签）。
inherit 该元素的显示属性将继承自其父级。
游鹄君大约 2 分钟csscss前端
游鹄君的博客
Copyright © 2025 游鹄君