CSS知识点

最新推荐文章于 2023-08-31 16:41:33 发布

葱烧排骨

最新推荐文章于 2023-08-31 16:41:33 发布

阅读量750

点赞数

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

本文链接：https://blog.csdn.net/m0_49381207/article/details/119060842

版权

CSS常用知识点梳理

1.CSS简介

CSS：级联样式表（Cascading Style Sheets）是一种用来设计网页样式的工具。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

2.CSS样式表定义

在网页制作过程中，定义样式表的方法主要由下面3种。

1.通过HTML标签定义样式表

CSS 样式表规则由两个主要的部分构成：选择器，以及一条或多条声明:

引用样式的对象{标签属性:属性值; 标签属性:属性值; 标签属性:属性值;…}

在这里插入图片描述

选择器是用的去掉尖括号的标签名，可以是一个或多个标签(各个标签之间以逗号分开)。例如，p、table等，而不是<p>、<table>。
每个属性与属性值对之间用分号隔开。且属性名为两个或两个以上的单词构成时，单词之间以“-"隔开，如背景颜色属性background-color。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style>
p
{
    
	color:green;
	text-align:center;
	background-color:red;
} 
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>

2.使用id定义样式表

在HTML页面中，id选择符用来对某个单一元素定义单独的样式，定 id名称前加上一个#。使用id定义样式表的基本语法如下:

#id名称{标签属性:属性值; 标签属性:属性值; 标签属性:属性值;…}

**使用时只需要将要用该样式的网页内容前加一个 id=“id名称”。**案例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style>
#aaa
{
    
	text-align:center;
	color:green;
	background-color:red;
} 
</style>
</head>

<body>
<p id="aaa">Hello World!</p>
<p>我不受aaa样式的影响。</p>
</body>
</html>

在这里插入图片描述

3.使用class定义样式表

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 CSS类有两种定义格式，定义时，在自定义类的名称前加一个点"."号显示

标签名.类名{标签属性:属性值:标签属性:属性值;标签属性;属性值;…}

这种格式的类指明所定义的样式只能用在类名前所指定的标签上。例如: hl.center{color:red;}说明该center 类的样式只能用在<h1>标签上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>标题</title> 
<style>
.center{
      text-align:center;}		/*第一种*/

h1.center{
      color:red;background-color:green;}		/*第二种*/
</style>
</head>

<body>
<h1 class=

最低0.47元/天解锁文章

葱烧排骨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点

CSS常用知识点梳理1.CSS简介CSS：级联样式表（Cascading Style Sheets）是一种用来设计网页样式的工具。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 CSS还允许将样式定义单独存储在样式文件中，将显示的内容和显示的样式定义分离，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。2.CSS样式表定义在网页制作过
复制链接

扫一扫