前端css样式2
1. 伪类选择器: a标签
<style>
/* a标签没有被访问过时设置的样式 */
a:link{
color:green;
font-size:20px;
}
/* a标签访问中时设置的样式 ,鼠标点击下去，还没有抬起来时*/
a:active{
color:black;
}
/* a标签访问过之后设置的样式 */
a:visited{
color:red;
}
/* 鼠标悬浮到a标签上时设置的样式 ,hover也可以用于其他的标签*/
a:hover{
color:purple;
}
</style>
</head>
<body>
<a href="http://baidu.com">千度</a>
<!--设置属性cursor:pointer 是小手的图样-->
2. 文字装饰:
<style>
a{
text-decoration:none;
}
</style>
</head>
<body>
<!-- href属性等于#号，点击a标签就不会刷新页面,但是会给地址栏后面加个#号 -->
<a href="javascript:void (0)">千度</a>
<!-- href属性等于javascript:void (0);，点击a标签就不会刷新页面，也不会加#号 ，工作中常用-->
<!--<a href="javascript:void (0);">京东</a>-->
<!--<a href="javascript:;">京东</a>-->
3. 相对定位: position:relative; 相对于该标签自己原来的位置进行移动,设置定位的元素，也是脱离文档流的，但是标签原来的位置还占用着
<style>
.d1,.d2,.d3{
width:200px;
height:200px;
}
.d1{
background-color:red;
}
.d2{
background-color:aqua;
/* 相对定位 ：相对于该标签自己原来的位置进行移动，但是定位的元素如果想移动位置，那么需要给四个方向来设置值，top、bottom、left、right*/
/* 设置定位的元素，也是脱离文档流的，但是标签原来的位置还占用着 */
position:relative;
left:100px;
bottom:50px;
}
.d3{
background-color:green
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
/*overflow: hidden;!* 超出部分隐藏 *!*/
overflow: auto;/* 超出部分隐藏,出现滚动条查看内容 */
4. 绝对定位: position:absolute; 只要设置了绝对定位，也是脱离正常文档流，但是标签原来的位置不会再占用了
<style>
.d1,.d2,.d3{
width:200px;
height:200px;
}
.d1{
background-color:red;
}
.d2{
background-color:aqua;
/* 绝对定位，1.只要设置了绝对定位，也是脱离正常文档流，并且标签原来的位置就不在占用了
2.绝对定位的标签位置也是通过四个方向来控制的
3.设置了绝对定位的标签，它的位置是根据如果父级标签或者祖辈设置了相对定位，
那么就按照父级标签或者祖父辈设置了相对定位的标签进行位置的移动，如果父辈或者祖辈没有设置相对定位，
那么就按照整个html文档的位置来进行定位，也就相当于浏览器左上角 */
position:absolute;
top:100px;
}
.d3{
background-color:green
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
5. 固定定位: position: fixed;
<style>
.d1{
height:600px;
background-color:aqua;
}
.d2{
height:600px;
background-color:#ff33;
}
.s1{
position: fixed; /* 固定定位，位置是按照浏览器窗口位置进行定位的，也是通过四个方向的值来进行控制 */
left:40px;
bottom:40px;
width: 80px;
height: 40px;
background-color: green;
line-height: 40px;
text-align: center;
/* 设置圆角 */
border-radius: 5%;
}
/* a标签比较特殊，当给a标签中的文本内容设置样式的时候，必须锁定到a标签才能给它进行设置 */
a{
text-decoration:none;
font-family:'华文行楷';
}
</style>
</head>
<body>
<div class="d1" id="11">
顶部位置
</div>
<div class="d2"></div>
<span class="s1">
<a href="#11">
回到顶部
</a>
</span>
6. 属性选择器:
/* css属性有继承的概念 权重0*/
/* 标签(元素)选择器 权重1*/
/* 类选择器 权重10*/
/* id选择器 权重100*/
/* 内联样式 权重1000*/
/* color:green!important; 无敌! */ 这个不常用
/* 如果优先级相同,按照后面的为准 */
别忘了,class属性的值可以写多个
