三种CSS使用方法:
外部:<link rel="" href="">
内部:<style>
h{
color: red;
}
</style>
行内:<p style="text-align:conter; color:red">文字</p>
基本选择器:
标签选择器:
<style>
h1{
color:red;
background:green;
border-radius: 5em;
padding: 5em;
}
</style>
类选择器:
.zx{
color:red;
}
id选择器:
#zx{
color:red;
}
id选择器>class选择器>标签选择器
使用时 <h(标签) class="类选择" / id="id选择"></h>
层次选择器:
后代选择器:(body下的所有 p标签)
body p{
background:red;
}
子代选择器:(body下的第一代--子代 p标签, 在ul,ol中的p不算)
body>p{
background: green;
}
兄弟选择器:(action下的第一个P标签)
.action+p{
background:blue;
}
相邻选择器:(active下的所有一级p标签)
.active~p{
background:purple;
}
结构伪类选择器:
选中ul第一个和最后一个元素
ul li:first-child{
background: #148aff;
}
ul li:last-child{
background: #148aff;
}
选择父类为p的第一个元素
p:nth-of-type(1){ background: purple; }
属性选择器:
. demo a{
float:left;(浮动:向左)
display:block;(类型:块元素)
height:50px;(高:50像素)
width:50;(宽:50像素)
border-radius:15px;(模型圆角:15像素)
background:red;
text-align:conter;(文字居中)
color:purple;
text-decoration:none;(下划线格式:无)
margin-right:5px;(右外边距:5px)
font:bold 20px/50px Arial;
}
CSS作用及字体样式:
font-family:楷体;(字体)
font-size:50px;(字体大小)
font-weight:bold;(字体粗细)
color:red;(字体颜色)
px--像素单位 em--字体缩进单位
font: oblique bolder 12px "楷体";
字体格式(斜体/正体等) 字体粗细 字体大小 字体格式(楷体/宋体等)
文本样式:
颜色:1.单词 2.RGB 0~F 3.RGBA A 0~1
<style>
p{
color: rgba(0,255,255,0.5);
text-indent: 2em;(首行缩进)
下划线:text-decoration:underline;
中划线:text-decoration:line-through;
上划线:text-decoration:overline;
去下划线:text-decoration:none;
水平对齐:vertical-align:middle;
}
</style>
文本阴影和超链接伪类:
<style>
默认:a{text-decoration:none;
color:#000000;}
鼠标悬停状态:a:hover{color:orange;
font-size:50px;}
鼠标按住未放状态:a:active{color:green;
}
</style>
阴影颜色:
#price{
text-shadow: #3cc7f5 10px 10px 2px;
}
背影图像应用及渐变:
设置div块背景图:
div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("resources/OIP-C2.jpg"); }
图形平铺:repeat-x--水平平铺 repeat-y--垂直平铺 repeat--平铺
.div1{ background-repeat: repeat-x; } .div2{ background-repeat: repeat-y; } .div3{ background-repeat: repeat; }
渐变:
background: #ffffff; background-image: linear-gradient(115deg,#ffffff 0%,#6284ff 50%,#ff0000 100%);
盒子模型及边框应用:
margin:外边距 padding:内边距 border:边框
边框粗细/样式/颜色
border: 1px solid black;
内外边距及div居中:
margin: 0 auto;
margin + border + padding + 内容宽度。
圆角边框及阴影:
圆角边框:border-radius: 50px;(顺时针四个角 配置)
阴影:向右 向下 半径 颜色
box-shadow:20px 10px 2px yellow;
display和浮动:
块级元素:独占一行 h1~h6 div p 列表
行级元素:不独占一行 span img a strong ...
display:inline-block;(行级和块级)
float:right;(向右浮动 脱离父级元素的)
overflow及父级边框塌陷问题:
clear:right;右侧不允许有浮动元素 left(左侧) both(两边)
1.增加父级元素高度
2.增加空标签----clear:both;
3.使用溢出符号: overflow:scroll;
4.父类添加伪类:after
相对定位:(以父级元素做参照)
position: relative;
绝对定位:(以当前浏览器界面做参照)
position: absolute;
固定定位:(固定在界面的某个位置)
position: fixed;
z-index及透明度:
透明度:opacity: 0.5;
z-index:z-index: 777;(取值0~1000)