一.CSS浮动

1.简介

默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值    说明
left    元素向左浮动
right   元素向右浮动
none    默认值,元素不浮动浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div {/* float: left; *//* margin-left: 100px; */}/* 浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式 */#div1 {/* left表示左浮动right表示右浮动none表示不浮动*/float: left;}#div2 {float: left;}#div3 {float: left;}</style></head><body><div id="div1" class="div" style="background-color: red;">芜湖,起飞</div><div id="div2" class="div" style="background-color: yellow;">啊哈,金色传说</div><div id="div3" class="div" style="background-color: aqua;">这把我门就遇到了高手了</div><!-- 清除浮动 --><div id="div4" class="div" style="clear: both;">外币外币,外币巴布</div></body>
</html>

2.CSS浮动图片

当对图片进行浮动时,图片会取消边框,按照浮动顺序排列;
当调整窗口时,图片大小不变,会自动调整位置

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css浮动图片</title><style type="text/css">img{float: left;}</style></head><body><img src="img/girl1.jpg" width="400px" height="300px"><img src="img/girl2.jpg" width="400px" height="300px"><img src="img/girl3.jpg" width="400px" height="300px"><img src="img/girl4.jpg" width="400px" height="300px"></body>
</html>

3.边框塌陷

作用:清除浮动属性值   说明
left    在左侧不允许出现浮动元素
right   在右侧不允许出现浮动元素
both    在左、右两侧不允许浮动元素
none    默认值。允许浮动元素出现在两侧

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css清除浮动</title><style type="text/css">img {float: left;margin-left: 20px;}#div2{clear: both;}</style></head><body><div id="div1">图片</div><img src="img/girl1.jpg" width="400px" height="300px"><img src="img/girl2.jpg" width="400px" height="300px"><!-- 清除浮动 如果不添加clear,文字会出现在图片右侧--><div id="div2">图片2</div><img src="img/girl3.jpg" width="400px" height="300px"><img src="img/girl4.jpg" width="400px" height="300px"><img src="img/girl5.jpg" width="400px" height="300px" ></body>
</html>

4.display属性

属性值          说明
block           块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline          内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block    行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none            设置元素不会被显示块元素排在一起有两种方法：
inline-block
float

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>display属性</title><style type="text/css">p{background-color: red;display: inline;}</style></head><body><p>芜湖起飞</p><p>外币外币</p></body>
</html>

二.CSS属性

1.字体的设置

