<header style="color: red;">网页头部</header>
/* 选择器 {
属性:属性值
}
*/
p {
color: blue;
}
<link rel="stylesheet" href="style.css">
header {
font-family: SimSun;
font-family: "宋体";
/* 默认大小 16像素 */
font-size: 28px;
font-weight: bolder;
font-style: oblique;
}
div {
font: oblique bolder 40px SimSun;
}
header {
color: red;
color: rgb(10, 100, 200);
color: #fedfe1;
color: hsl(120,100%,100%);
}
div {
/* 首行缩进 */
text-indent: 2em;
/* 文本水平居中 */
text-align: center;
/* 文本行高属性:属性值等于高度,垂直居中
对于块级元素,指定块元素最小高度*/
line-height: 100px;
/* 文本描述:上划线 */
text-decoration: overline;
/* 去掉li小点 */
list-style: none;
/* 多行文本框取消拖拽 */
resize: none;
/* 圆角 */
/* 四个值:左上,右上,右下,左下 */
/* 三个值:左上,右上左下,右下 */
/* 两个值:左上右下,右上左下 */
border-radius: 10px;
}
选择器:通过特定的符号去选择指定的元素
分类:
/* 基础选择器:标签选择器、类名选择器、ID选择器、多类名选择器、通配符选择器 */
/* 标签选择器:通过标签的名获取指定元素 */
header {
color: antiquewhite;
}
/* 类名选择器:通过标签的类名获取指定元素,前加.
多类名选择器:多个类名之间用空格隔开 */
.box1 {
color: aqua;
}
/* ID选择器:通过ID名获取指定元素。 ID不可重复 */
#box-list {
color: blue;
}
/* 通配符选择器:选择所有元素 */
* {
text-align: center;
}
/* 复合选择器:交集选择器、并集选择器、后代选择器、子代选择器 */
/* 交集选择器:既是...,又是... 两个选择器之间紧挨着,不能加空格 */
div.box2 {
color: red;
}
.box1.box2 {
font-family: SimSun;
font-size: 40px;
}
/* 并集选择器:多个选择器之间用逗号隔开,且每个选择器独占一行 */
.box3,
.box1 {
font-weight: bolder;
}
/* 子代选择器:必须是一级父子关系 */
.list1>li {
color: purple;
}
/* 后代选择器:后代都可以 */
.list1 div {
font-size: 70px;
}
/* 单击前的样式 a标签*/
.link1:link {
color: red;
}
/* 鼠标移上去的样式 (通用)*/
.link1:hover {
color: pink;
}
/* 单击时的样式 (通用)*/
.link1:active {
color: green;
}
/* 单击后的样式 a标签*/
.link1:visited {
color: brown;
}
标签显示模式:
hn、p、div、ul、ol、li、dl、dd、dt、table、caption、thead、tbody、tr、td、th、header、footer、section、artical、aside
特点:
span、a、label、b/shrong、i/em、u/ins、s/del
特点:
img、input、select、option、datalist、textarea、button
特点:
.box1 {
width: 600px;
height: 350px;
background-color: violet;
background-image: url(images/02.png);
/* 平铺属性 */
background-repeat: no-repeat;
/* 位置属性:水平、垂直方向 */
background-position: right bottom;
background-position: 30px 0px;
background-position: 0 50%;
/* 尺寸属性 */
background-size: 600px 350px;
background-size: 80% 80%;
background-size: cover;
}
.box2 {
width: 600px;
height: 350px;
/* 背景色 地址 平铺属性 位置 */
background: red url(images/02.png) no-repeat 100% 100%;
background-size: 60%;
}
网页布局的本质:拼接盒子的过程
盒子模型包含:内容、宽高、边框、内边距、外边距
.box1 {
width: 100px;
height: 80px;
border-top: 1px solid black;
/* 实线 solid、虚线 dashed、双实线 double、点线 dotted*/
/* 边框会影响盒子尺寸 */
/* 上边框、下边框、左边框、右边框 */
border: 10px 10px 10px 10px solid black;
}
.box1 {
width: 200px;
height: 100px;
/* 上右下左 */
padding: 10px 40px 40px 10px;
/* 上、左右、下 */
padding: 10px 40px 10px;
/* 上下、左右 */
padding: 10px 40px;
/* 内边距会影响盒子尺寸 */
}
外边距:
相邻元素的垂直外边距塌陷:两元素垂直相邻,外边距取较大值
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)
如果父元素没有上边框且没有上内边距,子元素的上外边距就是父元素的上外边距
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
可以让一个盒子实现水平居中margin: auto; 必须满足:
消除嵌套外边距合并:
.box1 {
/* 同padding */
margin-top: 30px 10px 10px 30px;
/*
text-align 内容的水平居中:
相对于盒子的宽度局中(盒子必须有宽度)
行内元素和文本都行
包含的块状、行内块元素不会水平居中
*/
}
浮动属性:float
浮动的分类 左浮动left、右浮动right
.box1 {
float: left;
float: right;
}
特点:
浮动的影响: 浮动后的元素不占位置,不能撑开父元素的高度
清除浮动:
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
定位:把元素固定在一个位置上
分类:静态定位、相对定位、绝对定位、固定定位
tips: 元素添加了绝对定位和固定定位之后,元素转换为行内块模式
/* 定位属性:position
边偏移量:left、right、top、bottom */
.box {
position: absolute;
top: 400px;
left: 400px;
}
/* 静态定位 static 标准流布局 */
/* 相对定位 relative
相对于元素本身定位
可以使用边偏移量
没有脱标
占位置
不受父元素影响,只跟本身位置相关 */
/* 绝对定位 absolute
相对于视口定位(父元素没有定位)
如果父元素相对定位 relative,则相对于父元素定位
可以使用
脱标
不占位置
分情况,总能超出父元素范围 */
/* 固定定位 fixed
相对于浏览器定位
可以使用
脱标
不占位置
和父元素无关 */
/* 强制文本同一行显示 */
white-space: nowrap;
/* 溢出内容隐藏 */
overflow: hidden;
/* 省略号 (缺一不可)*/
text-overflow: ellipsis;
cursor: default; /* 默认 */
cursor: pointer; /* 小手 */
cursor: move; /* 拖动 */
cursor: text; /* 文本 */
轮廓:获取焦点时,四周显示的线
outline: 0;
文本内容或者行内元素相对于同一行内块元素垂直居中
vertical-align: middle;
清除行内块元素默认边距 : 转化为块元素并浮动
display: block;
float: left;
相邻行内块元素,其中一个设置外边距,相邻的也受到影响:
给设置外边距的行内块元素设置
vertical-align:top;
元素的隐藏:
display: none
? 没有删除结构,只是通过样式隐藏
? 不占位置
? display:block (显示)
visibility: hidden
? 没有删除结构,只是通过样式隐藏
? 占位置
opacity: 0
? 没有删除结构,只是通过样式隐藏
? 占位置
overflow: hidden (隐藏溢出的子元素)
“版心”(可视区) 是指网页中主体内容所在的区域 960px 980px 1000px 1200px 1190px
布局流程:由外到内,由大到小
为什么要使用精灵图?减少服务器的压力,提高加载的速度
精灵图:将多张图片拼接在一张图片上,通过背景的位置属性选择合适位置即可
unicodes引入、font-class引入、symbol引入
原文:https://www.cnblogs.com/recreyed/p/css01.html