Day03

不万能的小李.

已于 2023-08-10 20:02:50 修改

阅读量63

点赞数

分类专栏： HTML5 和 css 文章标签： html5

于 2023-07-08 11:09:19 首次发布

本文链接：https://blog.csdn.net/Li1023055421/article/details/131589032

版权

HTML5 和 css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了CSS的三种引入方式，包括行间、内部和外部样式表，并详细讲解了border属性设置，如宽度、颜色和样式。此外，讨论了文本修饰如下划线、删除线以及颜色设定，还涵盖了text-transform用于文本大小写的转换。最后，提供了实际的HTML代码示例进行文本操作的练习。

摘要由CSDN通过智能技术生成

01、css的引入方式

css：层叠式样式表

css引入方式：

1.行间引入

<div class="wp">这是css的引入方式</div>

2.内部样式表

<style type="text/css">
    .wp {
    border:1px #ff0 solid;
 }
</style>

3.外部样式表（这个是开发时最长用的）

<link rel="stylesheet" href="">

href="" （引号内为 css 的地址）

link 和 @import 引入css的区别

1.@import 是 css2.1 之后才推出的，因此可能存在兼容问题，link不存在兼容问题

2. link 不仅可以引入 css ，也可以引入其他类型的文件，功能更加强大推荐使用link

02、css文本操作

border 属性

border-width 设置border的宽度

border-color 设置border的颜色

border-style 设置boeder的样式

<div class="wp">厉不厉害你鸡哥</div>

.wp {
    border-width:5px
    border-color:#800080;
    border-style: dashed;
}

他们三个可以合写

也可以单独给某一边设置border

border-top 设置上边

border-left 设置左边

border-right 设置右边

border-bottom 设置下边

常用的 border-style 值

1.solid 实线

2.dotted 圆点虚线

3.dashed 短线虚线

4.none 隐藏barder

5.double 双实线（不常用）

6.3D 边框（不常用）

groove 3D凹槽

rifge 3D凸槽

inset 内嵌

outset 外嵌

color 属性：设置文本颜色

值：

1.英文单词

2.16进制颜色 0~F ,#后面跟6位表示颜色的数字，前两位表示红色，中间两位表示绿色，后两位表示蓝色。

#aabbcc 如果两两相等，则可以简写为 #abc

3.RGB（），rgba（）设置颜色

括号当中设置对应位置的数字

0~255，0表示黑色 255表示白色

rgb（255,0,0）表示的就是红色

而rgba 中 a表示的是透明度，取值范围是0~1 ，0表示完全透明 1表示完全不透明

文本修饰 text-decoration

值：

1. underline 下划线

2. overline 上划线

3.line-through 中划线（删除线）

4.none 去掉线（没有文本修饰线）

文本转化 text-transfrom

值：

1.lowercase 全部小写

2.uppercase 全部大写

3.chpitalize 单词的首字母大写

行高 line-height

对于单行文本，line-height 设的高度如果和标签高度形同，则可以做垂直居中效果

如果是多行文本，可以理解为行间距

03、文本操作

direction 设置文字的方向

ltr 默认，文字从左向右排列

rtl 从右向左

text-indent 首行缩进，它的值是具体的数值

letter-spacing 设置两个字符之间的距离

word-spacing 设置两个单词之间的距离

04、文本练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本练习</title>
    <link rel="stylesheet" href="./css/txt.css">
</head>
<body>
    <div class="bar">
        <a href="###">首页</a>
        <a href="###">新闻</a>
        <a href="###">科技</a>
        <a href="###">军事</a>
        <a href="###">首页</a>
        <a href="###">新闻</a>
        <a href="###">科技</a>
        <a href="###">军事</a>
    </div>
    <h2 class="tit"><strong>新闻各有态度</strong></h2>
    <!-- 侧边栏内容部分 -->
    <div class="cont">
        <h2 class="cont-tit">数读</h2>
        <h3 class="cont-tit1">
            <a href="###">在大学,这类专业在批量消失</a>
        </h3>
        <img src="./img/苹果网页1.png" alt="" width="200px">
        <ul class="list">
            <li>
                <a href="###">你抢不到的演唱会门票，都去哪了</a>
            </li>
            <li>
                <a href="###">你抢不到的演唱会门票，都去哪了</a>
            </li>
            <li>
                <a href="###">你抢不到的演唱会门票，都去哪了</a>
            </li>
        </ul>
    </div>wuyiwangzhibujian
    <!-- 第二部分 -->
    <div class="box">
        <span style="font-size: 20px;">
            <a href="###">
                <strong>悟已往之不谏,知来者之可追</strong>
            </a>
            <a href="###"><strong>悟已往之不谏,知来者之可追</strong>
            </a>
        </span>
        <br>
        <span>
            <a href="###"><strong>悟已往之不谏,知来者之可追</strong>
            </a>
        </span>
        <span>
            <a href="###"><strong>悟已往之不谏,知来者之可追</strong>
            </a>
        </span>
        <p><a href="">悟已往之不谏,知来者之可追</a></p>
        <p><a href="">餐饮业复苏势头强劲</a></p>
        <span><a href="">健康中国｜</a></span>
        <span><a href="">持续高温 小心热射病！常见症状有哪些？</a></span>
        <p><a href="###">当农业生产遇到极端天气 如何做好田间管理？</a></p>
        <p><a href="###">当农业生产遇到极端天气 如何做好田间管理？</a></p>
        <p><a href="###">当农业生产遇到极端天气 如何做好田间管理？</a></p>
        <p><a href="###">当农业生产遇到极端天气 如何做好田间管理？</a></p>
        <a href="###"><img src="../Day02/img/消防车.png" width="600px" height="50px" alt=""></a>
    </div>
</body>
</html>

txt.css

/*   重置a标签的样式 */
a {
    text-decoration: none;
    color: #666;
}
/* 设置鼠标经过a标签，元素变色 */
a:hover {
    color: #f00;
}
.bar {
    height: 47px;
    line-height: 47px;
    border-top:1px #f00 solid;
    border-bottom: 1px #ccc solid;
    text-align: center; 
}

/* 设置新闻标题 */
.tit {
    text-indent: 20px;
    border-left: 3px #f00 solid;
    line-height: 25px;
    width: 200px;
   
}
.cont {
    border: #ccc solid;
    width: 200px;
    border-left: none;
    border-right: none;
}

.cont-tit {
    text-align: center;
    height: 50px;
    line-height: 50px;
}

.cont-tit1 {
    line-height: 30px;
}

.list {
    list-style-type: none;
    padding: 0;
}

.box {
    width: 600px;
    height: 355px;
}