css3常用生僻标签

左手的ㄟ右手 2021-09-15 16:04 297阅读 0赞

backgroumd-repeat(repeat-x) 平铺

background-repeat:no-repeat;  设置不平铺

background-position 属性改变图像在背景中的位置:

简写形式

backgrond:（\#ffffff  url()  no-repeat right top）

background-attachment:fixed;  固定背景图像

\------------------------------------------------------------------------------------------------------------------------------

text-align:right;文本左对齐

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

text-decoration:none; 取消下划线

text-decoration:overline;上部下划线

text-decoration:line-through; 金额多少钱划去的下划线

text-decoration:underline; 常规的底部下划线

text-transform:uppercase :uppercase;全部大写

text-transform:uppercase :lowercase; 全部小写

text-transform:uppercase :cpittalize; 单词首字母大写

text-indent:50px;  文本缩进

letter-spacing 设置字间距

text-shadow:2px 2px \#FF0000; 设置文本阴影

white-space:nowrap;规定段落的文本不进行换行

\-------------------------------------------------------------------------------------------------------------------------------font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;

font-style:normal; 正常字体

font-style:italic; 右斜

font-style:oblique; 左斜

\----------------------------------------------------------------------------------------------------------------------------------

list-style-type:circle;  列表前面显示空白小圆点

list-style-type:none;   列表原本样式

list-style-type:square; 列表前面显示空白正方形

list-style-type:lower-alpha; 列表前面显示 abc

list-style-image:url('sqpurple.gif'); 列表前面的点替换成图片

\-------------------------------------------------------------------------------------------------------------------------------

表格

table  tr th  头部  tr td 内容 /table

border-collapse: collapse; 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

vertical-align:bottom;垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

\-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

![70][]

## 所有CSS 轮廓（outline）属性 ##

"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

<table> 
 <tbody> 
  <tr> 
   <th style="border-color:#555555;vertical-align:top;"><span style="color:#333333;">属性</span></th> 
   <th style="border-color:#555555;vertical-align:top;"><span style="color:#333333;">说明</span></th> 
   <th style="border-color:#555555;vertical-align:top;"><span style="color:#333333;">值</span></th> 
   <th style="border-color:#555555;vertical-align:top;"><span style="color:#333333;">CSS</span></th> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><a href="http://www.runoob.com/cssref/pr-outline.html" rel="nofollow"><span style="color:#333333;">outline</span></a></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">在一个声明中设置所有的轮廓属性</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;"><em>outline-color<br> outline-style<br> outline-width</em><br> inherit</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">2</span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><a href="http://www.runoob.com/cssref/pr-outline-color.html" rel="nofollow"><span style="color:#333333;">outline-color</span></a></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">设置轮廓的颜色</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;"><em>color-name<br> hex-number<br> rgb-number</em><br> invert<br> inherit</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">2</span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><a href="http://www.runoob.com/cssref/pr-outline-style.html" rel="nofollow"><span style="color:#333333;">outline-style</span></a></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">设置轮廓的样式</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">none<br> dotted<br> dashed<br> solid<br> double<br> groove<br> ridge<br> inset<br> outset<br> inherit</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">2</span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><a href="http://www.runoob.com/cssref/pr-outline-width.html" rel="nofollow"><span style="color:#333333;">outline-width</span></a></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">设置轮廓的宽度</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">thin<br> medium<br> thick<br><em>length</em><br> inherit</span></td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"><span style="color:#333333;">2</span></td> 
  </tr> 
 </tbody> 
</table>

![70 1][]

\------------------------------------------------------------------------------------------------------------------------------------

## 隐藏元素 - display:none或visibility:hidden ##

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

## CSS Display - 块和内联元素 ##

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

*  <h1>
 *  <p>
 *  <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

*  <span>
 *  <a>

\-----------------------------------------------------------------------------------------------------------------------------------

## absolute 定位 ##

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

## relative 定位 ##

相对定位元素的定位是相对其正常位置。

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

\----------------------------------------------------------------------------------------------------------------------------------

元素浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

\----------------------------------------------------------------------------------------------------------------------------------

## 元素居中对齐 ##

要水平居中对齐一个元素(如 <div>), 可以使用 **margin: auto;**。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

