web前端–Css练习
所用软件：Hbuilder X
1.div块Css设置各种样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
div{
/*设置宽高属性，用到的像素单位 px*/
width:100px;
height:200px;
background: red;
/*设置字体颜色，值有三种表示法：英文颜色名、16进制、*/
/*color:red*/
/*color:#ffffff*/
color:rgb(0,255,255);
/*设置字体大小 默认像素：16px,最小像素：12px*/
font-size: 10px;
/* 设置字形 谷歌默认：微软雅黑*/
/* IE默认为宋体 */
font-family: "宋体";
/* 行高设置 */
line-height:200px;
/* 文本加粗 */
font-weight:600;
/* 单行文本左右对齐方式：左 中 由右 */
text-align: center;
}
p{
/* 默认字体大小：16px，最小像素：12px */
line-height: 20px;
font-weight: normal;
/* 设置文本线条： 上划线，上划线，删除线*/
text-decoration:none;
/* 设置字体形态 */
font-style:inherit;
/* 设置首行缩进 */
text-indent: 2rem;
/* 设置每个文字之间的距离 */
letter-spacing: 1px;
}
a{
/*去掉下划线（a标签默认是有下滑线）*/
text-decoration: none;
font-size: 16px;
/*设置a标签的颜色*/
color: black;
}
</style>
<body>
<div>我是DIV</div>
<p>千百万年前，人类在劳动的过程中将自身从猿的处境中解放出来;一万年前，人类在劳动的过程完成了农业革命从而走向定居生活;两百年前，人类在劳动的过程中完成了工业革命从而步入现代社会。正是因为劳动在人类历史上发挥了极为重要的作用，因此我的演讲主题乃是热爱劳动。但我要进一步强调，热爱劳动，是要热爱自由劳动!
与自由劳动相对的，是雇佣劳动。由于机器的推广和分工理念的深入人心，雇佣劳动本身，在现代社会已经失去了任何独立的性质，故而才失去了对人们的任何吸引力。所以一些同学的意见：劳动太苦太累，不如花钱请别人来做。这样的想法，与其说不理解劳动、倒不如说一语道破了现代社会的本质：现代社会的所有上层建筑，都是矗立在雇佣劳动为基础的经济结构之上的。</p>
<a href="">点击进入</a>
</body>
</html>
#文本类样式：
font-size 设置字体大小，浏览器默认字体大小为16px;可最小设置为12px
font-weight 设置字体的样式加粗 或者消除加粗
font-family 设置字体的字型 一般设置为微软雅黑
font-style 可设置字体为斜体
line-height 设置行高,一般还可用来设置单行文本的垂直居中
text-align 设置单行文本的左右对齐方式
color 设置文本的颜色，值有三种表示方法
text-decoration 设置线条 下划线 上划线 删除线
text-indent 设置段落的首行缩进
letter-spacing 设置文字之间的间隙
网页显示效果：
2.盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
</head>
<style>
*{
/*外边距*/
margin: 0px;
/*内边距*/
padding: 0px;
}
div{
width: 100px;
height: 100px;
/*左浮动*/
float: left;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
/* 设置外边距 复合属性可以接不同的几个值 */
/* 值的用法：接一个值：四周都被隔开 */
/* 两个值 第一个值控制上下 第二个值控制左右*/
/* 三个值 第一个值控制上，第二个值控制左右，第三个值控制下*/
/* 四个值分别控制上右下左 */
margin:0px;
}
.box3{
background-color: yellow;
/* 设置内边距 符合属性 */
/* 值的用法同外边距同 */
padding: 30px;
width: 40px;
height: 40px;
}
.box4{
/* background-color: blue; */
border-left: 2px red dashed;
}
.box5{
background-color: violet;
width: 1200px;
}
</style>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div>
<div class="box4">div4</div>
<div class="box5">div5</div>
</body>
</html>
#盒模型():
组成部份：内容大小(width、height)、内边距(padding)、边框(border)、外边距(margin);
注意padding:元素设置内边距后会自身加大，内容受影响，背景不受影响
内边距(padding)、外边距(margin)复合属性值的用法：
* 接一个值：会控制四个方向.如：margin:0;
* 接二个值：第一个值控制上下，第二个值控制左右.如：margin:0 1;
* 接三个值：第一个值控制上，第二个值控制左右，第三个控制下.如：margin:0 1 0;
* 接四个值：从上开始，顺时针控制 上右下左.如：margin:0 1 0 1;
内外边距都可设置单独某一边 left top bottom right,如margin-left：控制左边的外边距
border 给元素设置边框， 复合属性接三个值：颜色 大小 线型，例如：border:red 2px solid.
(solid实线,dashed虚线，dotted点线，double 双线)
可设置单独某一边 left top bottom right,例如border-bottom:red 2px solid.
网页显示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqXCwBaG-1591716114902)(E:\typoraPic\image-20200609223810545.png)]](https://i-blog.csdnimg.cn/blog_migrate/d255ebd354af15f5a7568a36ddc53794.png)
3.overflow的用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow的用法</title>
</head>
<style type="text/css">
div{
/*宽和高*/
width: 200px;
height: 400px;
/*边线*/
border: 1px solid red;
margin: 100px;
/*
#overflow属性
当子级元素大小超出父级元素大小，可以使用此属性做相应处理：全部隐藏 | 以滚动条形式展示
overflow-x:hidden;x轴溢出隐藏
overflow-y:hidden;y轴溢出隐藏
overflow:hidden;x,y轴溢出隐藏
overflow: scroll;以滚动条形式展示
*/
overflow-y:hidden;
background: red;
/*鼠标悬停样式*/
cursor:progress;
}
</style>
<body>
<div>
劳动是财富的源泉，但雇佣劳动却不是幸福的源泉。说劳动是财富的源泉，这话不假，可以看到，人类在劳动中不仅实现了自我的解放，还在劳动中创造了所有的物质财富和精神财富，从而在劳动中建立了多姿多彩的现代社会。但雇佣劳动绝对不是幸福的源泉。雇佣劳动的本质，是劳动者作为商品的劳动力在市场的公开出售，因此，给与劳动者的反馈——也就是工资，几乎只限于维持劳动者生活和再生产的必需。同时，在雇佣劳动之下，劳动者通过劳动过程制造的劳动产品，并不属于劳动者自身，这样的劳动产品附加了劳动者劳动凝固的结晶，却于劳动者自身毫无裨益。试问：这样的雇佣劳动除了接受现代社会的层层监视，除了遭受福报的层层奴役，这样的雇佣劳动有什么幸福源泉可言呢? ””
</div>
<div>点击</div>
</body>
</html>
#cursor属性
设置鼠标 的形状: hand手势 point可选 wait等待 help帮助....
每个元素都可设置此属性
网页显示效果：
4.选择器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器练习</title>
</head>
<style>
/* 通配符*<类#<id<行间<！important(不常用) */
div{
width: 200px;
height: 200px;
margin: 0px;
padding: 10px;
background-color: aliceblue;
}
.div1{
border: 2px red solid;
}
.div2{
line-height: 100px;
padding: 0px;
text-align: center;
}
/* 后代选择器 */
.div3>p{
background: violet;
}
.div4 p{
color: green;
}
/* 交集选择器 */
h1.haha{
color: cyan;
}
/* 并集选择器 */
.one,.two{
color: yellow;
}
</style>
<body>
<div class="div1">我是DIV1</div>
<div class="div3">
<p>我是div3的字集p1</p>
<p>我是div3的字集p2</p>
<div>
<p>我是div3的后代集</p>
</div>
</div>
<div class="div2">我是DIV2</div>
<div class="div4">
<p>我是div4下的P</p>
<div class="div5">
我是div5下的P
</div>
</div>
<h1 class="haha">你好！</h1>
<p class="haha">p</p>
<h3 class="one"> one</h3>
<h3 class="two">two</h3>
</body>
</html>
#CSS基本选择器：
通配符 * < 标签 < 类class < ID < 行间 < !important
通配符：选择页面中所有的标签 用*号表示
标签选择：选择对应所有的标签进行样式书写，权重大于通配符，如：div、p、form...
类名选择：给标签元素取名，用class属性 值就是对应的名字(不能以数字开头)
用点号加名字选择写样式
一个元素上可以取多个类名,中间用空格隔开
如果权重相同，那么会以代码加载顺序，后面的覆盖前面
多个元素可以取相同类名
id选择: 给标签元素通过属性名id取名字，值具有唯一性, 用#加名字选择
自己写样式时很少到ID ID更多会给JS用
行间设置：权重大于ID 类名 标签 通配符
!important:手动设置最高权重 ,直接样式后加这句，中间用空格隔开
真用到这一步了，那么证明你对权重理解不到位
#CSS高级选择器:
后代选择：父级和后代级用空格隔开
子代选择：父级和子级用大于号>
交集选择：一般使用标签加名字 如 ：h1.haha 选择类名为haha的h1标签
并集选择：几个元素共同作用同一或多条样式, 元素之间用逗号隔开
网页显示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9EynMpm8-1591716114920)(E:\typoraPic\image-20200609224611627.png)]](https://i-blog.csdnimg.cn/blog_migrate/3d3903e628156561479597dd50a64d58.png)
5.图文对齐方式
在src下新建一个img文件夹，再到网站上下载一张图片放到该文件夹下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文对齐方式</title>
</head>
<style type="text/css">
div{
border: 1px red solid;
}
img{
/*
vertical-align: bottom;以图片底部为对齐为基准线
vertical-align: baseline;以图片baseline为对齐为基准线
vertical-align: middle;以图片中为对齐为基准线
vertical-align: top;以图片顶部为对齐为基准线
*/
vertical-align: baseline;
}
</style>
<body>
<!-- 图文对齐 -->
<div id="">
<span>我是span</span>
<img src="img/小黄人相册/1.jpg" >
</div>
</body>
</html>
# vertical-align属性:
针对于图片设置的一个属性
默认基线对齐 baseline
基本用法：设置文字和图片对齐：上 、中、基线、下;
高级用法:可解决图片下边有间隙的问题
img可以看成是一文字类型,具有对齐方式:上 、中、基线、下
给图片设置此属性，除了baseline值以外，都可以解决问题
网页展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95nghTvA-1591716114926)(E:\typoraPic\image-20200609224938738.png)]](https://i-blog.csdnimg.cn/blog_migrate/5b25547c27cc0a691e5bd277b5c2bfc7.png)
6.浮动属性练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动属性练习</title>
</head>
<style type="text/css">
*{
margin: 0px;
}
div{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
p{
width: 130px;
height: 130px;
background-color: red;
float: left;
}
span{
background-color: pink;
float: left;
width: 200px;
height: 200px;
}
</style>
<body>
<div>我是DIV</div>
<p>我是P</p>
<span>我是span</span>
</body>
</html>
网页展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FcltDRfb-1591716114931)(E:\typoraPic\image-20200609231417692.png)]](https://i-blog.csdnimg.cn/blog_migrate/ed13c6a4823c13afe2324967e6cd7228.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习</title>
</head>
<style>
#Box1{
width: 400px;
background-color: red;
border: yellow 2px solid;
/* 解决不能自动高度不能撑高的问题 */
/* 溢出隐藏，再有些的情况下会将字集元素定位 这种方法就不适用 */
/* overflow: hidden; */
}
/* 最终解决方法:伪类 */
#Box1:after{
content:'';display: block;clear:both;
}
p{
width: 50px;
height: 50px;
margin: 10px;
background-color: green;
float: left;
}
</style>
<body>
<div id="Box1">
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
<p>我是p4</p>
<p>我是p5</p>
<p>我是p6</p>
<p>我是p7</p>
<p>我是p8</p>
<p>我是p9</p>
<p>我是p10</p>
<p>我是p11</p>
<p>我是p12</p>
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
<p>我是p4</p>
<p>我是p5</p>
<p>我是p6</p>
<p>我是p7</p>
<p>我是p8</p>
<p>我是p9</p>
<p>我是p10</p>
<p>我是p11</p>
<p>我是p12</p>
</div>
</body>
</html>
网页展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CDkCCjoz-1591716114936)(E:\typoraPic\image-20200609231439143.png)]](https://i-blog.csdnimg.cn/blog_migrate/0893956a6231e5bda13a205f3d69f40f.png)
#CSS浮动属性
在标准文档流中，很多时候需要脱标来进行页面布局
脱标三种方法：
float(浮动)
absolute(绝对定位)
fixed(固定定位)
脱标特性：元素无行块之分，可设置宽高，可并排（并排的元素都要设置浮动）
元素无论左浮还右浮都在父级大小之内
float特性：子级元素设置float属性后不能撑高自动高度的父级
解决问题：让子级浮动了元素也能撑自动高的父级
解决办法：伪类
.big:after{
content: ''; display: block; clear: both;
}
float属性可解决空白折页问题和图片左右之间有间隙
7.块、行、行内元素练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块、行、行内元素练习</title>
</head>
<style type="text/css">
div{
width: 100px;
height: 100px;
background:red;
display: inline;
margin: 0px;
}
/*标准的文档流把标签分为三类：块元素、行内元素、行内块元素
块元素（div p h系列 ul li ol）：独占一行，可设置宽高，如果不设置宽，那么会继承父级的100%，高由内容撑高
行内元素(span a i)：不独占一行，不可设置宽高，大小就是内容大小
行内块元素(img input)：不独占一行，可设置宽高 */
</style>
<body>
<div>我是DIV1</div>
<div>我是DIV2</div>
<div>我是DIV3</div>
<div>我是DIV4</div>
</body>
</html>
演示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVibua7t-1591716114940)(E:\typoraPic\image-20200609231803572.png)]](https://i-blog.csdnimg.cn/blog_migrate/48ab220ce66c6eb84549f030e1ab144e.png)
8.背景元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>背景元素</title>
</head>
<style>
.box{
width: 700px;
height: 800px;
margin: 50px;
border: 2px solid green;
/* 以颜色做背景 颜色三种表示法：英文 16进制 rgb() */
/* background-color: rgb(0,0,0); */
/* 以图片作为背景，与直接加一张图片有区别 */
/* background-image: url(img/1.jpg);
*/
/* 设置图片不平铺 */
/* background-repeat: no-repeat; */
/* 设置背景图片的大小 接两个值 第一个值宽 第二个值高*/
/* cover 等比拉伸或缩放（具体看图片的大小）到最后一条边碰到边为止 contain相反 */
/* background-size: contain; */
/* 背景图片定位 */
/* background-position:left center; */
/* 设置背景固定 */
/* background-attachment: fixed; */
/* 符合写法 */
background: pink url(img/3.jpg) no-repeat 30px 100px;
background-size: 500px 500px;
background-attachment: fixed;
}
</style>
<body>
<div class="box">我是DIV</div>
</body>
</html>
网页展示效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJ4GDqNk-1591716114945)(E:\typoraPic\image-20200609232121574.png)]](https://i-blog.csdnimg.cn/blog_migrate/07d3220307d67dd71901e2c288c41c8c.png)
# CSS背景属性:
在一个元素大小内，可以加入背景，这个背景可以是纯色，还是一张图片
可分拆：
background-color 设置颜色，三种表示法
background-image 设置图片为背景
background-repeat 设置平铺方式，默认XY都平铺 no-repeat repeat-x repeat-y
background-size 设置背景图片大小，接两个值，第一个为宽，第二个为高
还可以拉伸图片：cover(等比缩放,最后一条边碰到停止)
还可以拉伸图片：contain(等比缩放,第一条边碰到停止)
background-position 接两个值，第一值为X轴，第二个为Y轴
默认为左上角0 0 点
值还可以是方位词 left right top bottom center
复合写法：
background : 颜色 图片 平铺方式 定位
775
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
