【web前端开发 | CSS】css样式

最新推荐文章于 2024-01-22 14:51:51 发布

-4444x-

最新推荐文章于 2024-01-22 14:51:51 发布

阅读量358

点赞数

分类专栏：移动与web前端开发文章标签： css css3

本文链接：https://blog.csdn.net/qq_43490212/article/details/109132208

版权

移动与web前端开发专栏收录该内容

41 篇文章 2 订阅

订阅专栏

思维导图

在这里插入图片描述

1 字体样式

font-family

font-family 属性定义文本的字体系列。

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
一般不同字体，多写几个，浏览器将会按照你写的顺序一个接一个识别，直至识别出可以显示的

font-size

font-size 属性定义字体大小。

单位：像素 px
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大

font-weight

font-weight 属性设置文本字体的粗细。

属性	描述
normal / 400	正常
bold / 700	加粗
bolder	特粗体
lighter	细

学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用数字表示粗细

font-style

font-style 属性设置文本的风格。

属性	描述
normal	让斜体不再倾斜
italic	斜体

平时让<i></i>和<em></em>不再倾斜

复合属性

font:font-style font-weight font-size/line-height font-family;

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

2 文本样式

color

【叽叽歪歪】文章尾部附带颜色的三种方式，算了不带了，具体会，需要概念时再百度

点击查看各颜色三种数值

上述网站截图

text-align

text-align 属性用于设置元素内文本内容的水平对齐方式。

属性	描述
left	左对齐
center	居中
right	右对齐

text-decoration

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

属性	描述
none	默认，没有修饰线
underline	下划线
overline	上划线
line-through	删除线

text-indent

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

注：单位em，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

line-height

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

其他属性参考手册
W3 school

【叽叽歪歪】小练习：做一个百度搜索页（有小瑕疵，后续再改）其中用到了浮动标签啥的，不过不会。css样式是外部引入。

HTML部分代码

<!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/hw_01.css">

</head>

<body align="center">

    <form action="#" method="GET" name="百度">

        <!-- 导航栏 -->

        <div class="top">
            <div class="n_01">
                <a href="#">新闻</a>
                <a href="#">hao123</a>
                <a href="#">地图</a>
                <a href="#">视频</a>
                <a href="#">贴吧</a>
                <a href="#">学术</a>
                <a href="#">更多</a>
            </div>

            <div class="n_02">
                <a href="#">设置</a>
                <input type="button" value="登录">
            </div>
        </div class='sousuokuang'>
        <div>
            <!-- logo部分 -->
            <div class="logo_01">
                <img src="../image/百度一下.png" alt="百度logo">

            </div>

            <!-- 搜索框 -->
            <div class="sousuo">
                <input type="text" class="sel_01">
                <input type="button" value="百度一下" class="sel_02">

            </div>
        </div>
    </form>

    <!-- 热搜 -->
    <div class="down">
        <table class="table_1" align="center">
            <tr>
                <td>百度热搜</td>
                <td><img src="../image/换一换.png" alt="刷新"></td>
            </tr>
            <tbody align="left">
                <tr>
                    <td><a href="#"><span class="co_1">1</span> 吉尔吉斯斯坦总统宣布辞职</a> </td>
                    <td><a href="#">4 90后同名同姓情侣领证结婚</a></td>
                </tr>

                <tr>
                    <td><a href="#"><span class="co_2">2</span> 台军包机被拒入香港空域返航</a></td>
                    <td><a href="http://baidu.com">5 侯佩岑回应与昆凌撞图</a></td>
                </tr>
                <tr>
                    <td><a href="#"><span class="co_2">3</span> 阿里集团回应淘宝台湾将停止运营</a></td>
                    <td><a href="#">6 警方回应成都大学党委书记疑失联</a></td>
                </tr>
            </tbody>
        </table>

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

css部分代码

* {
    margin: 0;
    padding: 0;

}

a {
    font-size: 13px;
    text-decoration: none;
    color:black;
    margin:10px;
    line-height: 40px;
}
.top{
    overflow: hidden;
}

.n_01 {
    float: left; 
    /* background-color: rgb(127, 235, 100); */
}

.n_02{
    float: right;
    padding-right: 20px;
    /* background-color: rgb(105, 45, 202); */
}

.sel_01 {
    width: 300px;
    height: 47px;
    border-radius: 20px 0 0 20px;
    /* background: url(../image/相机.png) no-repeat ; */
}

.sel_02{
    width: 100px;
    height: 49px;
    font-size: 21px;
    color: white;
    background-color: blue;
    border: 0;
    border-radius:  0 10px 10px 0;
}

.ta_0 {
    overflow: hidden;
}

.ta_1 {
    float: left;
}

.ta_2 {
    float: right;
}
.sousuokuang {
    text-align: center;
}
.down{
    text-align: center;
   
}
.table_1{
    margin: 0 auto;
}

.co_1 ,.co_2,.co_3 {
    color: red;
}