HTML&CSS学习总结—03

最新推荐文章于 2024-10-05 17:04:37 发布

hyeffort

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量151

点赞数

分类专栏：工作文章标签： css

本文链接：https://blog.csdn.net/hyeffort/article/details/108715660

版权

工作专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

- CSS层叠样式表（一）

CSS层叠样式表（一）

CSS简介

CSS是层叠样式表，简称样式表或级联样式表。它是一种标记语言，主要用于设置HTML页面中的文本格式、图片格式和版面布局等样式。
CSS由选择器和声明组成，声明由属性和属性值组成，多个声明之间用“;”分隔，即选择器 {样式; 样式；…}。
CSS基础选择器
- 标签选择器
  - 语法格式
```
标签名 {
			属性1：属性值1；
			属性2：属性值2；
			属性3：属性值3；
			...
		}
<style>
	div {
    		color: pink;
		}
</style>
```
    标签选择器是用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，但是不能进行差异化设置。
- 类选择器
  - 语法格式
```
.类名{
		属性1：属性值1；
		属性2：属性值2；
		属性3：属性值3；
		...
	}

<style>
	.red {
		color: red;
	  	 }
</style>

<p class="red">这是红色字体</p>
```
    类选择器使用“.”进行标识，后面紧跟自己定义的类名。通常用来差异化选择不同标签。
  - 多类名
```
  ```
      <style>
              .box {
                  width: 200px;
                  height: 100px;
                  font-size: 50px;
              	}
      
              .red {
                  /* 背景颜色 */
                  background-color: red;
              }
      
      </style>
    
          <div class="red box"> </div>
  ```
```
    一个标签可以指定多个类名，从而达到使用多种样式的目的。在标签的class属性中写多个类名，类名之间用空格分开。
    多类名开发可以将一些标签使用的相同样式放到同一个类中，这些标签可以调用这个公共类，然后再调用自己独有的类。
- id选择器
  - 语法格式
```
#类名{
		属性1：属性值1；
		属性2：属性值2；
		属性3：属性值3；
		...
	}

<style>
	#red {
		color: red;
	  	 }
</style>

<p id="red">这是红色字体</p>
```
    id选择器可以利用标签中的id属性为标签指定特定样式，以#定义，以id调用。在每个HTML文档中，id选择器只能出现一次。
- 通配符选择器
  - 语法格式
```
* {
		属性1：属性值1；
		属性2：属性值2；
		属性3：属性值3；
		...
	}

<style>
	  * {
		color: red;
	  	 }
</style>
```
    通配符选择器用*定义，其不需要调用，自动给所有元素赋予样式。
- 总结

基础选择器	作用	特点
标签选择器	可以选出所有相同的标签	不能差异化选择
类选择器	可以选出1个或多个标签	可以根据需求选择
id选择器	一次只能选择一个标签	id属性只能在每个HTML文档中出现一次
通配符选择器	选择所有标签	特殊情况使用

CSS字体属性
- 字体系列
  - 语法格式
```
<style>
    h1 {
        font-family: Microsoft Yahei;
    }
    p {
        font-family: 'Times New Roman', Times, serif;
    }
</style>
```
    font-family用来定义字体系列，字体之间要用英文逗号分隔，由多个单词组成的字体名称需要加引号。
    尽量使用系统自带字体，确保用户的浏览器兼容。
  - 字体大小
    - 语法格式
```
<style>
    /* 标题标签比较特殊，需要单独指定文字大小 */
    h1 {
        font-size: 50px;
    }
    p {
        font-size: 20px;
    }
</style>
```
      font-size用来定义字体大小，在定义字体大小时一定要加单位px，谷歌浏览器默认的字体大小为16px。
      可以给body指定整个页面文字的大小。
  - 字体粗细
    - 语法格式
```
	<style>
        .weight-number {
            font-weight: 700;
        }
        .weight-english {
            font-weight: bold;
        }
        h1 {
            font-weight: 400;
        }
    </style>
```
      font-weight用来定义字体粗细，实际开发时通常使用数字表示粗细。
      nromal=400=不加粗，bold=700=加粗。
- 字体样式
  - 语法格式
