初识HTML（四）进阶：CSS基础、常用属性

最新推荐文章于 2022-11-05 14:32:45 发布

Simple子夜

最新推荐文章于 2022-11-05 14:32:45 发布

阅读量1.3k

点赞数 2

分类专栏： HTML 文章标签： HTML CSS

本文链接：https://blog.csdn.net/m0_46958731/article/details/114395976

版权

文章目录

前言：

本章节将学习到HTML中最为重要的CSS，有了它我们的网页将可以实现更多功能以及添加很多样式，如果将html标签比作房子的话，那么就是给房子进行装修了，通过使用 CSS 我们可以大大提升网页开发的工作效率！开始了解CSS的魅力所在吧！

什么是css？

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

css语法定义

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述
选择器通常是你想要改变样式的HTML元素，每条声明都由一个属性与值组成，属性与值之间用冒号隔开，声明之间用分号隔开。

css的定义方法有三种：

内联样式表：通过在标签内使用style属性来达到给该标签添加样式效果
```
<a href='#' style='color:red'>超链接</a>
```
内部样式表：在head标签内创建style标签，在style标签内使用选择器来指定html元素增加样式
```
<head>
	<style>
		body{
      
			background-color:red;
		}
	</style>
</head>
```
外部样式表：在外部创建一个css文件，文件内写的就是一些css样式语句，然后再head标签内使用link标签引入css文件，外部css文件可以被所有html文件所引用。
```
<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

分别使用场景：

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性
当单个文件需要特别样式时，就可以使用内部样式表。
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

但通常网页开发阶段都是以内部样式表来写css的，如果单个文件css较多，那么我们可以将其保存在一个css文件内，然后通过link引用进来。

三种css写法的优先级：

这里指的是如果以三种方式操作相同html元素时：内联优先级最高，因为html代码是从上至下解析的，而link引入与style则是谁在下面谁的优先级高。

css实例

CSS声明总是以分号(;)结束，声明总以大括号 {} 括起来:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>css练习</title>
    <style>
      p{
    
        color:red;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

浏览器打开效果：
在这里插入图片描述
css注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

<style>
	p{
    
		color: red; 		/* 字体颜色变红 */
		font-size: 25px; 	/* 字体大小为25 */
	}
</style>

id选择器和 class选择器

如果我们通过HTML元素名来设置的话，表示为所有相同的HTML元素名来设置样式，但是通常我们需要找到某一个标签给它单独设置属性，那么id 和 class就排上了用场

id 选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>css练习</title>
    <style>
      #test1{
    
        color:red;
        text-transform:capitalize; /* 每组单词首字母大写 */
      }
    </style>
  </head>
  <body>
    <p id='test1'>Hello World</p>
  </body>
</html>

浏览器打开效果：
在这里插入图片描述

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class选择器也可以叫：类选择器

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 t_center 类的 HTML 元素均为居中，字体变大。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>css练习</title>
    <style>
      .t_center{
    
        font-size: 25px;
        text-align: center; /* 文字水平居中 */
      }
    </style>
  </head>
  <body>
    <p class='t_center'>Hello</p>
    <p class='t_center'>World</p>
  </body>
</html>

浏览器打开效果：
在这里插入图片描述

标签选择器

<style>
	p

最低0.47元/天解锁文章

Simple子夜

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
初识HTML（四）进阶：CSS基础、常用属性

前言：本章节将学习到HTML中最为重要的CSS，有了它我们的网页将可以实现更多功能以及添加很多样式，如果将html标签比作房子的话，那么就是给房子进行装修了，通过使用 CSS 我们可以大大提升网页开发的工作效率！开始了解CSS的魅力所在吧！什么是css？CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个css语法定义CS
复制链接

扫一扫