CSS叠层样式表（一）

最新推荐文章于 2024-11-11 00:01:33 发布
最新推荐文章于 2024-11-11 00:01:33 发布
阅读量135 收藏
点赞数 1
分类专栏： 网站开发 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56694116/article/details/128530984
版权

CSS叠层样式表（一）

如何使用css

如何在HTML页面中添加CSS：

  1. 使用style属性：在元素中直接指定CSS样式，可以使用style属性来定义，称为内联样式。
<h1 style="text-decoration:underline;">标题一</h1>
  1. 使用style元素：style元素定义在head元素中，如果样式需要在页面中多次使用，可以定义在style元素中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分组</title>
<style>
	h1{
		text-decoration:underline;
		color:#6F0;
	}
</style>
</head>

<body>
    <h1>标题一</h1>
    <h1>标题二</h1>
</body>
</html>

在这里插入图片描述

  1. 使用外部样式表文件：在head元素中添加link元素可以引用外部样式表文件，其rel属性指定引用文件的类型，href属性指定引用文件的属性。
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

另一种使用外部样式文件的方法是在style元素中使用@import指令，如下面的代码：

<style>
	@import url(https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css);
</style>

选择器

选择器的功能是指定应用 样式的元素。

  1. 基本选择器：元素类型选择器，使用元素名称定义；ID选择器，格式为“#<ID值>”；类选择器，使用圆点（.）定义，格式为“.<类名>”。
  2. 层次选择器：页面中，所有的元素会形成一个树状结构，我们可以通过层次选择器关联相应的元素。下级元素选择器，使用空格；直接下级元素选择器，使用大于号（>）；同级相邻元素选择器，使用加号（+）；同级元素选择器，使用波浪号（~）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	a{
		color:red;
	}
	div a{
		text-decoration:underline;
		color:#3F0;
	}
</style>
</head>

<body>
    <a>链接一</a>
    <div><a>链接二</a></div>
</body>
</html>
  1. 属性选择器：判断元素中是否定义了某个属性时，可以在选择器后使用一对中括号定义元素属性相关的信息。如果需要判断具体的属性值，可以使用=运算符。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	a[title]{
		color:red;
	}
</style>
</head>

<body>
    <a href="https://www.baidu.com/" title="1">链接一</a>
</body>
</html>
  1. 伪类选择器：
:link伪类未访问过的链接
:visited伪类已访问过的链接
:hover伪类当鼠标悬停在元素上的时候
:focus伪类当前焦点元素
:active伪类激活元素
  1. 伪元素选择器：伪元素选择器更多用于文本样式的定义。
:first-letter第一个字符
:first-line第一行
:before指定内容之前
:after指定内容之后
  1. 通配符选择器：*符号作为通配符
<style>
	* {
		margin:0px;
		padding:0px;
	}
