1.导入方式
<1>内部样式
<style>
h1 {
color: blue;
}
</style>
<2>外部样式
<link rel="stylesheet" href="css/style.css">
<3>行内样式
<h1 style="color: pink">标题</h1>
三种样式的选择符合就近原则。
2.选择器
<1>基本选择器
(1)标签选择器
h1 {
color: pink;
}
</style>
(2)类选择器
.test {
color: orange;
}
(3)id选择器
#test {
color: pink;
}
</style>
<2>层次选择器
(1)后代选择器
body p {
color: pink;
}
(2)子选择器
body > p {
color: aqua;
}
(3)相邻选择器
/*同级，向下*/
.active + p {
color: aquamarine;
}
(4)通用选择器
/*同级，向下所有的*/
.active ~ p {
color: aquamarine;
}
<3>结构伪类选择器
ul li:first-child {
color: aquamarine;
}
<4>属性选择器
/*=:绝对等于*/
a[id=first] {
color: pink;
background: red;
}
/**=：包含*/
a[class*="links"] {
background: cornflowerblue;
}
/*^=:开头*/
a[href^=https] {
background: yellow;
}
/*$=:结尾*/
a[href^=cn] {
background: yellow;
}
3.美化网页元素
<1>span标签
#test {
font-size: 30px;
}
<p>
<span id="test">君不见，</span>黄河之水天上来，奔流到海不复回。
</p>
显示效果为：
<2>字体样式
#test {
/*字体大小*/
font-size: 30px;
/*字体格式*/
font-family: 宋体;
/*字体粗细*/
font-weight: bold;
/*字体颜色*/
color: pink;
/*首行缩进*/
text-indent: 2em;
}
/*下划线*/
.l1 {
text-decoration: underline;
}
/*中划线*/
.l2 {
text-decoration: line-through;
}
/*上划线*/
.l3 {
text-decoration: overline;
}
<3>文本样式
p {
/*文本对齐方式*/
text-align: center;
}
img, span {
/*垂直对齐方式*/
vertical-align: middle;
}
<4>超链接伪类
/*鼠标未做操作时的状态*/
a {
text-decoration: none;
color: blue;
}
/*鼠标悬浮时的状态*/
a:hover {
color: pink;
font-size: 20px;
}
/*鼠标按住未释放时的状态*/
a:active {
color: aqua;
}
/*访问过后的状态*/
a:visited {
color: cadetblue;
}
<5>列表
ul li {
height: 30px;
list-style: none;
/*文本缩进*/
text-indent: 1em;
background: url(../images/1.jpg) 220px 10px no-repeat;
}
<6>背景
div {
width: -moz-max-content;
height: 500px;
border: 1px solid red;
background-image: url(images/1.jpg);
}
.div1 {
/*水平方向重复*/
background-repeat: repeat-x;
}
.div2 {
/*垂直方向重复*/
background-repeat: repeat-y;
}
.div3 {
/*不重复*/
background-repeat: no-repeat;
}
<7>渐变
body {
background: #52ACFF linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);
}