CSS基础-01选择器和样式（id选择器、class选择器、内联样式、内部样式表、外部样式表、多重样式优先级）

已于 2022-11-18 23:47:34 修改
阅读量318 收藏 1
点赞数
分类专栏： # CSS基础教程 文章标签： css id选择器 class选择器 内联样式 内部样式
于 2022-03-29 16:16:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123520358
版权

文章目录

1. 选择器

1.1 id 选择器

  • 语法

用 “#标签名” 定义

  • 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>蜀</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">受id选择器影响</p>
<p>不受选择器影响</p>
</body>
</html>
  • 显示结果
    在这里插入图片描述

1.2 class 选择器

  • 语法

用 “元素.标签名” 定义
如：p.class1
不写元素表示所有

  • 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CROW-SONG</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

2. 样式

2.1 内联样式

  • 作用

当个别元素需要使用特殊样式时

  • 方法

在相关标签中加入样式属性。

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body style="background-color:red;">
<h2 style="background-color:yellow;color:blue">黄底蓝字的标题</h2>
<p style="background-color:green;">绿底黑字的段落</p>
</body>
</html>

2.2 内部样式表

  • 语法

在head中定义CSS表

  • 示例
<!DOCTYPE html>
<html>
<head> 
<style type="text/css">
	body {background-color:yellow;}
	p {color:blue;}
</style>
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>
	<h1 style="text-align:center;">标题</h1>
	<p>段落内容和body是head中style定义的</p>
</body>
</html>
  • 输出
    在这里插入图片描述

2.3 外部样式表

指定外部文件定义CSS表

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

说明：

  • rel 是链接的类型，此处说明是 style sheet
  • type 是外联文件的类型
  • href 是外联文件的位置

2.4 多重样式优先级

如果一个元素有几个样式则
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

