零基础必看的Html5+Css3+移动端前端教程(五)

知心宝贝

已于 2022-06-08 19:54:01 修改

阅读量2.5k

点赞数 16

分类专栏：前端文章标签： opengl c++ css

于 2021-11-28 11:08:25 首次发布

本文链接：https://blog.csdn.net/qq_53673551/article/details/121548245

版权

前端专栏收录该内容

13 篇文章 25 订阅

订阅专栏

本文详细介绍了CSS的基础选择器（包括标签、通配符、类和id）、字体属性（如字体类型、大小、粗细等）以及文本属性（颜色、对齐、装饰和缩进），并涵盖不同样式表引入方法。通过实例演示，助您提升HTML页面设计技巧。

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

一、前言

CSS是Html的美容师，通过对CSS的学习，针对Html页面丑、样式和文字结构不相容等问题做一个解决。教程五主要针对基础的选择器、文字属性、文本属性以及样式做了一个详尽的描述，希望大家学得开心。

二、CSS基础选择器

1.标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：可以把某一类标签全部选择出来。
优点：快速为网页中同类型的标签统一样式
缺点：不能设计差异化样式。

语法：

    <style>
        h3 {
            color: red;//所有h3标签字体颜色为红色
        }
    </style>

2.通配符选择器

通配符选择器用*号表示，* 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

语法为：

   <style>
        /* 页面所有颜色都为红色 */
        * {
            color: red;
        }
    </style>

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

3.类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点 "."号显示。

语法：

   </head> 
    <style>
        /* 定义红色和蓝色两个类 */
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .blue {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
   </head>
  <body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="red"></div>
 </body>

优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。
注意：类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。
- 多类名选择器：各个类名中间用空格隔开。

4.id选择器

id选择器使用#进行标识，后面紧跟id名

元素的id值是唯一的，只能对应于文档中某一个具体的元素。

    <style>
        #red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

<div id="red"></div>

5.总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#red {color: red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.red { color: red; }

三、字体属性

1.字体类型

    <style>
        p {
            font-family: '微软雅黑','Microsoft YaHei',Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <p>用类标签显示字体属性</p>
    <p>font-family中可以设置多个字体，字体类型要用,隔开，如果字体类型分割可以使用''号</p>
    <p>尽量使用系统默认字体和英文标识</p>
</body>

2.字体大小

font-size属性用于设置字号(字体大小)
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。

    <style>
        p {
            font-size: 20px;
        }
    </style>
</head>
<body>
   <p>字体大小的数字也就是像素值，后面的px不能忘</p>
</body>

3.字体粗细

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold ，使用数字后面什么都不必写

    <style>
        p {
            font-weight: bolder;
        }
    </style>
    <body>
         <p>字体的粗细使用</p>
    </body>

4.字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

    <style>
       em {
           font-style: normal;
       }
    </style>

   <body>
       <!-- 把原本在em中倾斜的内容变正常 -->
       <em>字体风格的使用教程</em>
   </body>

我们一般不使用font-style来定义倾斜字体，反而通过它把<em></em>变为正常

5.复合属性

<body>
    <!-- 为下面内容设置倾斜、加粗、20字体大小、黑体字体类型 -->
   <p>复合属性的使用</p>
</body>

平常的方法是：每一个属性都写一个，如下：

     <style>
        p {
            font-style: italic;
            font-weight: 700;
            font-size: 20px;
            font-family: '黑体';
        }
    </style>

对于复合属性而言：

    <style>
        /* 选择器 { font: font-style  font-weight  font-size/line-height  font-family;} */
        /* 选择器属性对应的值必须一一对应，对于style和weight非必要可以不写，其他必须写 */
        p {
            font :italic 700 20px '黑体';
        }
    </style>

5.总结

属性	表示	注意点
font-size	字号	尽量使用系统默认字体和英文标识
font-family	字体	字体大小的数字也就是像素值，后面的px不能忘
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

四、文本属性

1.文本颜色

表示表示	属性值
预定义的颜色值	red，green，blue等
十六进制	#FF0000，不必记忆
RGB代码	rgb(255,0,0)

开发中最常用的是十六进制表示颜色。

2.文本对齐

文本对齐指的是水平对齐:

    <style>
        div {
            text-align: center;
        }
    </style>

其可用属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

3.文本装饰

text-decoration属性规定添加到文本的属性，如下划线、上划线、~~删除线~~。

    <style>
        div {
            text-decoration: underline;
        }
    </style>

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

常用的是text-decoration添加下划线和删除默认的下划线。

4.文本缩进

text-indent为控制缩进的元素，对于后面的单位，px为默认像素值，em为文字，2em就是空出2个文字的距离。

    <style>
        p {
            text-indent: 20px;
            text-indent: 2em;
        }
    </style>

5.行间距

line-height控制行与行之间的距离，单位为像素px.

    <style>
        p {
            line-height: 26px;
        }
    </style>

6.总结

属性	表示	注意点
color	颜色	我们通常用十六进制
line-height	行高	控制行与行之间的距离
text-align	对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	下划线 underline 取消下划线 none

五、CSS引入方式

1.行内样式表

在元素标签内部的style属性中设置变量，如

<body>
    <p style="font-family: '黑体';font-size: 16px;">内部样式表</p>
</body>

2.内部样式表

就是一开始写在<style></style>标签中，如

    <style>
        p {
            line-height: 26px;
        }
    </style>

3.外部样式表

自定义一个以.css结尾的文件，把关于html所有的属性写到css中，并通过link标签实现链接。

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

4.总结

六、案例实践

对于教程五主要针对基础的选择器、文字属性、文本属性以及样式的学习，通过掌握这些知识，做出一个新闻案例，如下图：

知心宝贝

关注

16
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录