HTML初学笔记（第二章）

lolo大魔王

于 2024-04-08 20:02:56 发布

阅读量692

点赞数 12

文章标签： html 笔记前端

本文链接：https://blog.csdn.net/m0_72664637/article/details/137520813

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <style type="text/css">
    /* font-size字号 */
    /* font-family字体 */
    /* font-weight粗细 */
    /* font-style字体风格 */
    /* font样式 */
    /* font-face定义服务器字体 */
        p{
            font-size: 24px;
            text-align: center;
            letter-spacing: 10px;
        }
        /* 通配符选择器 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 标签选择器 */
        p{
            color: red;
        }
        /* 类选择器 */
        .myp1{
            color: green;
        }
        /* id选择器 */
        #myp2{
            color: blueviolet;
        }
    </style>
    <!--3. 链入式  外部文件导入-->
    <!-- <link rel="stylesheet" href="css/mystyle.css" type="text/css"> -->
    <!-- <style type="text/css">
        @import url(css文件路径);
    </style> -->
    <!-- 导入式 -->
</head>
<body>
    <p>123123</p>
    <p align="center">今天很开心</p>
    <!--1. 行内式  style属性 -->
    <span class="myp1" id="myp3">哈哈哈哈</span>
</body>
</html>

1.用css样式美化样式

使用HTML对网页进行修饰，存在很大的局限和不足，所以大多数的情况下都是需要用CSS实现网页细节的完善。

CSS可以实现结构与表现的分离。结构与表现相分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以“.css”为后缀名。

如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。

1.1CSS代码结构的特点

CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般将选择器、声明都采用小写的方式。

多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。

如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在编写CSS代码时，为了提高代码的可读性，可使用“/*注释语句*/”来进行注释。

在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码。

1.2CSS样式规则

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。

1.3CSS样式表

1.3.1行内式

行内式也称为内联样式，是通过标签的style属性来设置元素的样式，其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

1.3.2内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，其基本语法格式如下:

<head>

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

1.3.3链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:

<head>

</head>

1.3.4导入式

导入式针对外部样式表文件。对HTML头部文档应用style标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下:

@import url(css文件路径);或 @import "css文件路径"; /* 在此还可以存放其他CSS样式*/ </style>

1.4.CSS基础选择器

1.4.1标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1.4.2类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1.4.3.id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1.4.4通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1.5.CSS复合选择器

1.6.CSS优先级

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。

行内样式优先。

权重相同时，CSS遵循就近原则。

CSS定义了一个!important命令，该命令被赋予最大的优先级。

由此可见

权重：id选择器>类选择器>标签选择器

id选择器100 类选择器10 标签选择器1

2.关于font的使用

2.1.font-size字号的使用

2.2.font-weight字体粗细使用

2.3.font-style字体风格的使用

2.4.font的使用

2.5.font-face服务器字体样式的设置

3.关于color颜色的使用

4.关于text的使用

4.1.text-align文本水平对齐的使用

4.2.text-transform 英文大小写的使用

4.3.text-decoration文本装饰效果的使用

4.4.text-indent首行文本缩进的

4.5.text-shadow文本阴影效果的使用

4.6.text-overflow溢出文本的处理方式的使用

5.其他标签的使用

5.1.letter-spacing字间距的使用

5.2.word-spacing英文字间距的使用

5.3.line-height行间距的使用

5.4.white-space设置空白符号的处理方式的使用

lolo大魔王

关注

12
点赞
踩
8

收藏

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

分享到 QQ

分享到新浪微博

扫一扫