这篇文章主要为大家展示了“CSS常用样式有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS常用样式有哪些”这篇文章吧。
1、CSS
层叠样式表，用于对页面进行美化。
在HTML中的方式有三种：元素内联、页面嵌入、外部引入。
(1)、元素内联：对其特定标签的样式进行设置；
(2)、页面嵌入：在其<style>...</style>中写入样式，对其整个页面内的标签均可设置；
(3)、外部引入：就是写到了一个文件中(.css)，对需要这种样式时引入文件即可。
2、常见样式
(1)、标签选择器
含义：其后出现的所有这种标签都是这种样式
div{
color: red;
}(2)、class选择器
.logo{
background-color: red;
font-size: 18px;
border: 1px;
}
后面调用：<div class = 'logo'></div>(3)、id选择器
注意：每个标签的id号是唯一的。
#logo{
background-color: red;
font-size: 18px;
border: 1px;
}
后面调用：<div id = 'logo'></div>(4)、关联选择器(以空格分开)
div p{
}
后面调用：<div><p></p></div> :就是div标签下面的p标签是这个样式(5)、组合选择器(以,分开)
p, div{
color: red;
}
：后面出现p/div标签的都是这个样式(6)、属性选择器
input[type = 'text']{
}
使用：凡是出现input标签中带有type='text'的都使用这个样式(7)、需要注意的：
<style>
.logo{
background-color:#EEAD0E;font-size:18px;border:1px;
}
.logo a,.logo p{
font-size:56px;
}
以上的含义：在logo下的a/p标签使用这个样式
.logo a,p{
font-size:56px;
}
这个的含义是：在logo下的a标签或所有的p标签使用这个样式
</style>关于以上样式的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>页面一</title>
<link rel = 'stylesheet' href = 'conmon.css' />
<style>
.logo{
background-color: red;
font-size: 18px;
border: 1px;
}
.logo a{
}
#logo{
background-color: red;
font-size: 18px;
border: 1px;
}
div{
color: red;
}
a{
color: red;
}
a, div{
color: red;
}
a div{
}
input[type = 'text']{
}
</style>
</head>
<body>
<div class = 'logo'>
<a></a>
</div>
<div style = 'background-color: red;'>123</div>
<div class = 'logo'>123</div>
<div id = 'logo'>123</div>
<a>
<input />
<div></div>
</a>
</body>
</html>
///////////////////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<title>页面一</title>
<style>
.logo{
background-color:#EEAD0E;font-size:18px;border:1px;
}
.logo a,.logo p{
font-size:56px;
}
<!--
.logo a,p{
font-size:56px;
}
-->
</style>
</head>
<body>
<p>p标签</p>
<div class='logo'>
<div>div标签</div>
<a>a标签</a>
<p>p标签</p>
</div>
</body>
</html>3、背景图片
(1)、原生的引入图片
<p_w_picpath src = '1.png'> #双引号中写的是当前路径下的图片
(2)、背景图片的引入：background;
注意：使用background时，要注意将背景图片放到盒子中，就是必须指明宽、高。
<div ></div>
运行结果
4、边框
border：线的宽度 实/虚(solid/dotted) 颜色；后面可以设置边框的宽度和高度;
margin：与外边框的距离；里面的边框相距外边框的距离;
padding：与内边框的距离；里面的文字距离自己里面边框的距离;
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>页面一</title> <style> </style> </head> <body> <div style = 'border:1px solid red;height:49px;border-top-style:dotted; border-right-style; border-bottom-style; border-left-style'> </div> <div style = 'border:1px solid red;height:200px;'> <div style = 'height:30px;background-color:#999;margin-top:20px; margin-left:20px;margin-right:20px;padding-top:120px;padding-left:250px; padding-bottom:20px'>西安市</div> </div> </body> </html>
运行结果
5、display
常见的就三种形式：
(1)、display:none; #隐藏显示
(2)、display:block; #以块级标签的形式显示
(3)、display:inline; #以内联标签的形式打印
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
<style>
.logo{
display:none;
display:block;
display:inline;
}
</style>
</head>
<body>
<span style = 'display:none;'>不会出现的</span>
<span style = 'display:block;'>内联标签</span>
<div style = 'display:inline;'>块级标签</div>
<div style = 'display:inline;'>块级标签</div>
</body>
</html>运行结果
6、cursor
使用目的：在鼠标到达这个位置时，鼠标会出现不同的风格形式；
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>页面一</title> </head> <body> <span style = 'cursor:pointer;'>小手</span> <span style = 'cursor:wait;'>1</span> <span style = 'cursor:move;'>2</span> <span style = 'cursor:crosshair;'>3</span> <span style = 'cursor:mine;'>4</span> #可以自定义形式(小图标) </body> </html>
这个截图看不出效果，就是不同的形式展现，鼠标在不同的文字上出现时;
7、float
一般使用left和right;
使用目的：划分区域，可以使之飘起来，是以堆叠的形式展现；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
<style>
.clearfix:after{ #在父标签的下面，子标签有float，使用这个class可以让其子标签使用父标签的样式(方法1)
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<!-- float出现时，标签就会出现堆叠
<div style = 'background-color:red;float:left;width:50%;height:120px'>
div1
</div>
<div style = 'background-color:#999;float:right:width:50%;height:120px'>
div2
</div>
-->
<div style = 'background-color:red;' class = 'clearfix'>
<!--只要子类里边哪个有float,哪个就飘起来了,此时你的父标签对其就不起作用了 -->
<div style = 'float:left'>div1</div>
<div style = 'float:left'>div2</div>
<div style = 'clear:both'></div> #解决子标签有float,还能使用父标签样式的方法2
</div>
</body>
</html>运行结果
8、position
常用的就三种：
(1)、position:fixed 固定的位置，不在改变
(2)、position:relative
(3)、position:absolute relative和absolute一般联合使用；
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>页面一</title> </head> <body> <!-- relative absolute fixed固定 有position出现时,块级标签不再占100%,得自己指定宽度 relative absolute 这2个一般一起用,一个距一个有多远 <div style = 'position:fixed;height:45px;width:100%;background-color:#333;top:0px'></div> <div style = 'height:1000px'></div> <div style = 'margin-top:16px;'> <div style = 'float:left;width:20%;background-color:#666;'>left</div> <div style = 'float:left;width:80%;'> <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p> <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p> </div> <div style = 'margin-top:16px;'> <div style = 'width:200px;background-color:#666;position:fixed;top:60px;bottom:0px'>left</div> <div style = 'margin-left:200px'> <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p> <p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p> </div> </div> <div style = 'width:200px;position:fixed;top:0;left:0;bottom:0;background-color:red;'></div> <div style = 'width:200px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div> --> <div style = 'position:relative;width:500px;height:200px;background-color:#ddd'> <div style = 'width:20px;height:20px;position:absolute;top:0;left:0;bottom:0;background-color:red;'></div> <!--此时,absolute只占relative所规划的范围里面 --> </div> </body> </html>
分别看几种运行结果
9、opacity(透明度)
使用目的：一般设置图片/背景颜色的亮度；
.p_w_picpath{
opacity:0.4;
}10、模拟一个对话框
写一个小例子，就是出现对话框，让我们自己选择的那种；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>页面一</title>
<style>
.shade{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:#333;
opacity:0.6;
<!-- z-index:20; 就是看层叠的样式,哪个在上边,通过这个可以自己设置 -->
}
.delete{
position:fixed; <!-- fixed永远是当前页面占50%-->
top:50%;
left:50%;
width:400px;
height:300px;
background-color:white;
margin-left:-200px;
margin-top:150px;
<!-- z-index:10;-->
}
.hide{
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>编辑</th>
</tr>
<tr>
<td>11.11.11.11</td>
<td>删除</td>
</tr>
<tr>
<td>11.11.11.12</td>
<td>删除</td>
</tr>
</table>
<!-- 遮罩层开始-->
<div class = 'shade'></div>
<!-- 遮罩层结束-->
<!-- 删除层开始-->
<div class = 'delete'>
<div>提示</div>
<div>确定要删除吗?</div>
<div>
<input type = 'button' value = '取消' />
<input type = 'button' value = '确定' />
</div>
</div>
<!-- 删除层结束-->
</body>
</html>运行结果
以上是“CSS常用样式有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
