分组与嵌套
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color:orange;
}
选择器补充
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: black;
}
a:link { /*访问之前的状态*/
color: red;
}
a:hover { /*需要记住*/
color: aqua; /*鼠标悬浮态*/
}
a:active {
color: black; /*鼠标点击不松开的状态 激活态*/
}
a:visited {
color: darkgray; /*访问之后的状态*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">单纯的超链接</a>
<p>点点点</p>
<input type="text">
</body>
</html>
伪元素选择器
p:first-letter { /*指定文本第一个字符的样式*/
font-size: 48px;
color: orange;
}
/*before与after添加的内容用户均不可选中*/
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after { /*在文本末尾 同css添加内容*/
content: '雨露均沾';
color: orange;
}
/*ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题*/
选择器优先级
<!--
id选择器
类选择器
标签选择器
行内式
1.选择器相同
根据从上到下的顺序执行，上面的css样式会被下面覆盖
2.选择器不同
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1.选择器相同
根据从上到下的顺序执行，上面的css样式会被下面覆盖
2.选择器不同
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
*/
#d1 {
color: aqua;
}
.c1 {
color: orange;
}
p {
color: red;
}
</style>
<!--<link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">选择器优先级</p>
</body>
</html>
CSS属性
长宽属性
div {
background-color:red;
width:70%;
height:100%;
}
字体属性
p {
/*设置字体，可以写多个用逗号分隔，字体不生效就自动使用后面设置的备用字体*/
font-family: "微软雅黑","Arial Black","...";
font-size:18px; /*设置字体大小*/
/*bolder加粗，lighter变细，数值范围100~900，inherit继承父元素的粗细值*/
font-weight:inherit;
color:red; /*通过单词指定字体颜色*/
color:#232323; /*通过颜色十六进制数指定字体颜色*/
color:rgb(111,111,111); /*通过rgb指定字体颜色*/
/*前三个参数与rgb相同，范围为0~255，最后一个参数表示透明度，范围0~1*/
color:rgba(111,111,111,0.1);
}
文本属性
p {
text-align:center; /*文字居中显示*/
text-align:left; /*文字左对齐显示*/
text-align:right; /*文字右对齐显示*/
text-align:justify; /*文字两端对齐显示*/
text-decoration:underline; /*文字下划线*/
text-decoration:overline; /*文字上划线*/
text-decoration:line-through; /*与s标签的删除线效果相同*/
text-decoration:none; /*普通文本，主要给a标签使用，来去除a标签默认的下划线*/
text-indent: 2em; /*文章的首行缩进*/
}
背景属性
div {
background-color:red; /*设置背景颜色*/
background-imge: url("图片路径"); /*设置背景图片，默认铺满整个div*/
background-repeat:no-repeat; /*不平铺图片*/
background-repeat:repeat-x;
background-repeat:repeat-y;
background-attachment: fixed; /*固定背景，使其不会随着页面滑动而滑动*/
/*
其实浏览器不是一个平面 是一个三维立体结构
z轴指向用户 越大离用户越近
*/
/*使背景图水平垂直居中，第一个参数为水平方向第二个参数为垂直方向*/
background-position:center center;
/*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写*/
background: red url("222.png") no-repeat center center;
}
边框
div{
/*指定边框的粗细, top代表指定上边框，其他的还有left、right、bottom*/
border-top-width: 5px;
border-top-color:red; /*颜色单词指定颜色，rgb指定颜色，十六进制数指定颜色*/
/*指定边框样式 实线：solid，点线：dotted，虚线：dashed*/
border-top-style:solid;
/*简写,三者位置随意,用空格分隔即可*/
border:3px solid red;
/*设置边框圆角，设置为50%时等宽高情况下为圆，否则为椭圆*/
border-radius:50% /*可以以px像素为单位即border-radius: 5px;*/
}
display属性
div {
display:none; /*隐藏标签，标签仍存在，原来的位置不再占有*/
visibility: hidden; /*隐藏标签，原来的位置仍然存在，只是单纯的隐藏*/
display:inline; /*将标签变成行内标签的特点*/
display:block; /*将标签变成块级标签的特点*/
display:inline-block; /*将标签变成行内块元素(既可以同行又能够设置宽高)*/
}
盒子模型
/*
盒子模型
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
body {margin: 0;}
*/
div {
margin: 0; /*上下左右全是0*/
margin: 10px 20px; /*第一参数表示上下，第二参数表示左右*/
margin: 10px 20px 30px; /*第一参数表示上，第二参数表示左右, 第三参数表示下*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
margin: 0 auto; /*标签的水平居中，不能够实现垂直居中*/
/*margin可以指定只修改一边*/
margin-left: 0; /*左外边距*/
margin-top: 0; /*上外边距*/
margin-right: 0; /*右外边距*/
margin-bottom: 0; /*下外边距*/
}
/*
id为top的div位于id为bottom的div之上时，
top与bottom之间的外边距不会叠加而是取最大外边距也就是30px
即top与bottom之间的距离为30px
*/
#top {
margin-bottom: 20px;
}
#bottom {
margin-top: 30px;
}
div {
border: 3px solid red;
padding-left: 0; /*左内边距*/
padding-top: 0; /*上内边距*/
padding-right: 0; /*右内边距*/
padding-bottom: 0; /*下内边距*/
/*规律和margin一模一样*/
padding: 10px; /*上下左右*/
padding: 10px 20px; /*上下 左右*/
padding: 10px 20px 30px; /*上 左右 下*/
padding: 10px 20px 30px 40px; /*上 右 下 左*/
}
浮动
"""浮动的元素 没有块级一说 本身多大浮起来之后就只能占多大"""
body {
margin:0;
}
#d1 {
height:200px;
width:200px;
background-color: darkred;
float: left; /*左浮动*/
}
#d1 {
height:200px;
width:200px;
background-color: skyblue;
float: right; /*右浮动*/
}
浮动的影响
<!--会造成父标签塌陷问题-->
<!--
解决方法：
1、再加一个div设置高度
2、利用clear属性
#d4 {
clear: left; /*该标签的左边不能有浮动的元素*/
}
3、通用的解决浮动带来的影响的方法
在设计时就提前写好处理浮动影响的css代码
.clearfix:after {
content: '';
clear: both;
display: block;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
-->
