文本、列表、背景、浮动属性
一、文本属性
文本大小:font-size(重要)
font-size
单位是px
,浏览器默认是16px
,设计图常用字号是12px
字体:font-family(重要)
当字体是中文字体、英文字体中有空格时,需加双引号
多个字体中间用逗号链接,先解析第一个字体,如果没有解析第二个
文字颜色:color(重要,常用)
css
中颜色的表现形式大致分为四种
- 直接用英文
color:red
直接在后面写出颜色对应的英文
rgb
三原色color:rgb(255,0,0)
红绿蓝三种颜色的深浅程度叠加形成显示的颜色,0~255,越大颜色越深- 000是白色,255,255,255是黑色
- 16进制
color:#00AAFF
对应的其实就是rgb
的颜色,两两一组,三组16进制的数字表示rgb
三种颜色的深浅color:#0AF
省略用法,若三组数字,每组组内的16进制数字相同,则可以省略
加粗:font-weight
常规—>加粗—>更粗
-
用英文形式表示:
font-weight : normal
—>bold
—>bolder
-
也可以用数字形式:
font-weight : 100-900
- 其中100-500不加粗,600-900加粗
斜体:font-style
常规—>倾斜的文字—>斜体字
normal
—>oblique
—>italic
水平对齐:text-align(重要,常用)
文本水平对齐
text-align:left
水平靠左,right
靠右,center
水平居中text-align:justify
水平两端对齐,只对多行文本起作用
行高:line-height
在文字大小固定的情况下,通过设置line-height
行高,对文字所占空间进行设置,文字默认在行高内是居中的
假设文字被div
包裹,div
设置了高度的情况下,如果我们想让文字在div
垂直居中,就可以通过把行高line-height
设置为和div
相同高度的方式,完成文字的垂直居中。(多行文本需另外设置)
<style>
width:100%;
height:100px;
background-color:yellow;
line-height:100px
</style>
<div>
Hello,World!
</div>
<!--此时 Hello,World! 在div中垂直居中-->
首行缩进:text-indent
text-indent : 2em
首行缩进两个字符,em
是相对于当前字体大小的单位,1em就是一个字符的大小,可以为负数
字间距:letter-spacing
letter-spacing : 10px
每个字符的间距,英文中每个字母都会隔开
word-spacing : 10px
每个单词的间距,中文没影响,英文中被空格分开的单词会设置间距,可以为负值
文本修饰:text-decoration
text-decoration : underline
下划线text-decoration : line-through
删除线text-decoration : overline
上划线text-decoration : none
没有线(通常用在<a>
标签上,去除自带的下划线)
若需要多个线同时显示,需要写在一行内,用空格隔开,否则新写的内容会覆盖原来的内容
text-decoration : overline underline line-through
大小写:text-transform
text-transform : capitalize
每个单词首字母大写text-transform : lowercase
全部小写text-transform : uppercase
全部大写
文本属性合并设置:font
必须按照斜体 加粗 字体大小/行高 字体的顺序写,必须同时指定font-size
和font-family
属性时才起作用
斜体和加粗可以省略,其他的不可以
font : italic bold 20px/1em 微软雅黑
font : 20px/2em 宋体
二、列表属性:<ul><li>
<style>
ul{
list-style-type:none;
list-style:none;
/*
disc 实心圆,默认
circle 空心圆
square 实心正方形
none 空,方便个性化设置
*/
list-style-image:url(img/3.jpg);
list-style-position:outside;
/*默认为outside,可以设置为inside,列表是否包裹前面的标签*/
list-style: none url(img/1.jpg) inside;
/*复合写法,顺序可打乱*/
}
</style>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
三、背景属性:background
背景图片
div{
background-image : url(img/1.jpg);
background-repeat:no-repeat;
/*
repeat:默认平铺(重复展示直至铺满背景)
repeat-x:x轴平铺
repeat-y:y轴平铺
no-repeat:不平铺
*/
background-position:left center;
/*可以写的值为
20px 20px
10% 10%
水平方向:left center right
垂直方向:top center bottom
*/
background-size:cover;
/*可以写的值为
400px 400px
100% 100%
cover:把背景图像扩展至足够大,以使图片完全覆盖背景区域,等比例缩放,可能无法显示完整
优先铺满背景区域
contain:把图像扩展至最大尺寸,尽量撑满容器,等比例缩放,容器可能无法被全部填充
优先完整展示图片
*/
background-attachment:fixed
/*默认为scroll,自带滚动条
fixed为窗口固定,仅固定图片,容器不会被固定且可以被另一个fixed背景覆盖
*/
}
背景属性的复合写法
div{
background : yellow url(img/1.jpg) no-repeat center fixed
/*用空格隔开,顺序可以改变,
可以只设置一个值,但是如果放在后面会覆盖前面设置过的值*/
/*background-size属性只可以单独使用*/
}
四、浮动属性
float : left
靠左边浮动
float : right
靠右边浮动
float : none
不浮动
浮动的作用:
- 定义网页中其他文本如何环绕该元素显示
- 让原本竖着排列的元素横向排列
元素浮动带来的问题:高度塌陷
标记浮动属性的元素在页面中的高度会变成0,其他元素会把浮动起来的位置重新占领,导致重叠
解决方案:
- 给其他元素写固定高度,保证不重叠
- **清浮动 **
clear
,要加在后面的元素身上,不影响浮动元素
clear : none;/*不允许有浮动对象*/
/*right 不允许右侧有浮动对象 float:right x
left 不允许左侧有浮动对象 float:left x
both 不允许有浮动对象
*/
- 在当前浮动元素后面补一个
<div>
不设置宽高,加上clear:both
属性 - **
overflow : hidden
**使用bfc
(块级格式化上下文,Block Formatting Contexts),让浮动元素计算高度
overflow:hidden
才是最常用的解决方案,要加在浮动元素上面