伪类选择器
<style>
/*未访问时候显示的*/
a:link {
color: #FF0000;
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
input:focus {
outline: none;
background-color: #eee;
}
</style>
伪元素选择器
<style>
/*p:first-letter {*/
/* font-size: 48px;*/
/* color: red;*/
/*}*/
/*在每个<p>元素之前插入内容*/
p:before {
content: "*";
color: red;
}
p:after {
content: "";
color: red;
}
/* 我们后面可以使用它来解决父标签塌陷问题，浮动带来的问题*/
选择器的优先级
比较id、类、标签选择器的优先级
# style样式、外部引入的CSS、行内式
1. 选择器相同的情况下，谁的优先级更高
# 选择器相同，谁离标签越近就听谁的
'''行内式的优先级是最高的!!!'''
2. 选择器不同的情况下，谁的优先级更高
# 比较id、类、标签选择器的优先级
行内式 > id选择器 > 类选择器 > 标签选择器
CSS属性相关
宽和高
给元素设置宽和高------>元素、标签、节点------->意思都一样
# 宽和高默认情况下只能跟块儿级元素设置才有效，行内元素设置无效，但是你可以设置，也不报错，只不过就是没效果
字体属性
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文本颜色
<style>
div {
font-size: 16px;
/*font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;*/
/*font-weight: bold;*/
/*font-weight: bolder;*/
/*font-weight: lighter;*/
font-weight: inherit;
/*color: blue;*/
/*color: #ff6700;*/
/*color: #FF00FF;*/
/*color: #FF01F2;*/
/*color: rgb(255, 0, 0);*/
/*color: rgb(0, 0, 255);*/
/*color: rgb(198, 88, 95);*/
/*color: rgba(100,200,100, 0.2);*/
/*opacity: 0.1; 透明度 */
}
</style>
文字属性
<style>
p {
/*text-align: left;*/
/*text-align: right;*/
/*text-align: center; 掌握这个就行了，只能跟文本内容居中*/
text-align: justify;
text-indent: 28px;
}
a {
/*text-decoration: underline;*/
/*text-decoration: line-through;*/
/*text-decoration: overline;*/
/*text-decoration: none; 掌握的*/
}
</style>
背景属性
<style>
div {
width: 800px;
height: 800px;
border: 1px solid red;
/*background-color: red;*/
/*background-image: url("1234.png");*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-repeat: no-repeat;*/
/*background-position: 200px 350px;*/
/*background-position: center center;*/
/*background: repeat-x red center center url("1234.png") ;*/
/*background: repeat-x red;*/
}
</style>
边框
边框属性
● border-width
● border-style
● border-color
p {
/*border-width: 10px;*/
/*border-style: dashed;*/
/*border-color: green;*/
/*border-left-width: 10px;*/
/*border-left-style: solid;*/
/*border-left-color: red;*/
/*border-top-width: 5px;*/
/*border-top-style: dashed;*/
/*border-top-color: green;*/
/*border-right-width: 5px;*/
/*border-right-style: dashed;*/
/*border-right-color: orange;*/
/* border-bottom-width: 5px;*/
/*border-bottom-style: dashed;*/
/*border-bottom-color: brown;*/
/*border: 5px solid red;*/
width: 400px;
height: 400px;
border: 5px solid red;
background: red;
/*border-radius: 50%;*/
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
display属性(重要)
<style>
#d1 {
width: 100px;
height: 100px;
background: red;
/*display: none; 掌握*/
visibility: hidden;
}
#d2 {
width: 100px;
height: 100px;
background: green;
}
/*.c1 {*/
/* width: 100px;*/
/* height: 100px;*/
/* background: green;*/
/* display: inline-block;*/
/*}*/
/*.c2 {*/
/* width: 100px;*/
/* height: 100px;*/
/* background: orange;*/
/* display: inline-block;*/
/*}*/
</style>
CSS盒子模型
举例：以快递盒与快递盒为例
快递盒与快递盒之间的距离称为是外边距----------->margin值
快递盒与内部的物品之间的距离称为是内边距---------->padding值
快递盒子的厚度称之为是边框--------------->border表示
物品的实际大小称之为是内容-------------->content来表示
# 调整标签与标签之间的距离使用的是margin值
float浮动
# 浮动可以让两个块儿级元素放在一行
浮动带来的影响
# 父标签塌陷问题，如何解决的
谁塌陷就给谁加一下代码
.clearfix:after {
content: "";
display: block;
clear: both;
}