```
<style>
        /* 在实际开发中通常不设置成斜体 */
        p {
            font-style: italic;
        }
</style>
```
    font-style用来定义字体样式，如斜体。
    normal——默认值，正常字体。
    italic——斜体样式。
- 字体复合属性
  - 语法格式
```
<style>
        /* 将p标签内的文字变倾斜、加粗、字体20px、宋体 */
        p {
            /* font-style: italic;
            font-weight: 700;
            font-size: 20px;
            font-family: "宋体"; */
            /* 使用复合属性 */
            /* font: font-style font-weight font-size/line height font-family; */
            font: italic 700 20px "宋体"
        }
</style>
```
    字体属性可以按照上述代码将文字样式综合书写，但是有两点需要注意。
    使用复合属性时，必须按照代码中的顺序书写，不能更换顺序，并且属性之间以空格分隔。
    不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则复合属性不起作用。
- 总结

属性	含义	注意
font-size	字体大小	设置时记得加px单位
font-family	字体系列	根据需求选择
font-weight	字体粗细	加粗是700或bold，正常是400或normal
font-style	字体样式	italic是倾斜，但通常设置为normal
font	字体属性连写	连写有顺序；font-size和font-family必须写

文本属性
- 文本颜色
  - 语法格式
```
<style>
        p {
            color: red;
            
            color: rgb(255, 0, 0); 
        }
        h1 {
            color: #ff0000;
        }
</style>
```
    color属性用于定义文本的颜色，颜色有三种表示方式，分别为预定义的颜色值、十六进制和RGB代码。如红色对应red、#FF0000和rgb（255,0，0）。
- 文本对齐
  - 语法格式
```
<style>
        h1 {
            text-align: center;
        }
        p {
            text-align: right;
        }
</style>
```
    text-align属性用于设置文本内容的水平对齐方式，分别为左对齐left、右对齐right和居中对齐center。
- 文本装饰
  - 语法格式
```
<style>
        h1 {
            text-decoration: underline;
        }
        a {
            text-decoration: none;
        }
</style>
```
    text-decoration用于定义文本的装饰，如下划线underline、上划线overline和删除线line-through，当属性值为none时没有装饰线。
- 文本缩进
  - 语法格式
```
<style>
        p {
            /* 文本的第一行首行缩进 */
            text-indent: 30px; 
            /* 也可以使用em单位，1个em相当于当前文字1个文字大小的距离 */
            text-indent: 2em;
        }
</style>
```
    text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
    可以利用px和em两个单位进行缩进，px是精确到像素，em是当前文本1个文字的大小。
- 行间距
  - 语法格式
```
<style>
        p {
            line-height: 20px;
        }
</style>
```
    line-height用来定义行间的距离，即行间距。行间距由上间距、文本高度和下间距组成。
- 总结

属性	含义	注意
color	文本颜色	通常使用十六进制表示
text-align	文本对齐	根据需求选择
text-indent	文本缩进	通常使用em单位，缩进2个字的距离——2em
text-decoration	文本修饰	主要使用下划线underline
line-height	行间距	根据需求选择

CSS的引入方式
- 行内样式表（行内式）
  - 语法格式
```
<p style="color: red; font-size: "20px">马里奥</p>
```
    行内样式表就是在标签内部利用style属性定义CSS样式，适用于简单样式的修改。
- 内部样式表（嵌入式）
  - 语法格式
```
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画盒子</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            font-size: 50px;
        }

        .red {
            /* 背景颜色 */
            background-color: red;
        }
    </style>
</head>
```
    内部样式表就是将CSS样式抽取出来，统一写到<style></style>标签中，并将<style></style>标签放置在<head></head>标签内部。
- 外部样式表（链接式）
  - 语法格式
```
<link rel="stylesheet" href="style.css">
```
    外部样式表的核心就是样所有CSS样式写到一个CSS文件中，之后利用<link>标签将CSS文件导入到HTML页面中使用。
- 总结
  
  图片不能直接居中对齐，需要让图片的上一级标签居中对齐。

样式表	优点	缺点	控制范围
行内样式表	书写方便	结构和样式混写，只适合简单修改	控制一个标签
内部样式表	部分结构和样式分离	仍然将样式和结构放在一个文件中	控制一个页面
外部样式表	结构和样式分离	需要单独导入	控制多个页面