前端学习之CSS---文本、列表、背景、浮动属性

文本、列表、背景、浮动属性

一、文本属性

文本大小：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，其他元素会把浮动起来的位置重新占领，导致重叠

解决方案：

1. 给其他元素写固定高度，保证不重叠
2. **清浮动 ** clear ，要加在后面的元素身上，不影响浮动元素

clear : none;/*不允许有浮动对象*/
/*right 不允许右侧有浮动对象 float:right  x
  left  不允许左侧有浮动对象 float:left   x
  both  不允许有浮动对象
*/

3. 在当前浮动元素后面补一个<div>不设置宽高，加上clear:both属性
4. **overflow : hidden**使用bfc（块级格式化上下文，Block Formatting Contexts），让浮动元素计算高度

overflow:hidden 才是最常用的解决方案，要加在浮动元素上面