css3学习day2

一.文字

1.字体样式

font-size

.con {font-size: 30px;}

<div class="con">6月11日晚,靠着新加坡队的帮忙,国足以格外惊心动魄的“极限优势”力压泰国队,奇迹般晋级到了世预赛亚洲区18强赛。</div>

浏览器支持的字体大小最小为12px

浏览器默认字体大小16px

2.字体家族

.warp {
            /* font-family: 宋体, Arial; */
            font-family: Arial, 宋体;
        }

<div class="wrap">Hello nice to meet you 你好呀,见到你很高兴
    </div>

 浏览器默认字体是微软雅黑

3.字体粗细

font-weight

.con1 {
            /* 字体加粗 */
            font-weight: 700;
        }
        
        .con2 {
            /* 字体更细的 */
            font-weight: lighter;
        }
 /* 加粗:700,bold */
        /* 正常体:400,normal */

</div>
    <div class="con1">字体粗细表示</div>
    <div class="con2">字体粗细表示</div>
    <div class="con3">字体粗细表示</div>
    <div class="con4">字体粗细表示</div>
    <div class="con5">字体粗细表示</div>
/* 只想加重语气,但不加粗时 */
        
        strong {
            font-weight: normal;
            font-weight: 400;
        }
<strong>abcd</strong>

4.字体风格

font-style

<style>
        /* 变成正常体 */
        
        em {
            font-style: normal;
        }
        /* 变成斜体 */
        
        h2 {
            font-style: italic;
        }
    </style>

<!-- 又想使用em加重语气,又不想字体是斜体 -->
    <em>DATA</em>
    <h2>刘亦菲一部剧带火了5个人</h2>

对字体进行设置时可以按照font:font-style font-weight font-size font-family的顺序一次编辑

如:

<style>
        
        .con {
            font: italic 700 32px 华文彩云;
        }
    </style>

    <div class="con">刘亦菲一部剧带火了5个人</div>

二.链接伪类选择器

/* 1.未访问的链接 */
        
        a:link {
            color: aqua;
        }
        /* 2.已访问的链接 */
        
        a:visited {
            color: pink;
        }
        /* 3.鼠标移动到目标元素上 */
        
        a:hover {
            color: orangered;
        }
        /* 4.选定的链接 */
        
        a:active {
            color: darkgreen;
        }

    <a href="">百度一下</a>
    <a href="http://www.mi.com">我是米粉->我为发烧而生 </a>

注意:a标签的herf不允许删除,如果herf内容没有或不确定见么建议使用'#'

三.color样式设置

/* 1.预定义的值 */
color: red;
/* 2.十六进制表示法0-9 a-f  最小的是0,最大的是f */
            color: #000000;
            color: #ffffff;
            color: #ff0000;
            color: #00ff00;
            color: #0000ff;
/* 3.rgb 0-255 */
            color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            color: rgb(255, 0, 0);
            color: rgb(222, 222, 222);
            color: rgb(037, 121, 065);
/* 4.rgba   alpha 透明度 0-1 */
            color: rgba(255, 0, 0, 0.5);
            color: rgba(255, 0, 0, .5);
            color: rgba(037, 121, 065, .6);

四.行高及对齐方式的使用

1.line-height的使用

/* 1.设置行间距 行与行之间的间距变大 */
            line-height: 50px;

/* 当行文本在垂直方向居中->垂直居中
        line-height的值与盒子的高height相同 */
        
        .box {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            line-height: 500px;
            text-align: center;
        }
div class="box">走起来</div>

2.单行文本水平居中

text-align

.box {
            width: 150px;
            height: 50px;
            border: 1px solid red;
            /* 水平居中 */
            text-align: center;
}

<div class="box">走起来</div>

 图片居中方法类似,<div class="box"><img src="" alt=""></div>

五.文本类

1.文本首行缩进

ext-indent

 p {
            /* 首行缩进  em*/
            text-indent: 2em;
        }

<p>实践教学管理 规范化管理实践教学,提升实习资源配置效率和精细化管理。过程管理和辅导全程纪录,有效监控实习质量和师生考核 资源配置规范管理</p>

2.文本修饰

text-decoration

.text1 {
            /* 删除线 */
            text-decoration: line-through;
            /* 下划线 */
        }
        
.text2 {
            text-decoration: underline;
        }
        /* 上划线 */
        
.text3 {
            text-decoration: overline;
        }


<span class="text1">8999</span>
<span class="text2">10000</span>
<span class="text3">10000</span>

3.文本字符间距

word-spacing

 .con1 {
            /* 字符间距 */
            letter-spacing: 30px;
            /* 背景颜色 */
            background-color: aliceblue;
        }
        
.con2 {
            /* 单词间距 */
            word-spacing: 30px;
        }

<div class="con1">我们是最棒的nice nice nice</div>
<div class="con2">我们是最棒的nice nice nice</div>