CSS是层叠样式表
CSS的定义方法时:
选择器{
属性: 值;
属性: 值;
}
div{
width:100px;
height:100px;
background:gold;
}
CSS引入页面的方法
<link rel = "stylesheet" type="text/css" href="css/style.css">
<div style="width: 100px; height: 100px">..</div>
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>
属性 | 说明 |
---|---|
width | 宽度 |
height | 高度 |
background-color | 背景颜色 |
border | border: 1px solid gold; 设置元素边框 |
padding | 设置内容和元素边框距离 |
margin | 元素和容器的距离, margin: 10px auto 0 居中 |
float | 设置元素浮动 |
常用的应用文本的css样式
属性 | 说明 | 值 |
---|---|---|
color |
文本颜色 | 颜色值 |
font-size |
文字大小 | px值 |
font-family |
文字字体 | 字体名称 |
font-style |
字体是否倾斜 | normal :不倾斜italic :倾斜 |
font-weight |
字体是否加粗 | normal :不加粗bold :加粗 |
font |
同时设置上面的属性 | 加粗 字号 /行高 字体 |
line-height |
文字的行高 | px值 |
text-decoration |
文字的下划线 | none去除下划线 |
text-indent |
文字的首行缩进 | 首行缩进24px |
text-align |
文字的水平对齐方式 | center字体居中 |
/* 直接选择html中所有的div元素 */
div{
color: red;
}
#box{
color: pink;
}
<div id="box">666</div>
.lei{
color: red;
}
.indent{
text-indent: 20px;
}
<div class="lei indent">1</div>
<div id = "box" class="lei">2</div>
<div class="lei">3</div>
<div class="lei">4</div>
<div class="lei">5</div>
.list{
height: 30px;
}
/* 这是一个两层的层级选择器 */
.list a{
text-decoration: none;
color: #333;
}
.list .num{
color: #333;
}
<ul class="list">
<li><a href = "">新闻标题</a></li>
<li class="num"><a href = "">新闻标题</a></li>
<li><a href = "">新闻标题</a></li>
<li><a href = "">新闻标题</a></li>
</ul>
/* 设置3个类的公共属性 */
.box1,.box2,.box3{
font-size: 14px;
text-indent: 28px;
}
/* 然后在使用类选择器个性化 */
.box1{
color: red;
}
.box2{
color: green;
}
.box3{
color: orange;
}
/* 更多设置形式 */
/* 匹配所有的p,b,i,span元素 */
p,b,i,span {
color: green;
}
<div class="box1">3</div>
<div class="box2">4</div>
<div class="box3">5</div>
/* 鼠标放到list类下的a时,会变色 */
.list a:hover{
color: gold;
}
/* 块级首行 */
/* 在p,div,body等块级元素才有效果 */
::first-line{
color: red;
}
/* 块级首字母 */
::first-letter{
color: red;
}
/* 文本前插入内容 */
/* 变成:点击百度 */
a::before{
content: '点击-';
}
/* 文本后插入内容 */
/* 百度搜索 */
a::after{
content: '搜索';
}
div,p,ul,li,h1-h6,dl,dt,dd
等都是块元素<style type="text/css">
body{
margin: 0;
}
div{
background-color: gold;
text-align: center;
margin: 10px 0;
}
.box2{
width: 200px;
}
.box3{
width: 300px;
}
</style>
...
<div class="">这是一个div元素</div>
<div class="box2">这是二个div元素</div>
<div class="box3">这是三个div元素</div>
a, span,em,b,strong,i
等都是行内元素text-align
属性设置子元素水平对齐方式,用line-height
设置垂直对齐方式<style type="text/css">
body{
margin: 0;
}
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto 0;
}
.con a{
background-color: gold;
width: 500px;
height: 300px;
margin-left: 30px;
margin-top: 50px;
}
</style>
...
<div class="con">
<a href="#">这是一个a标签</a>
<a href="#">这是二个a标签</a>
</div>
解决内联元素之间的间隔问题
<!--方法1:-->
<a href="#">这是一个a标签</a><a href="#">这是二个a标签</a>
<!--方法2:-->
<style type="text/css">
body{
margin: 0;
}
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto 0;
font-size: 0;
}
.con a{
background-color: gold;
width: 500px;
height: 300px;
margin-left: 30px;
margin-top: 50px;
font-size: 20px;
}
</style>
display
转换子元素是内联块元素,父元素可以通过text-align设置水平对齐方式,用line-height设置垂直对齐
display属性
属性 | 说明 |
---|---|
none | 隐藏不占用位置 |
block | 块元素 |
inline | 内联元素 |
inline-block | 内联块元素 |
<style type="text/css">
body{
margin: 0;
}
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto 0;
}
.con a{
background-color: gold;
width: 100px;
height: 50px;
display: inline-block;
}
</style>
<div class="con">
<a href="#">这是一个a标签</a>
<a href="#">这是二个a标签</a>
</div>
<style type="text/css">
body{
margin: 0;
}
.menu{
width: 694px;
height: 50px;
margin: 50px auto 0;
list-style: none;
padding: 0;
font-size: 0;
}
.menu li{
display: inline-block;
width: 98px;
height: 48px;
border: 1px solid gold;
font-size: 16px;
margin-right: -1px;
text-align: center;
line-height: 48px;
}
.menu li:hover{
background-color: orange;
}
.menu a{
font-family: 'Microsoft Yahei';
color: pink;
text-decoration: none;
}
.menu a:hover{
color: red;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
</ul>
</body>
.goods{
/* 通用属性 */
width: 300px;
height: 300px;
text-align: center;
/* 设置的单元格相邻边是否被合并
separate: 单元格边框独立,默认
collapse: 边框合并(变成实心的实现) */
border-collapse: collapse;
/* 设置单元格边框边距,只有在border-collapse为separate情况下才有用 */
border-spacing: 10px;
/* 标题方位
top, bottom */
caption-side: top;
/* 空内容单元格的是否显示,hide */
empty-cells: hide;
/* 表格的排版方式
auto: 内容过长的时候,会拉伸整个单元格,挤压其他单元格
fixed: 内容过长时,不会拉伸,会换行处理 */
table-layout: fixed;
}
/* 设置表头的背景颜色 */
.goods th{
background-color: green;
color: #ffffff;
}
<link rel="stylesheet" type="text/css" href="style.css">
<table class = "goods" border="1">
<caption>人员表格</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>34</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>43</td>
</tr>
元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是现实盒子的比喻,帮组我们设置元素对应的样式
border
padding
margin
border
:长度值或者百分比border-top/bottom
border-left/right
.box{
width: 200px;
height: 100px;
background-color: red;
/* 设置顶部边框的宽度,颜色 */
/* border-top-width: 10px;
border-top-color: #000; */
/* 设置线的样式,实线solid, 虚线dashed, 点线dotted */
/* border-top-style: solid; */
/* 全部一下子来写 */
/* border-top: 10px solid #000; */
border: 10px solid orange;
}
<div class="box"></div>
padding
:长度值或者百分比padding-top/bottom
padding-left/right
.box{
padding: 20px;
/* 上,右,下,左 */
/* padding: 10px 20px, 10px, 20px; */
}
根据body文档的左上角为起点
margin
margin-top/bottom
margin-left/right
注意
margin-top
,不设置margin-bottom
auto
平分水平距离.box{
margin: 100px auto;
}
盒子宽度 = width + 左右padding值 + 左右的border值
盒子高度 = height + 上下的padding值+ 上下的border值
.box1,.box2,.box3{
width: 50px;
height: 50px;
background-color: gold;
margin: 20px;
}
.box2,.box3{
border: 50px solid #000;
}
.box3{
padding: 50px;
}
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
如何解决盒子尺寸动态变化的问题?
indent
: 首行缩进line-height
text-align
margin: 10px auto;
假设设置一个高宽45*400px的盒子
.box2{
width: 400px;
height: 50px;
border-top: 1px solid #f00;
border-bottom: 3px solid #666;
font-size: 20px;
font-family: "Microsoft Yahei";
text-indent: 15px;
/* 让文字居中 */
line-height: 50px;
}
在两个盒子嵌套的时候,内部的盒子设置的margin-top会加到外部的盒子上(只有外部的盒子有margin-top),导致内部的盒子margin-top
设置失败,解决方法如下:
overflow: hidden
/* 类似于加边框 */
.clearfix:before{
content: "";
display: table;
}
/* <div class= "non clearfix"></div> */
当子元素的尺寸超出父元素的尺寸时, 需要设置父元素显示溢出的子元素的方式,设置的方法通过overflow
属性设置
属性值 | 说明 |
---|---|
visible |
内容不会被修剪,会呈现在元素框外部,默认 |
hidden |
内容会被修剪,并且其他内容不可见,此属性还有清除浮动、清除margin-top 塌陷的功能 |
scroll |
内容会被修剪,通过滚动条显示 |
auto |
如果内容被修剪,就通过滚动条显示 |
inherit |
规定应该从父元素继承overflow 属性的值 |
什么是溢出
<div class="con">
<div class="box">
</div>
</div>
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto;
}
.box{
width: 400px;
height: 600px;
background-color: gold;
}
以下这个图就是溢出
设置溢出方法
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto;
overflow: scroll;
}
文档流
文档流,是指按照html标签编写的顺序一次从上到下,从左到右排列,块元素占一行,行内元素在一行只能从左到右排列,先写的先排,后写的后排,每个盒子都占据自己的位置, 浮动,定位可以打破这种规律
float:left
)和右浮动(float:right
)margin
的合并浮动特性1-5
/* 碰到父元素边界停下 */
.box1{
float: left;
}
/* 碰到父元素边界停下 */
.box2{
float: right;
}
/* 碰到box1浮动元素边界停下 */
.box3{
float: left;
}
overflow: hidden
(在定位的时候会有问题 )div
,给它样式属性clear: both
(不推荐)/* 既可以清除margin-top的bug,也可以清除浮动 */
.clearfix:after, .clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom: 1;
}
清除浮动的用法(在父级上添加)
<div class = "con clearfix">
可以使用CSS的position属性来设置元素的定位类型,position的设置项如下:
relative
: 相对定位元素,元素所占的文档流位置不变,元素本身相对文档流进行位置偏移absolute
: 绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,就相当于body元素定位fixed
: 固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为为漂浮在文档流的上方,当有滚动条的时候,元素会跟随滚动条一直显示static
: 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性inherit
: 从父元素继承position
的值.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto 0;
}
.con div{
width: 200px;
height: 100px;
margin: 20px;
background-color: gold;
font-size: 40px;
text-align: center;
line-height: 100px;
}
.box01{
position: relative;
top: 80px;
left: 50px;
background-color: green;
}
.box01{
position: absolute;
top: 50px;
left: 50px;
background-color: green;
}
我们也可把外部容器设置为定位的起点
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto 0;
position: relative;
}
.box01{
position: absolute;
top: 50px;
left: 50px;
background-color: green;
}
.box01{
position: fixed;
top: 50px;
left: 50px;
background-color: green;
}
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
定位元素是浮动的正常的文档流之上的,可以用z-index
属性来设置元素的层级
<ul class="menu">
<li class="active"><a href="">首 页</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">网站建设</a></li>
<li><a href="">网站建设</a></li>
<li class="new"></li>
</ul>
.menu{
width: 950px;
height: 40px;
margin: 50px auto 0;
list-style: none;
background-color: #55a8ea;
padding: 0;
position: relative;
}
.menu li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
.menu li a{
font-size: 14px;
font-family: 'Microsoft Yahei';
color: #fff;
text-decoration: none;
}
.menu .active{
background-color: #00619f;
}
.menu li:hover{
background-color: #00619f;
}
.menu .new{
width: 30px;
height: 30px;
background: url(new.png) no-repeat;
position: absolute;
left: 433px;
top: -20px;
}
.menu .new:hover{
background: url(new.png) no-repeat;
}
<div class="news_list_con">
<h3><span>新闻标题</span></h3>
<ul>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
</ul>
</div>
.news_list_con{
width: 600px;
height: 290px;
border: 1px solid #ddd;
margin: 50px auto 0;
overflow: hidden;
}
.news_list_con h3{
height: 50px;
width: 560px;
border-bottom: 1px solid #ddd;
margin: 0px auto;
}
.news_list_con h3 span{
display: inline-block;
height: 50px;
border-bottom: 2px solid red;
font-size: 18px;
line-height: 50px;
font-family: 'Microsoft Yahei';
padding: 0 15px;
}
.news_list_con ul{
list-style: none;
padding: 0;
width: 560px;
height: 238px;
margin: 7px auto 0;
}
.news_list_con ul li{
height: 38px;
border-bottom: 1px solid #ddd;
}
.news_list_con ul a{
float: left;
height: 38px;
line-height: 38px;
font-size: 14px;
font-family: 'Microsoft Yahei';
text-decoration: none;
color: #000;
}
.news_list_con ul a:before{
content: ".";
}
.news_list_con ul a:hover{
color: red;
}
.news_list_con ul span{
float: right;
height: 38px;
line-height: 38px;
font-size: 14px;
font-family: 'Microsoft Yahei';
color: #000;
}
页面上放图片的方法
方法 | 说明 |
---|---|
直接通过src | 占用空间 |
通过backgound-image |
图片不占用空间,只是作为背景,可以在上面写字.. |
backgound-image属性解释
background
是CSS中很重要的一个属性,它复制给盒子设置背景图片和背景颜色的,background
是一个复合属性,他可以分解成如下几个设置项
backgound-color
: 设置背景颜色
image postion color repeat
backgound-image
: 设置背景图片地址backgound-repeat
: 设置背景图片如何重复平铺
repeat(default),repeat-X,repeat-Y, no-repeat
backgound-position
: 设置背景图片位置
水平(left/right/center) 垂直(top/bottom/center)
同时设置:必须在no-repeat
情况下使用水平偏移(10px) 垂直偏移(0px)
:参考点是 父元素的左上角backgound-attachment
: 设置背景图片是固定还是随着页面滚动条滚动
fixed
:不随着滚动.box{
width: 200px;
height: 200px;
border: 1px solid red;
background-image: url(news.png);
}
原文:https://www.cnblogs.com/haochen273/p/10776500.html