![70 2][]

## 图片居中对齐 ##

要让图片居中对齐, 可以使用 **margin: auto;** 并将它放到 块 元素中:

\--------------------------------------------------------------------------------------------------------------------------------

伪类元素

ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    width: 200px;  
    background-color: \#f1f1f1;  
\}  
  
  
li a \{  
    display: block;  
    color: \#000;  
    padding: 8px 16px;  
    text-decoration: none;  
\}  
  
  
li a.active \{  
    background-color: \#4CAF50;  
    color: white;  
\}  
  
  
li a:hover:not(.active) \{  
    background-color: \#555;  
    color: white;

\------------------------------------------------------------------------------------------------------------------------------

在列表栏中

![70 3][]

可以根据last-child

选择最下面的一个li然后去掉下面的横线边框

ul \{  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    width: 200px;  
    background-color: \#f1f1f1;  
    border: 1px solid \#555;  
\}  
  
  
li a \{  
    display: block;  
    color: \#000;  
    padding: 8px 16px;  
    text-decoration: none;  
\}  
  
  
li \{  
    text-align: center;  
    border-bottom: 1px solid \#555;  
\}  
  
  
li:last-child \{  
    border-bottom: none;  
\}  
  
  
li a.active \{  
    background-color: \#4CAF50;  
    color: white;  
\}  
  
  
li a:hover:not(.active) \{  
    background-color: \#555;  
    color: white;

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    
    li {
        float: left;
        border-right:1px solid #bbb;
    }
    
    li:last-child {
        border-right: none;
    }
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover:not(.active) {
        background-color: #111;
    }
    
    .active {
        background-color: #4CAF50;
    }

![70 4][]

实现导航栏固定到顶部的方法

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover:not(.active) {
        background-color: #111;
    }
    
    .active {
        background-color: #4CAF50;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <li><a href="#contact">联系</a></li>
      <li><a href="#about">关于</a></li>
    </ul>

![70 5][]

常用的导航栏颜色

border: 1px solid \#e7e7e7;  
   background-color: \#f3f3f3;

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        color: #666;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover:not(.active) {
        background-color: #ddd;
    }
    
    li a.active {
        color: white;
        background-color: #4CAF50;
    }

![70 6][]

\-------------------------------------------------------------------------------------------------------------------------------

[点击打开链接][Link 1]   [点击打开链接][Link 2]     [点击打开链接][Link 3]

响应式的宽度600   900的导航栏   响应式下拉导航栏

\------------------------------------------------------------------------------------------------------------------------------

鼠标移入显示下拉显示隐藏

.dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>
    </head>
    <body>
    
    <h2>鼠标移动后出现下拉菜单</h2>
    <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
    
    <div class="dropdown">
      <span>鼠标移动到我这！</span>
      <div class="dropdown-content">
        <p>1111</p>

<p>ww.runoob.com</p>
      </div>
    </div>

![70 7][]

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 100px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        color: black;
        padding: 10px 0px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    </style>
    </head>
    <body>
    
    <h2>下拉菜单</h2>
    <p>鼠标移动到按钮上打开下拉菜单。</p>
    
    <div class="dropdown">
      <button class="dropbtn">下拉菜单</button>
      <div class="dropdown-content">
        <a href="http://www.runoob.com">菜鸟教程 1</a>
        <a href="http://www.runoob.com">菜鸟教程 2</a>
        <a href="http://www.runoob.com">菜鸟教程 3</a>
      </div>
    </div>

![70 8][]

左右点击出现导航栏

[点击打开链接][Link 4]

http://www.runoob.com/try/try.php?filename=trycss\_dropdown\_image

淘宝商城图片放大缩小的例子

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    
    li {
        float: right;
    }
    
    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn {
        background-color: #111;
    }
    
    .dropdown {
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li><a class="active" href="#home">主页</a></li>
      <li><a href="#news">新闻</a></li>
      <div class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <div class="dropdown-content">
          <a href="#">链接 1</a>
          <a href="#">链接 2</a>
          <a href="#">链接 3</a>
        </div>
      </div>
    </ul>
    
    <h3>导航栏上的下拉菜单</h3>
    <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

![70 9][]

\---------------------------------------------------------------------------------------------------------------------------------

http://www.runoob.com/css/css-tooltip.html

鼠标移入出现边框 上下左右

\----------------------------------------------------------------------------------------------------------------

http://www.runoob.com/try/try.php?filename=trycss\_image\_gallery

图片下部边框图片廊

\-------------------------------------------------------------------------------------------------------------------------

响应式的图片

http://www.runoob.com/try/try.php?filename=trycss\_image\_gallery\_responsive

\----------------------------------------------------------------------------------------------------------------------------

电影鼠标移入开灯关灯的效果

http://www.runoob.com/try/try.php?filename=trycss\_transparency

http://www.runoob.com/try/try.php?filename=trycss\_image\_transparency

\-------------------------------------------------------------------------------------------------------------------------------

css3

*  border-radius   圆角边框
 *  box-shadow   盒子阴影
 *  border-image

![70 10][]

div
    {
    	border:15px solid transparent;
    	width:250px;
    	padding:10px 20px;
    }
    
    #round
    {
    	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    	-o-border-image:url(border.png) 30 30 round; /* Opera */
    	border-image:url(border.png) 30 30 round;
    }
    
    #stretch
    {
    	-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
    	-o-border-image:url(border.png) 30 30 stretch; /* Opera */
    	border-image:url(border.png) 30 30 stretch;
    }
    </style>
    </head>
    <body>
    
    
    
    <div id="round">这里，图像平铺（重复）来填充该区域。</div>
    <br>
    <div id="stretch">这里，图像被拉伸以填充该区域。</div>

#rcorners1 {
        border-radius: 25px;
        background: #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px;    
    }
    
    #rcorners2 {
        border-radius: 25px;
        border: 2px solid #8AC007;
        padding: 20px; 
        width: 200px;
        height: 150px;    
    }
    
    #rcorners3 {
        border-radius: 25px;
        background: url(/images/paper.gif);
        background-position: left top;
        background-repeat: repeat;
        padding: 20px; 
        width: 200px;
        height: 150px;    
    }
    </style>
    </head>
    <body>
    
    <p> border-radius 属性允许向元素添加圆角。</p>
    <p>指定背景颜色元素的圆角:</p>
    <p id="rcorners1">圆角</p>
    <p>指定边框元素的圆角:</p>
    <p id="rcorners2">圆角</p>
    <p>指定背景图片元素的圆角:</p>
    <p id="rcorners3">圆角</p>
    
    </body>

