伪类选择器
<style>
/*未访问时候显示的*/
a:link {
color: #FF0000;
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
input:focus {
outline: none;
background-color: #eee;
}
a {
/*主要用于给a标签去掉自带的下划线 需要掌握*/
text-decoration: none;
}
</style>
伪元素选择器
<style>
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题
</style>
选择器的优先级
<!--
id选择器、类选择器、标签选择器、行内式
-->
<style>
/*
1、选择器相同，书写顺序不相同：
就近原则：谁离标签近就听谁的
2、选择器不同：
行内>id选择器>类选择器>标签选择器
精确度越高越有效
*/
.c1{
color: blue;
}
#d1{
color: red;
}
p{
color: blueviolet;
}
</style>
<body>
<p id="d1" class="c1" style="color: chartreuse">关关雎鸠在河之洲，</p>
<!--<p>窈窕淑女君子好逑.</p>-->
</body>
CSS相关属性
<style>
p{
/*background-color:背景颜色*/
background-color: red;
height: 200px;
width: 400px;
}
span{
background-color: chartreuse;
height: 200px;
width: 100px;
}
/*行内标签无法设置长宽 就算你写了 也不会生效*/
</style>
字体属性
p{
/*第一个生效了用第一个，第一个不生效用后面的*/
font-family: "Adobe 宋体 Std L","微软雅黑 Light",serif;
/*字体大小*/
font-size: 20px;
/*inherit继承父元素的粗细值*!*/
font-weight: inherit;
/*!*直接写颜色英文*!*/
color: red;
/*!*颜色编号*!*/
color: #ee762e;
/*!*三基色 数字 范围0-255*!*/
color: rgb(128,23,45);
/*!*第四个参数是颜色的透明度 范围是0-1*!*/
color: rgba(23, 128, 91, 0.9);
/*字体透明度*/
opacity:0.1
}
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文字属性
<style>
p{
/*居中*/
text-align: center;
/*左对齐*/
text-align: left;
/*右对齐*/
text-align: right;
/*两端对齐*/
text-align: justify;
/*给文字加入下划线*/
text-decoration: underline;
/*给文字加入上划线*/
text-decoration: overline;
/*给文字加入删除线*/
text-decoration: line-through;
/*没有任何装饰*/
text-decoration: none;
/*缩进X个px*/
text-indent: 32px;
}
/*在html中 有很多标签渲染出来的样式效果是一样的*/
</style>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
height: 200px;
background-color: red;
}
#d2{
height: 200px;
background-color: chartreuse;
}
#d3{
height: 200px;
background-color: blueviolet;
}
#d4{
height: 100px;
background-color: red;
/*固定图片*/
background-attachment: fixed;
background-image: url("preview.jpg");
}
#d5{
height: 200px;
background-color: brown;
}
#d6{
height: 200px;
background-color: aqua;
}
#d7{
height: 200px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div id="d1">关关雎鸠，在河之洲</div>
<div id="d2">窈窕淑女，君子好逑</div>
<div id="d3">参差荇菜，左右流之</div>
<div id="d4">窈窕淑女，寤寐求之</div>
<div id="d5">求之不得，寤寐思服</div>
<div id="d6">优哉游哉，辗转反侧</div>
<div id="d7">参差荇菜，左右流之</div>
</body>
</html>
边框
边框属性
● border-width
● border-style
● border-color
<style>
p{
border-width: 5px;
border-style: dashed;
border-color: darksalmon;
border-left-width: 10px;
border-left-style: solid;
border-left-color: blueviolet;
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;
width: 400px;
height: 400px;
border: 5px solid red;
background: red;
border-radius: 25%;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
</style>
display属性(重要)
<style>
#d1{
height: 200px;
background-color: red;
text-align: center;
/*隐形隐藏*/
display: none;
/*将块儿级元素变为行内元素*/
display: inline-block;
/*可见隐藏*/
visibility: hidden;
}
#d2{
height: 200px;
background-color: chartreuse;
text-align: center;
display: inline-block;
}
</style>
<body>
<div id="d1">关关雎鸠，在河之洲</div>
<div id="d2">窈窕淑女，君子好逑</div>
</body>
CSS盒子模型
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /*上下左右全是0
/*margin: 10px 20px; !* 第一个上下 第二个左右*!*/
/*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的*/
}
#dd {
margin: 0 auto; /*只能做到标签的水平居中*/
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
浮动带来的问题以及解决办法
# 父标签塌陷问题，如何解决的
谁塌陷就给谁加一下代码
.clearfix:after {
content: "";
display: block;
clear: both;
}
