首页 > 其他分享 >史上最全CSS样式解读(一)

史上最全CSS样式解读(一)

时间:2024-10-18 17:19:44浏览次数:9  
标签:center 样式 最全 class 样式表 选择器 CSS

CSS介绍:

CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率!

CSS 语法:

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

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

CSS 实例
CSS声明总是以分号 ; 结束,声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

CSS id 和 class:

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>佳羽.</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

示例图:
在这里插入图片描述
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

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

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
实例:

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

实例:

p.center {text-align:center;}

多个 class 选择器可以使用空格分开:

实例:

.center { text-align:center; }
.color { color:#ff0000; }

例如以下代码块:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>佳羽.</title> 
<style>
.center {
	text-align:center;
}
.color {
	color:#ff0000;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中,颜色为红色。</p> 
</body>
</html>

在这里插入图片描述

CSS 创建:

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

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

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

标签:center,样式,最全,class,样式表,选择器,CSS
From: https://blog.csdn.net/Sea_yk/article/details/142850306

相关文章

  • css动画
    几年前与一个同事共同开发一个项目,当时只知道css3但是并没有实际用过,看了她写的页面着实给了我一个很大的震撼,今天因故翻到了她写的代码,现在来看,感慨万千//这是一个dom&>.left{animation:0.4seaseenter_from_left;}//这是另一个dom&>.right{ani......
  • 还有小白不会用stable diffusion?史上最全的stable diffusion环境配置指南
    前言StableDiffusion的横空出世,带动了AI生成图片的又一波高潮。随后在StableDiffusion的模型基础上,各种风格、生成内容的再训练模型层出不穷,极大的丰富了AI生成图片的多样性和精细程度;Lora、ControlNet等插件的出现,更加简化了模型的训练难度以及优化了图片生成的预期效果......
  • CSS文本属性
    在CSS中,我们可以通过文本属性来控制文字的样式。下面是一些常用的文本属性:font-family:用于指定文字的字体。font-size:用于指定文字的大小。font-style:用于指定文字的样式,例如italic或normal。font-weight:用于指定文字的粗细程度。color:用于指定文字的颜色。text-align:用于指定......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <style> /*6.1使用CSS设置字体样式*/ h1{ /*6.1.1.字体类型*/ font-family:fangsong; /*6.1.2.字体大小*/ f......
  • 这会是你见过最全的AI产品经理学习路线!你学会了吗?我学废了!
    AI产品经理学习路线:从新手到专家的全面指南引言AI产品经理的角色结合了人工智能技术和产品管理的精髓,是一个新兴且充满挑战的领域。本指南旨在为你提供一个全面的学习路线,从基础到高级,帮助你逐步成为一名出色的AI产品经理。了解AI基础目标:建立对人工智能的基本理解,包括......
  • vue,xlsx,xlsx-style,file-saver,生成Excel并导出,cptable报错,合并单元格 样式缺失
    一,安装依赖 二,导入依赖import*asXLSXfrom'xlsx';import*asXLSX_STYLEfrom'xlsx-style'import{saveAs}from'file-saver';三,解决引入xlsx-style./cptable模块找不到问题Thisrelativemodulewasnotfound:*./cptablein./node_modules......
  • vue3.0 使用Element Plus修改el-table表格的横纵滚动条颜色、宽高等样式
    在Vue3.0和ElementPlus中修改el-table的滚动条样式,可能遇到了样式不生效的问题。这通常是因为ElementPlus使用了自定义的滚动条组件el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对el-scrollbar组件进行样式定制。<stylescoped>/*滚动条整体部分*/......
  • CSS笔记—盒子定位之固定定位(重难点!!小白刚需)
    1、固定定位的概念        固定定位(fixed)的元素位置相对于浏览器窗口进行定位(会脱离文档流),即使页面滚动,固定定位元素不会随滚动条滚动,除非改变浏览器窗口的位置或大小‌ 2、语法格式: <head>        选择器{position:fixed;}</head>水平位置:left定......
  • CSS的学习(二)
    本篇呢,我们接着学习CSS,浮动和定位是两者常用的布局方式,可以实现更加丰富和灵活的网页效果。 有实操代码和效果方便理解一、浮动CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布......
  • 京东Android最全面试题及参考答案
    Android常用控件TextViewTextView是Android中最基础的文本显示控件,用于在界面上展示静态的文本信息。它可以设置文本的内容、字体大小、颜色、样式等属性。在应用中,常用于显示标题、说明文字、提示信息等。例如,在一个登录界面中,TextView可以用来显示“用户名”“密......