</style>
爱学习的旁某人
关注
专栏目录
CSS层叠样式表
jcf52的博客
04-20 3751
一.css 介绍 层叠样式表，是一种样式表语言，用来描述HTML和XML文档的呈现。随着HTML的发展，为了满足面设计者的要求，HTML添加了很多显示功能，但是随着这些功能的增加，使得HTML越来越杂乱，HTML 页面也越来越臃肿，CSS便随之诞生，CSS 用于简化HTML标签，把关于样式部分的内容提取出来，进行单独的控制，使结构与样式分离开发。 CSS 是以HTML为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，和HTML 类似，CSS也不是真正的编程语言，甚至不是标记语言。..
HTML之CSS层叠样式表
qq_45337431的博客
08-20 3504
一、CSS层叠样式表概述 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的,应用优先...
带你了解前端之CSS层叠样式表
主要发布一些日常学习代码及理解
08-23 1028
详细介绍了CSS层叠样式表 快速入门
CSS层叠性（一学就会）
weixin_40231155的博客
05-08 483
层叠性：就是css处理冲突的能力，这里涉及到权重计算 举个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
CSS 中重要的层叠概念
weixin_34221775的博客
09-21 219
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~ 屏幕是一个二维平面，然而HTML元素却是排列在三维坐标系中，x为水平位置，y为垂直位置，z为屏幕由内向外方向的位...
CSS（层叠样式表）
Chujun123528的博客
08-09 1413
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
CSS--层叠样式表
weixin_45398401的博客
08-23 1288
注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）
CSS 叠层样式表
qq_40272613的博客
05-08 642
1.css引入方式 1.行内样式 2.内嵌式 3.外联式（用的最多的方式） 4.导入式 先加载html,后导入样式，可能导致页面的样式延迟，这种方式使用的比较少 行内式、内嵌式、外联式优先级规律 就近原则，哪个近，哪个最终起作用，因此行内式的优先级最高，而内嵌式和外联式的优先级就要它们哪个更靠近作用的标签 2.css常用选择器 1.标签选择器 2.class选择器 3.id选择器 4...
css叠层_CSS 理解样式层叠
weixin_29435467的博客
01-13 223
CSS 理解样式层叠@author: GreenMelon @吾南蛮野人 caigua 1270155919@date: [2015-09-05 15:31]@(keywords)[cascading][TOC]前言CSS(层叠样式表)用于规定HTML文档的呈现形式(外观和格式编排)，通过学习 《HTML权威指南》、《CSS权威指南》 和 《精通jQuery》，结合自己的实践经历，说说 CSS 样...
css叠层样式大全表
11-08
　CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容 与表现形式分离。页面内容存放在HTML文档中，...
HTML基础必看——全面了解css样式表
09-28
CSS，全称为Cascading Style Sheets，叠层样式表，它的主要任务是分离内容（HTML）和表现（CSS），使网页设计更加灵活和易于维护。 首先，我们要理解CSS样式的三种类型： 1. 内联样式表：将CSS直接写在HTML元素的`...
CSS中常见文本居中技巧详解
最新发布
2301_76541209的博客
11-11 315
在网页设计中，文本居中是非常常见且重要的布局需求之一。无论是为了美观还是为了更好地传达信息，掌握文本居中的方法对于前端开发者来说都是必不可少的技能。本文将详细介绍几种常用的CSS文本居中方法，帮助读者解决实际开发中的问题。
HTML的文本样式（二）
2302_79986066的博客
11-06 945
巅峰礼赠</p><p id="p01">我喜欢HTML
前端八股文(二)CSS 持续更新中。。。
DogEgg_001的博客
11-06 922
新增属性选择器、伪类选择器新增text-shadow、box-shadow、border-radius新增transform、transition、动画@keyframes、animation新增flex、grid布局，媒体查询@media新增box-sizing：border-box怪异盒模型 content-box标准盒模型。
CSS的综合应用例子（网页制作）
d7210的博客
11-10 481
就会不断执行循环体中的代码。// 当expression的值不等于任何case的值时执行的代码块。// 当expression的值等于value1时执行的代码块。// 当expression的值等于value2时执行的代码块。当匹配成功时，就执行对应的代码块，直到遇到。// 当condition1为真时执行的代码块。// 当condition2为真时执行的代码块。// 当以上条件都不满足时执行的代码块。的值，否则可能会导致无限循环。// 当条件为真时执行的代码块。// 当条件为假时执行的代码块。
CSS教程（二）- CSS选择器
Oblning的博客
11-10 663
css选择器，标签选择器，ID选择器，类选择器，通用选择器，群组选择器，子代选择器，后代选择器，伪类选择器，focus，hover，activate
CSS 色彩魔法：打造绚丽网页风格
jht_520的博客
11-10 133
透明度的取值范围是0-1，0表示完全透明，1表示完全不透明。例如，rgba(255,0,0,0.5)表示半透明的红色。例如，hsla(0,100%,50%,0.5)表示半透明的红色。色调的取值范围是0-360，饱和度和亮度的取值范围是0-100。例如，rgb(255,0,0)表示红色，rgb(0,0,0)表示黑色。例如，选择三个等距离的颜色进行搭配，如红色、绿色和蓝色。色彩和谐原则：选择色彩在色轮上呈现和谐关系的颜色进行搭配，如使用三个相邻颜色或构成三角形的颜色。例如，红色和绿色、蓝色和橙色等。
巨好看的登录注册界面源码
bjzhang75的博客
10-31 4109
巨好看的登录注册界面源码
CSS学习
雷神乐乐的博客
11-10 643
CSS学习
傅里叶叠层重建代码实现方法
傅里叶叠层重建是一种利用傅里叶变换原理来进行数据或图像重建的方法。通过将数据或图像分解为频率成分，然后按照一定的规则进行叠加，可以实现对数据或图像的重建。这种重建技术在许多领域都有广泛的应用，如医学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值