跳至主要內容

css3的属性

游鹄君大约 6 分钟csscss前端

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>

css3属性当中的文字/字体 /文本属性

字体属性

<!DOCTYPE html>
<html>
  <head>
   <title>css当中的属性：字体属性</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     #wenzhang{
      width:300px;
      height:300px;
      border:1px solid blue;
     }
     #wenzhang p{
      /*修饰字体大小：单位：像素*/
      /*font-size:18px;*/
      
      /*修饰字体格式：值：你电脑当中存在的字体*/
      /*font-family:'宋体','黑体','微软雅黑';*/
      
      /*修饰字体是否斜体*/
      /*font-style:italic;*/
      
      /*修饰字体是否加粗*/
      /*font-weight:bold;*/
      
      /*设置英文文本为小型的大写字母*/
      /*font-variant:small-caps;*/
      
      /*放个大招(不想添加的样式，可以省略不谢，但是字体格式必写，它是开启大招的点)*/
      /*斜体 英文文本大写 加粗 字号 字体*/
      font:italic small-caps bold 30px '楷体';
     }
   </style>
  </head>
  <body>
   <h1>css当中的属性：字体属性</h1>
   <div id="wenzhang">
     <h1>笑话一则</h1>
     <p>小时候，我有一个梦想，我想上月球，老爸问我为什么？我说因为上月球可以娶嫦娥，炖兔子！吃Banana</p>
   </div>
  </body>
</html>

文本属性

<!DOCTYPE html>
<html>
  <head>
   <title></title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     #wenzhang{
      width:300px;
      height:300px;
      border:1px solid blue;
     }
     #wenzhang h1{
     
      /*设置h1标题进行居中（相对于父级元素）*/
      text-align:center;
      
      /*设置文本的阴影(延x轴偏移量，延y轴偏移量，阴影虚化程度，阴影颜色)*/
      text-shadow:-15px -15px 10px #fc0;
     }
     #wenzhang p{
      
      /*设置文本首行缩进2字符*/
      text-indent:2em;
      
      /*设置文本字符间的间距*/
      /*letter-spacing:10px;*/
      
      /*设置单词间的间距*/
      /*word-spacing:10px;*/
      
      /*设置文本的行高*/
      line-height:40px;
     }
     #wenzhang p span{
     
      /*设置文本内容的线型(underline、line-through、none)*/
      text-decoration:underline;
     }
     
     /*#test{
      em：相对单位，相对于父级元素字体设置的大小
      width:2em;
      height:2em;
      background-color:blue;
     }*/
   </style>
  </head>
  <body style="font-size:20px">
   <h1>css当中的属性：字体属性</h1>
   <div id="wenzhang">
     <h1>笑话一则</h1>
     <p>小时候，我有一个梦想，我想上月球，老爸问我为什么？
     我说因为上月球可以娶<span>嫦娥</span>，炖兔子！吃Banana is a fruit!</p>
   </div>
   
   <!-- <div id="test"></div> -->
  </body>
</html>

文本的行高

<!DOCTYPE html>
<html>
  <head>
   <title>文本的行高</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     #news{
      width:240px;
      height:220px;
      border:1px solid #ddd;
      border-top:3px solid #fc0;
     }
     #news #title{
      width:240px;
      height:35px;
      
      /*当div中的文本只有一行的时候，设置行高与div的高度一致，可以实现垂直居中的效果*/
      line-height:35px;
      border-bottom:1px solid #ddd;
     }
     #news #title a{
      text-decoration:none;
     }
     #news #content{
      width:240px;
      height:185px;
      font-size:12px;
     }
     #news #content img{
      width:105px;
      height:70px;
      float:left;
     }
     #news #content ul{
      list-style:none;
     }
   </style>
  </head>
  <body>
   <h1>模拟新浪新闻框</h1>
   
   <!--新闻框-->
   <div id="news">
   
     <!--标题-->
     <div id="title">
      &nbsp;&nbsp;<a href="">独家体坛</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="">更多>></a>
     </div>
     
     <!--内容-->
     <div id="content">
      <img src="./news.jpg" />
      <ul>
        <li>AI:76人能进季后赛</li>
        <li>AI:76人能进季后赛</li>
        <li>AI:76人能进季后赛</li>
        <li>AI:76人能进季后赛</li>
        <li>AI:76人能进季后赛</li>
        <li>瓜帅确认将卖曼城旧帅宠儿 已通知</li>
        <li>瓜帅确认将卖曼城旧帅宠儿 已通知</li>
      </ul>
     </div>
     
   </div>
   
  </body>
</html>

边框属性

值描述
none定义无边框
hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted定义点状边框（在大多数浏览器中呈现为实线）
dashed定义虚线（在大多数浏览器中呈现为实线）
solid定义实线
double定义双线，双线的宽度等于 border-width 的值
groove定义 3D 凹槽边框，效果取决于 border-color 的值
ridge定义 3D 垄状边框，效果取决于 border-color 的值
inset定义 3D 内嵌边框，效果取决于 border-color 的值
outset定义 3D 外凸边框，效果取决于 border-color 的值
inherit继承父元素的边框样式
<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
 
<body>
<p class="dotted">A dotted border</p>
 
<p class="dashed">A dashed border</p>
 
<p class="solid">A solid border</p>
 
<p class="double">A double border</p>
 
<p class="groove">A groove border</p>
 
<p class="ridge">A ridge border</p>
 
<p class="inset">An inset border</p>
 
<p class="outset">An outset border</p>
</body>
 
</html>
alt text
alt text
<!DOCTYPE html>
<html>
  <head>
   <title>css属性当中的：边框属性</title>
   <meta charset="utf-8" />
   <link href="" type="text/css" rel="stylesheet" />
   <style>
     div{
      width:200px;
      height:200px;
      border:1px solid red;
      float:left;
      margin:10px;
     }
     .one{
      /*修饰边框4个边的颜色*/
      /*border-color:blue;*/
      
      /*单独修饰每一个边框的颜色*/
      border-left-color:pink;
      border-top-color:green;
      border-right-color:blue;
      border-bottom-color:orange;
     }
     
     .two{
      /*修饰边框4个边的粗细(单位：像素)*/
      /*border-width:5px;*/
      
      /*单独修饰每一个边框的粗细*/
      border-left-width:5px;
      border-top-width:10px;
      border-right-width:15px;
      border-bottom-width:20px;
     }
     
     .three{
      border-width:15px;
     
      /*修饰边框4个边的线型(值：solid实线、dashed虚线、dotted点状线、double双线、)*/
      border-style:groove;
      
      /*单独修饰每一个边框的线型*/
      /*border-left-style:solid;
      border-top-style:dashed;
      border-right-style:dotted;
      border-bottom-style:double;*/
     }
     
     .four{
      
      /*设置4个边框圆角*/
      border-radius:100px;
      
      /*设置对角圆角*/
      /*border-radius:50px 80px;*/
      
      /*设置圆角（左上、右上、右下、左下）*/
      /*border-radius:20px 40px 60px 80px;*/
     }
     
     .five{
      /*盒子阴影*/
      box-shadow:5px 5px 12px #ddd;
     }
     .five:hover{
     
      /*清除盒子阴影样式*/
      box-shadow:none;
      
      /*设置鼠标移入样式：pointer小手*/
      cursor:pointer;
     }
   </style>
  </head>
  <body>
   <h1>css属性当中的：边框属性</h1>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
   <div class="four"></div>
   <div class="five"></div>
  </body>
</html>
游鹄君的博客
Copyright © 2025 游鹄君