前端css之文本操作及块级元素和行内元素

1.文本操作

1.1文本颜色（color）

颜色指定方式：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

1.2水平对齐方式

text-align 属性规定元素中的文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。

文本换行：添加css属性

　　word-wrap:break-word;
　　word-break:break-all;

1.3文本其他操作

font-size: 10px;   
字体大小，如果设置成inherit表示继承父元素的字体大小值

line-height: 200px;      （文本居中用，记住记住）
文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  
设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效。
属性值：none | center | left | right | justify

text-decoration:none       
text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线)  | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif      
字体颜色。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

font-weight: lighter/bold/border/     
表示设置字体的粗细   
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）

font-style: oblique
设置字体的样式为斜体

text-indent: 150px;      
设置首行缩进150px

letter-spacing: 10px;  
字母间距

word-spacing: 20px;  
单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

1.4背景属性

background-color:背景颜色
background-image:url('11.jpg'); 背景图片链接
background-repeat:repeat-x; x轴平铺
background-repeat:no-repeat; 不重复
background-position:400px 200px 调整背景的位置（距左。距右）
background-position: center:center; 背景居中

简写：
background: url('11.jpg') no-repeat center;

background-repeat相关属性：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-image: url('./timg.jpg');
            border: 1px solid red;
            /*取消铺满模式*/
            /*background-repeat: no-repeat;*/
            padding: 50px;
            background-position: right left;
        }
    </style>
</head>
<body>

    <div></div>
</body>
</html>

效果：

1.5边框属性

常用属性

　　简写：border :1px soild red;
　　deshed:虚线
　　只加有一个方向的：border-right :1px soild red;

1.6列表属性

去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}

2.块级标签与行内标签

行内元素：

　　与其他元素并排

　　无法设置宽，高，默认宽度就是文字宽度

块级元素：

　　独占一行，不与其他元素并列

　　能设置宽高，不设置则默认为父级的100%

从HTML角度讲，标签分为文本级标签（p、span、a、b、i、u、em）和容器级标签（div、h系列、li、dt、dd）

从CSS 角度讲，元素分为行内元素（除了p之外，所有的文本级标签，都是行内元素）和块级元素（所有的容器级标签都是块级元素，还有p标签）

2.1 块级元素和行内元素相互转换（display）

块级元素转换为行内元素：

display：inline

行内元素转换为块级元素：

display：block

像块级一样可设长宽，也可像内联一样在一行显示：

display:inline-block

把不想让用户看到的给隐藏了

display:none（不会影响布局）

或visibility :hidden（会影响布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
        h1{
            width: 300px;
            height: 100px;
            background: red;
            display: inline;
            /*隐藏当前的元素，但是不占当前位置*/
            /*display: none;*/
            /*隐藏当前的元素，但是占据当前位置*/
            visibility: hidden;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
            /*display: block;*/
        }
        input{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>1级标题</h1>
    <h1>1级标题</h1>

    <span>内容</span>
    <span>内容</span>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <input type="text">
    <input type="text">
</body>
</html>