CSS学习笔记

最新推荐文章于 2024-09-29 22:01:11 发布

星空～～下的小黑蛋

最新推荐文章于 2024-09-29 22:01:11 发布

阅读量90

点赞数

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

本文链接：https://blog.csdn.net/weixin_43873976/article/details/104735144

版权

这篇博客详细介绍了CSS的基础知识，包括CSS简介、语法、选择器、样式创建及样式优先级。重点讲述了ID和类选择器，样式表的插入方式，以及CSS的优先级规则，包括继承性、选择器的优先级和使用!important的情况。

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

一、 CSS简介

1、什么是CSS

CSS指层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素
样式通常如何存储在样式表中
把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可叠层为一个

2、样式解决了一个很大的问题

HTML标签原本被设计者用于定义文档内容，如下实例：

<h1>这是一个标题</h1>
<p>这是一个段落</p>

样式表定义如何显示HTML元素，就像HTML中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.CSS文件中。我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观

二、CSS语法

1、CSS实例

CSS规则由两个主要部分构成：选择器，以及一条或多条声明：
在这里插入图片描述
选择器通常是由需要改变样式的HTML元素
每条声明由一个属性和一个值组成。
每一个属性有一个值，属性和值被冒号分开
CSS声明总是以{；}结束，声明总以大括号（{}）括起来

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
p
{
   
	color:red;
	text-align:center;
} 
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>

2、CSS注释

CSS的注释以“/*”开始，以“*/”结束

三、CSS `id`和`class`

1、id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
注意：（id属性不能以数字开头，数字开头的id在某些浏览器上不适用）

2、class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.”显示

四、CSS创建

1、如何插入样式表

插入样式表的三种方法

外部样式表（External style sheet）
内部样式表（Internal style sheet）
内联样式表（Inline style）

2、外部样式表

当样式需要应用于许多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。

最低0.47元/天解锁文章