1.font-family设置字体形式,如黑体隶书楷书等
2.font-size:绝对尺寸/关键字/相对尺寸/百分比关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
3.font-style  设置字体的样式font-style  设置字体的样式（设置字体是否为斜体字）normal----正常显示字体italic---斜体字oblique--歪斜体（倾斜角度大一点）
4.font-weight  设置字体的加粗取值：normal  ---- 正常显示bold ----粗体（数字700粗细值）bolder ---加粗lighter ---细体（比正常字体稍微细一点）number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
5.text-shadow设置字体的阴影从左到右依次为阴影的左右距离,上下距离,阴影范围,阴影颜色
6.font-variant 设置字体的变体设置字体是否显示为小型的大写字母主要用于设置英文字体normal  --正常字体small-caps  表示英文字母显示为小型的大写字母

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body{color: red;font-family: 楷体;font-style: normal;font-weight: bold;/* text-shadow设置字体的阴影 *//* 左右位置 上下位置 阴影范围 阴影颜色 */text-shadow: 1px 1px 5px aqua;}h2{/* font-size设置字体大小 */font-size: 100px;color: #000000;font-style: italic;font-weight: normal;}div{font-size: x-large;font-style: oblique;font-weight: lighter;}#div2{font-variant: small-caps;}#div3{font-variant: normal;}</style></head><body><h1>芜湖起飞</h1><h2>外币外币</h2><p>啊哈,金色传说</p><div id="div1">这把我们就遇到了高手了</div><div id="div2">HelloWorld!</div><div id="div3">buffterflaay</div></body>
</html>

2.颜色的设置

1.color 设置颜色
2.background-color设置背景颜色
3.background-image设置背景图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>颜色的设置</title><style type="text/css">#div1{color:red;}#div2{background-color: #FFD700;}.div{background-image: url(img/girl1.jpg);}</style></head><body><div id="div1">外币外币,外币巴布</div><div id="div2">飞吧</div><div id="div3" class="div">芜湖</div><div id="div4" class="div">起飞</div></body>
</html>

3.背景的设置

(1)背景的颜色+图片+尺寸

1.background-color设置背景颜色
2.background-image设置背景图片
3.background-size设置背景图片的尺寸,第一个参数表示左右拉伸,第二个参数表示上下拉伸
4. background-repeat设置背景图片是否重复设置背景图片总是在水平和垂直方向重复显示铺平整个网页。repeat   背景图片在水平和垂直方向平铺repeat-x  背景图片在水平方向平铺repeat-y  背景图片在垂直方向平铺no-repeat  背景图片不平铺
5.background-attachment设置背景图片是否随着滚动条的滚动而滚动scroll  ---表示背景图片随着滚动条的移动而移动fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景的设置</title><style type="text/css">body{background-image: url(img/girl3.jpg);/* 是否随着滚动条的滚动而滚动 */background-attachment: scroll;/* 设置图片不平铺 */background-repeat: no-repeat;/* 设置图片尺寸 */background-size: 800px 1800px;}/* 字出现在图片上,且字和图片一起随着滚动条的滚动而滚动 */#div1{height: 50rem;}</style></head><body><div id="div1">芜湖</div></body>
</html>

(2)背景图片的位置

background-position:关键字            百分比              位置说明top left          0%  0%              左上位置top center        50%  0%             靠上居中top right         100%  0%            右上位置left  center      0%  50%             靠左居中center center     50%  50%            正中位置right center      100%  50%           靠右居中bottom  left      0%  100%            左下位置bottom  center    50%  100%            靠下居中bottom  right     100%  100%           右下位置

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 1400px;height: 1100px;background-image: url(img/bb.png);background-repeat: no-repeat;border: 1px #00FFFF solid;/* 设置图片的位置 */background-position: right center;}</style></head><body><div id="div1" style="height: 800px;"></div></body>
</html>

4.边框的设置

(1)边框的基本设置

边框线条的粗细     边框的颜色       边框的粗细
border:  1px        black           solid; 1.边框的宽度border-width基本语句：border-widthborder-top-width  上宽border-bottom-width   下宽border-left-width 左宽border-right-width    右宽取值；thin  ----细边框medium  ---中等边框thick--粗边框长度---数字
2.边框的颜色border-colorborder-top-colorborder-bottom-colorborder-left-colorborder-right-color
3.边距border边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离上边距  margin-top下边距  margin-bottom左边距  margin-left右边距  margin-right

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#div1 {width: 300px;height: 400px;/* border: 1px red solid; */border-width: 10px;border-color: red;border-style: solid;/* 上边框的宽 */border-top-width: 1px;/* 下边框的颜色 */border-bottom-color: #FFD700;/* 左边框的格式 */border-left-style: none;/* 上边距 */margin-top: 100px;}</style></head><body><div id="div1"></div></body>
</html>

(2)边框的圆角和阴影

border-radius设置边框圆角,注意先把边框设置后再设置圆角div { border:2px solid; border-radius:25px;  }box-shadow设置边框阴影

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 300px;height: 400px;border: 1px darkred solid;background-image: url(img/girl2.jpg);background-repeat: no-repeat;/* 设置边框的圆角 */border-radius: 10px;/* 设置边框的阴影 */box-shadow: 1px 1px 1px #8B0000}</style></head><body><div id="div1"></div></body>
</html>

(3)内边距

 用来设置边框和其内部的元素之间的空白距离上边距  padding-top距离顶部的距离下边距  padding-bottom左边距  padding-left右边距  padding-right
注意:添加距离后,会把原有的边框进行扩大如果想要不扩大原有的边框,通过设置box-sizing为:border-box即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{width: 400px;height: 300px;border: 1px #000000 solid;/* 外边距 */margin-top: 100px;/* 内边距 */padding-left: 100px;padding-top: 100px;/* 不扩大原有的边框 */box-sizing: border-box;}</style></head><body><div id="div1">芜湖,起飞</div></body>
</html>

5.CSS对文字的排版

1.letter-spacing,调整字符间距,用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。取值：normal ---表示正常显示（默认）长度--可以使用负数，带上单位单位px(像素)
2.添加下划线+删除线等text-decoration属性的取值：underline----添加下划线overline---添加上划线line-through--添加删除线blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）none--没有任何的修饰
3.文本的对齐方式text-align用来控制文本的排列和对齐方式属性的取值：left--左对齐right--右对齐center--居中对齐justify--两端对齐

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{/* letter-spacing,调整字符间距 */letter-spacing: 2px;/* 添加下划线 *//* text-decoration: underline; *//* 添加删除线 */text-decoration: line-through;/* 文本的对齐方式 */text-align: center;}</style></head><body><div id="div1">出题人一到店，所有喝酒的人便都看着他笑，有的叫道，“出题人，你又出景点了！”他不回答，对柜里说，“温两碗酒，要一叠景点报告。”便排出九张试卷。他们又故意的高声嚷道，“你一定又欺负高考考生了！“出题人睁大眼睛说，“你怎么这样凭空污人清白……”“什么清白？我昨天亲眼见你偷偷溜进胡夫金字塔，被巴耶克吊着打。”出题人便涨红了脸，额上的青筋条条绽出，争辩道，“偷入景点不能算偷……潜入！……读书人的事，能算偷么？”接连便是难懂的话，什么“葛军我大哥”，什么“巴黎圣母院”之类，引得众人都哄笑起来：店内外充满了快活的空气。</div></body>
</html>

6.字母大小写转换

text-transform: uppercase;转换为大写
text-transform: lowercase;转换为小写

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#div1{/* text-transform: uppercase; */text-transform: lowercase;}</style></head><body><div id="div1">With the rapid development of computer technology, information security has become a major problem in thedevelopment of the Internet. Secret sharing is an important guarantee mechanism to ensure information security. Itcan share secrets among a group of participants and provide a good security mechanism for the confidentiality of thekey, so it has been widely used.</div></body>
</html>

7.段落的设置

text-indent  用来控制每个段落的首行缩进的距离。属性取值：长度（数字）带上单位百分比相对于上一级元素的宽度
em 倍数对p标签中的文本进行首行缩进line-height: 2em;设置行高

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#p1{/* 首行缩进两个字符 */text-indent: 2em;}#p2{/* 设置行高 */line-height: 2em;}</style></head><body><p id="p1">美国参众两院于 1948 年 6 月同意美国加入世卫组织时的联合决议案（jointresolution）中其实有相关规定。</p><p id="p2">决议案的第四条款提到：因应世卫组织章程没有关于退会之条文，美国保留退出组织之权利，但需在一年前提出（one yearnotice），且美国应已付清对世卫组织的一切债务。这是当时美国加入世卫组织时，认可的条款。也就是说即使美国国会应特朗普要求，同意通过退出世卫组织，也至少是2021年7月以后。并且付清对世卫组织的一切债务。美国人在世卫组织有一万多员工，世卫组织的费用都是用来发工资，做研究烧钱。其中很大一部分是被美国人拿走了，包括工资和研发经费。不可能这么轻易一句话就退出，我无法猜测如果美国真的这么轻飘飘的拍拍屁股走人，世界会怎么看待美国加入的组织，后面大家都会后怕，你美国人来拿工资，烧研发经费，又不付清债务就跑了。</p></body>
</html>

CSS浮动+背景图片+边框+文字排版+段落设置相关推荐

CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果方法: 背景图片层添加样 ...
html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
css怎么分开背景图片,css切背景图片（background-position）
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
如何实现背景/背景图片透明文字不透明
如何实现背景/背景图片透明文字不透明第一种情况,背景为自定义颜色第二种情况,背景为图片总结: 第一种情况,背景为自定义颜色直接给父级背景颜色设置background:rgba();就可以了: ...
html+css+js实现图片，文字，视频，背景音乐盛宴
你进来了吗? 好吧,如果你感受到了欺骗,请您退出吧! 人菜瘾大,时隔一年,终究还是选了web前端,回想去年写的第一条博客也是html,命运总是这么巧合,哈哈哈哈! html+css+js实现图片,文字 ...
css图片如何垂直居中对齐,css怎样让图片和文字垂直居中对齐
css怎样让图片和文字垂直居中对齐发布时间:2020-11-16 10:10:53 来源:亿速云阅读:99 作者:小新这篇文章主要介绍css怎样让图片和文字垂直居中对齐,文中介绍的非常详细,具有 ...
css实现背景图片自动适应
css实现背景图片自动适应 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...

CSS浮动+背景图片+边框+文字排版+段落设置

一.CSS浮动

1.简介

2.CSS浮动图片

3.边框塌陷

4.display属性

二.CSS属性

1.字体的设置

2.颜色的设置

3.背景的设置

(1)背景的颜色+图片+尺寸

(2)背景图片的位置

4.边框的设置

(1)边框的基本设置

(2)边框的圆角和阴影

(3)内边距

5.CSS对文字的排版

6.字母大小写转换

7.段落的设置

CSS浮动+背景图片+边框+文字排版+段落设置相关推荐

最新文章

热门文章