CSS(Cascading Style Sheets): 层叠样式表
section 作用 : 美化Html页面
section 创建
优先级:
浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上
行间样式表)Inline style > 内部样式)Internal style sheet >
外部样式)External style sheet > 浏览器默认样式
!important:
不要使用!不要使用!不要使用!
被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里.
1. 行间样式表
<div style = "width:200px; height : 100px; border:1px solid red;"> 123 </div>
2. 内部样式表
<head>
<title> html学习 </title>
<style type="text/css">
#aaa{width:400px;height:300px;border:2px solid blue; }
</style>
</head>
<div id="aaa">456</div>
3. 外部样式表 样式代码专门放到一个文件中, 由html网页调用
css文件:abc.css {width:200px;height:150px;border:3px solid yellow;background:pink;}
html文件: <link rel="stylesheet" type="text/css" href="abs.css">
section 选择器
1. 标签选择器
p{font-size : 30px;color:red;}
div{width:200px;height:30px;border:1px solid red}
2. id选择器
#aaa{color:green }
3. 类选择器
.cls{text-decoration:underline}
section 分组和嵌套选择器
1. 分组选择器
h1,h2,p
{
color:green;
}
2. 嵌套选择器
p{ }: 为所有 p 元素指定一个样式.
.marked{ }: 为所有 class="marked" 的元素指定一个样式.
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式.
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式.
section 组合选择符
1. 后代选择器(以空格分隔): 后代选择器用于选取某元素的后代元素(包扩在其它元素中)
div p{background-color:yellow;}
2. 子元素选择器(以大于号分隔):子元素选择器(Child selectors)只能选择作为某元素子元素的元素
div>p{background-color:yellow;}
3. 相邻兄弟选择器(以加号分隔):选择紧接在另一元素后的元素,且二者有相同父元素
div+p{background-color:yellow;}
4. 普通兄弟选择器(以破折号分隔):后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
div~p{background-color:yellow;}
section 伪类和伪元素
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id,class,属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式.由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类.
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多.实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母),第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作.它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素.
p:first-line {color:#ff0000;font-variant:small-caps;}
section Display(显示)与Visibility(可见性)
1. display属性设置一个元素应如何显示
display:none 隐藏某个元素,且隐藏的元素不会占用任何空间.
也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失
2. visibility属性指定一个元素应可见还是隐藏.
visibility:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被隐藏了,但仍然会影响布局
section 多列属性
CSS3 可以将文本内容设计成像报纸一样的多列布局
.newspaper{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */}
h2{column-span:all;-webkit-column-span:all; /* Safari and Chrome */}
section 动画
.solarsys{
width: 800px;
height: 800px;;
position: relative;
margin: 0 auto;
background-color: #000000;
padding: 0;
transform: scale(1);
}
/*太阳*/
.sun {
left:357px;
top:357px;
height: 90px;
width: 90px;
background-color: rgb(248,107,35);
border-radius: 50%;
box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
position: absolute;
margin: 0;
}
/*水星*/
.mercury {
left:337.5px;
top:395px;
height: 10px;
width: 10px;
background-color: rgb(166,138,56);
border-radius: 50%;
position: absolute;
transform-origin: 62.5px 5px;
animation: rotate 1.5s infinite linear;
}
/*水星轨道*/
.mercuryOrbit {
left:342.5px;
top:342.5px;
height: 115px;
width: 115px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
/*金星*/
.venus {
left:309px;
top:389px;
height: 22px;
width: 22px;
background-color: rgb(246,157,97);
border-radius: 50%;
position: absolute;
transform-origin: 91px 11px;
animation: rotate 3.84s infinite linear;
}
/*金星轨道*/
.venusOrbit {
left:320px;
top:320px;
height: 160px;
width: 160px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
/*地球*/
.earth {
left:266.5px;
top:391px;
height: 18px;
width: 18px;
background-color: rgb(115,114,174);
border-radius: 50%;
position: absolute;
transform-origin: 134px 9px;
animation: rotate 6.25s infinite linear;
}
/*地球轨道*/
.earthOrbit {
left:275px;
top:275px;
height: 250px;
width: 250px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
/*火星*/
.mars {
left:222.5px;
top:392.5px;
height: 15px;
width: 15px;
background-color: rgb(140,119,63);
border-radius: 50%;
position: absolute;
transform-origin: 177.5px 7.5px;
animation: rotate 11.75s infinite linear;
}
/*火星轨道*/
.marsOrbit {
left:230px;
top:230px;
height: 340px;
width: 340px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
/*木星*/
.jupiter {
left:134px;
top:379px;
height: 42px;
width: 42px;
background-color: rgb(156,164,143);
border-radius: 50%;
position: absolute;
transform-origin: 266px 21px;
animation: rotate 74.04s infinite linear;
}
/*木星轨道*/
.jupiterOrbit {
left:155px;
top:155px;
height: 490px;
width: 490px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
/*土星*/
.saturn {
left:92px;
top:387px;
height: 26px;
width: 26px;
background-color: rgb(215,171,68);
border-radius: 50%;
position: absolute;
transform-origin: 308px 13px;
animation: rotate 183.92s infinite linear;
}
/*土星轨道*/
.saturnOrbit {
left:105px;
top:105px;
height: 590px;
width: 590px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
/*天王星*/
.uranus {
left:41.5px;
top:386.5px;
height: 27px;
width: 27px;
background-color: rgb(164,192,206);
border-radius: 50%;
position: absolute;
transform-origin: 358.5px 13.5px;
animation: rotate 524.46s infinite linear;
}
/*天王星轨道*/
.uranusOrbit {
left:55px;
top:55px;
height: 690px;
width: 690px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
/*海王星*/
.neptune {
left:10px;
top:390px;
height: 20px;
width: 20px;
background-color: rgb(133,136,180);
border-radius: 50%;
position: absolute;
transform-origin: 390px 10px;
animation: rotate 1028.76s infinite linear;
}
/*海王星轨道*/
.neptuneOrbit {
left:20px;
top:20px;
height: 760px;
width: 760px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
/*margin: 100px;*/
/*transform-origin: -75px -75px;*/
/*animation: rotate 4s infinite linear;*/
margin: 0px;
padding: 0px;
}
@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
<div class="solarsys">
<!--太阳-->
<div class='sun'></div>
<!--水星轨道-->
<div class='mercuryOrbit'></div>
<!--水星-->
<div class='mercury'></div>
<!--金星轨道-->
<div class='venusOrbit'></div>
<!--金星-->
<div class='venus'></div>
<!--地球轨道-->
<div class='earthOrbit'></div>
<!--地球-->
<div class='earth'></div>
<!--火星轨道-->
<div class='marsOrbit'></div>
<!--火星-->
<div class='mars'></div>
<!--木星轨道-->
<div class='jupiterOrbit'></div>
<!--木星-->
<div class='jupiter'></div>
<!--土星轨道-->
<div class='saturnOrbit'></div>
<!--土星-->
<div class='saturn'></div>
<!--天王星轨道-->
<div class='uranusOrbit'></div>
<!--天王星-->
<div class='uranus'></div>
<!--海王星轨道-->
<div class='neptuneOrbit'></div>
<!--海王星-->
<div class='neptune'></div>
</div>