![70 11][]

border-radius 也可以通过 px值来改变它的样式

\#example1 \{  
    background: url(img\_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;  
    padding: 15px;  
\}  
</style>  
</head>  
<body>  
  
  
<div id="example1">  
<h1>Lorem Ipsum Dolor</h1>  
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

![70 12][]

[70]: /images/20210813/9ae9b581090543a99f35c84dd40fb0ff.png
[70 1]: /images/20210813/30d192ebb81e42fd8e295f69720f01de.png
[70 2]: /images/20210813/2a63d69468474e3a9d740fabab398720.png
[70 3]: /images/20210813/bec21cce012447378b081e992869e1b2.png
[70 4]: /images/20210813/d5cf0be46dd24773a57b27f397735ee0.png
[70 5]: /images/20210813/bd66780489bc4fdfa1b7cecadaa95495.png
[70 6]: /images/20210813/59bdb42d8f3d4881a3c93466c3aa6dd4.png
[Link 1]: http://https//c.runoob.com/codedemo/3514
[Link 2]: http://https//c.runoob.com/codedemo/3513
[Link 3]: http://https//c.runoob.com/codedemo/452
[70 7]: /images/20210813/363f91bc7a8343a6928dc5d11cd6a976.png
[70 8]: /images/20210813/73adee7660f44f22a0eccb8236b0162c.png
[Link 4]: http://http//www.runoob.com/try/try.php?filename=trycss_dropdown_right
[70 9]: /images/20210813/f479bbad580b48a4b64c10ef1b030610.png
[70 10]: /images/20210813/664ef15840d8462898c368c189ed93ad.png
[70 11]: /images/20210813/b2d370ebd1ba4edcaf16c203b251bb3f.png
[70 12]: /images/20210813/c82ca4ee88d74a06bb2bffe95d98e73c.png