css3常用生僻标签

最新推荐文章于 2024-04-23 17:13:09 发布

前端小99

最新推荐文章于 2024-04-23 17:13:09 发布

阅读量909

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41328247/article/details/80971916

版权

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;垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

所有CSS 轮廓（outline）属性

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

属性	说明	值	CSS
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit	2
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit	2
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	设置轮廓的宽度	thin medium thick length inherit	2

------------------------------------------------------------------------------------------------------------------------------------

隐藏元素 - 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;。

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

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

图片居中对齐

要让图片居中对齐, 可以使用 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;

}

------------------------------------------------------------------------------------------------------------------------------

在列表栏中

可以根据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;
}

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

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>

常用的导航栏颜色

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;
}

-------------------------------------------------------------------------------------------------------------------------------

点击打开链接点击打开链接点击打开链接

响应式的宽度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>

.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>

左右点击出现导航栏

点击打开链接

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>

---------------------------------------------------------------------------------------------------------------------------------

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

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>

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>

前端小99

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3常用生僻标签

backgroumd-repeat(repeat-x)平铺background-repeat:no-repeat; 设置不平铺background-position 属性改变图像在背景中的位置:简写形式backgrond:（#ffffff url() no-repeat right top）background-attachment:fixed;固...
复制链接

扫一扫