玄德公笔记
关注
专栏目录
css的选择器style>#ID>.class>标签
gmp2208的博客
02-03 455
CSS三大样式——内嵌样式和外部样式
weixin_38945490的博客
03-14 1949
内嵌样式： ①在网页中内嵌sytle标签去写样式 ②在内嵌样式中要先匹配到对应元素 才能写css样式 匹配到元素样式写法规则是： 匹配器{ //样式 } ③ 如何匹配元素： 使用元素选择器来匹配元素 1.*号匹配器 匹配网页里面所有的元素 * { border: 1px solid red; } <button>按钮</button> 2.元素选择器 根据元素的名称来匹配元素 匹配整个网页里面所有这
CSS样式之外部样式——CSS选择器
qq_49070817的博客
08-07 428
关于在CSS样式中如何实现连接实现布局效果、基本标签的一些属性。字体颜色、大小、斜体等，还有下划线、删除线等
css选择器，标签-类-id-通配符选择器
weixin_59777571的博客
02-12 290
标签选择器，类（class）选择器，id选择器，通配符选择器
零基础CSS入门教程(8)–id选择器
程序员大阳
10-17 1008
更多相关博文请查看【JavaWeb学习之路】 本文目录1. 前言2. id选择器3. 使用id选择器4. 整体网页解析5. 小结 1. 前言 上一篇介绍了元素选择的使用，本篇来介绍一种新的选择器：id选择器。 我们先来说一下使用场景，如下面的代码中，所有诗句颜色都是蓝色。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p {
Css样式的html选择器,类选择器,id选择器
xiahang1121的博客
05-05 1510
<!DOCTYPE html> <!-- HTML是标记语言,把属性这些写在里面并不规范,有可能无法显示 CSS为了规范每个标记的样式,属性等设置控制能力远飞HTML所能比的 CSS分离了内容与表现形式 CSS语法,由选择器,属性,和值三部分组成,简单明了,在头部的<style ...
CSS中的各种选择器与样式优先级小结
12-13
important内联(1,0,0,0)id: (0,1,0,0)类：(0,0,1,0)伪类/属性元素：(0,0,0,1)通配符类选择器class="web",多个元素可以拥有同一个类名 id选择器id="web",具有唯一性 伪类选择器CSS伪类（pseudo-class）是加在选择器...
CSS基础：样式表分类与选择器详解
“YK-Day04笔记.pdf”涵盖了CSS基础知识，包括CSS的定义、分类（内联样式、内部样式和外部样式）以及常用选择器的介绍。 CSS（层叠样式表）是用于美化和控制HTML网页外观的重要工具。它允许开发者通过定义不同的...
层叠样式表CSS基础-简单选择器
r1832644594的博客
04-26 227
一.css概述： 1.css概念： 通过各种选择器的选择某些元素，并描述这些元素的样式（Style）， 称之为CSS规则，将若干个这些的规则放到一起构成样式表（StyleSheets）。 样式表分为默认样式、内联样式，内部样式、外部样式四个层次， 相对一个Web页面，可能同时存在这四个层次的样式表， 由它们共同控制页面的表现，当它们之间有重度时（如四个层次对同一元素定义了不同的样式）， 则会按照CSS预定的规则进行取舍，称为样式表的层叠（Cascading）。 也正式因为这层叠样式的使用，我们通常称.
CSS学习1（内联样式，内部样式，外部样式,选择器）
a1436237789的博客
08-09 1185
CSS学习1（内联样式，内部样式，外部样式,选择器）
【CSS笔记】CSS三种样式表、CSS样式表优先级、CSS选择器
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-19 809
CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。CSS编写的规则分为两部分，分别是：选择器、声明块。声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。h1 {}
CSS中常用的选择器
热门推荐
m0_67683346的博客
10-26 1万+
CSS中常用的选择器
实例演示CSS中class、id、内联、important样式的优先级
苏灵均的博客
09-10 3308
目录 1.从 body 元素继承样式 2.Class 选择器的优先级高于继承样式 3.ID 选择器优先级高于 Class 选择器 4.内联样式的优先级高于 ID 选择器 5.Important 的优先级最高 1.从 body 元素继承样式 每一个 HTML 页面都有一个body元素。 首先，我们先来创建一个内容文本为Hello World的h1元素。 接着，在body的 CSS 规则里面添加color: green;，这会将页面内所有字体的颜色都设置为green。...
css三大选择器，及样式，看完秒懂
weixin_63215199的博客
04-06 1877
java前端基础css选择器，及其样式，一看就会，适合刚接触java或前端的同学，加油哇
html标签和css选择器
2301_78992368的博客
07-03 465
表单分父元素和子元素，父元素是form，子元素很多，以input为核心。href属性为空，会刷新当前页面，target="_blank"表示新开一个页面，href="#top" 其中#表示在当前页面寻找id值为top的标签。图片标签是img，用来在网页中嵌入一个图片文件，了解：路径、宽，alt属性表示图片显示不出来时说明的文字。css选择器优先级：内联样式(style)>id选择器 > class选择器 > 元素选择器>通用选择器。列表标签是HTML中的核心标签，有三种：有序标签，无序标签，自定义标签。
css实例 css中id/class 详解样式表（外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解）[第一天]
PBitW的博客
08-03 9641
css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 5种组合选择器 后代选择和子代选择注意 多重样式优先级 选择器错误理解
CSS常用样式（id/class/元素选择器 用法）
weixin_47314602的博客
08-05 2052
元素选择器不用再做设定，直接引用文章中的元素做设置。在这边我们以input为例做个简单文本框背景颜色设定，代码如下。首先也是选着想要调整的文本框，定义class（我这边是随意定义了一下class="class_w"）其次在里面将格式写出来，这边claa引用的话需要在前面加上英文格式的点(.)。其次在里面将格式写出来，这边id引用的话需要在前面加上#字符。首先我们在input这边设置一个id（id="ww"）。......
style中的选择器
Shao_yihao的博客
10-15 2125
用style中的color属性修改颜色。注意：style声明应以分号结尾。 <h1 style = "color : red;"> XXX </h1> 这是指定元素样式的一种方法，除此之外还可以在代码的顶部，创建一个 style 声明区域： <style> h1 { color: red; } </style> 除了指定对某种标签实现某种效果之外，还可以自定义一个class选择器来实现更灵活的使用该效果，多个 HTML 元素可以使用相同的
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
最新发布
朝阳39的博客
07-06 1931
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值