CSS初探

最新推荐文章于 2024-11-18 16:32:24 发布
最新推荐文章于 2024-11-18 16:32:24 发布
阅读量830 收藏
点赞数 2
分类专栏： Web开发 文章标签： css html 浏览器 class 文档 工作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YESmylady/article/details/7742812
版权
本文深入探讨了CSS层叠样式表的基本概念、层叠次序、语法及高级特性，包括CSS选择器、属性与值的设定，以及CSS的派生选择器、id选择器和类选择器的应用。同时，阐述了CSS的继承性问题与解决方法，通过实例展示了如何通过CSS实现HTML元素的样式定制。
摘要由CSDN通过智能技术生成

CSS：指层叠样式表 (CascadingStyle Sheets)，定义如何显示 HTML 元素。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

CSS 语法

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

selector {declaration1; declaration2; ... declarationN }

选择器(selector)通常是您需要改变样式的 HTML 元素。

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

selector {property: value}

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

CSS 语法


注意：

1、值的不同写法和单位:   #ff0000 ——>#f00 ——>rgb(255,0,0)。都是一样的

2、记得写引号:     如果值为若干单词，则要给值加引号。

3、空格和大小写：是否包含空格不会影响 CSS 在浏览器的工作效果。

4、多重声明：如果要定义不止一个声明，则需要用分号将每个声明分开。


CSS 高级语法

1、选择器的分组：被分组的选择器就可以分享相同的声明

h1,h2,h3,h4,h5,h6 {
  color: green;
}


2、继承及其问题:根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。不同浏览器，的确是尴尬啊。

CSS 派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

举例：

li strong {
    font-style: italic;
    font-weight: normal;
}
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

这样，列表中的 strong 元素变为斜体字，而不是通常的粗体字。


CSS id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。注：一个网页中id只能出现一次。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
这样就可以设置p标签中字的颜色样式。


id 选择器和派生选择器:   结合重生

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}
上面的样式 只会应用于出现在 id 是 sidebar 的元素内的 段落。

一个选择器，多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

神奇的是 ，在网页中sidebar元素中的 p和h2标签都将和网页中其他的 p和h2不同。

CSS 类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

和 id 一样，class 也可被用作派生选择器：

元素也可以基于它们的类而被选择：

大河Yes
关注
专栏目录
时间刻度线css,CSS初探
weixin_30080745的博客
08-03 399
CSS初探CSS 指层叠样式表 (Cascading Style Sheets)当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？1. 浏览器缺省设置2. 外部样式表3. 内部样式表(位于 标签内部)4. 内联样式(在 HTML 元素内部)CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。selector {declaration1; declaration2; ......
Java学习笔记Part03-CSS初探
weixin_51657833的博客
02-07 487
CSS初探 1.什么是CSS？ CSS：层叠样式表(Cascading Style Sheets)可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。人话：让网页更好康 HTML用来搭建网页主体结构，是毛坯房；而CSS用来修饰网页，相当于精装修。 2.CSS的引入 行内式引入： 借助标签的style属性引入，style属性中的值语法为样式名:样式值; 样式名:样式值; .
CSS 初探
王勇霞 信息技术提高班九期
07-05 1373
Css: 指层叠样式表 (Cascading Style Sheets)，它是用来进行网页风格设计的。通俗的说就是进行网页美化的，没有html 依然存在，多了css 它会更好。但是没有html,css就没用多大用处了。
HTML+CSS初探
kentanvictor的博客
12-07 181
HTML+CSS 外壳的框架 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面的title写的是你的标签名--> <title></title> </head> <body> <!--这里面写的是你想要显示的东西--> </body> </html>
初探CSS
meiniada的专栏
12-09 370
一.什么是CSS CSS是层叠样式表（Cascading Style Sheets）,层叠的意思是多个样式表作用于一个元素时，首先筛选有没有重复的属性，有重复的就近原则，没有重复的就层叠为一套最终的样式最后作用在元素身上。 样式定义如何显示HTML元素 把样式表添加到HTML中，是为了解决内容与样式分离的问题。 二.样式表的类型 内嵌 <h1 style="background-color:red;
CSS 基础初探
zhangiser的专栏
05-30 130
一：认识CSS 属性 二：认识文本 2.1 控制文本 2.2 文本格式化 三：选择器 7.8.1通用选择器 “通用选择器”(universal selector)由一个“星号”(*)表示,作用类似于匹配文档中全 部元素类型的通配符。 *{} 如果需要将某个规则应用于全部元素，则可以使用此选择器。某些时候它还被用于设 置应用于整个文档的默认值(如font-family和font-size),除非使用更为具体的选择器指定某 •元素中对应的相同属性应使用其他值。 .
CSS初识
qq_43669381的博客
08-25 226
CSS初识 什么是CSS 作用：修改页面的元素样式。 样式：字体，类型，大小，风格，粗细。 文本：颜色，首行缩进，行高，文本对齐方式。 背景：背景颜色，背景图片。 … css的三种编写方式 1.行内 格式：别迟到 注意： 1写在标签里面的 2.缺点显得标签特别杂乱 不利于开发 2.内嵌 格式： 注意：h5 style可简写 直接 区别：连接式html标签【网页结构】和css一起加载 导入式先加载...
CSS初探：理解语法，选择器与应用
本文将深入探讨CSS（层叠样式表）的基础知识，包括其基本语法、选择器的应用以及创建CSS的几种方法。CSS作为一种强大的网页设计工具，被广泛用于美化网页布局、提高页面加载速度，并确保符合W3C国际标准。 在Web...
css初识
LIJIWEI0611的博客
08-22 243
CSS初识 概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 1 引入CSS样式表（书写位置） 要书写css样式，那css
CSS回顾-长度单位汇总详解
懒羊羊我小弟的博客
11-14 918
本文详细介绍了 CSS 中的长度单位。包括绝对长度单位（px、cm、mm、in、pt、pc）和相对长度单位（em、rem、%、vw、vh、vmin、vmax）。阐述了它们的定义、应用场景、优缺点，并对比了绝对长度单位与相对长度单位，指出绝对长度单位有固定参照，相对长度单位基于其他元素属性计算，在响应式设计中各有特点。
第八章 利用CSS制作导航菜单
l1397222107的博客
11-13 1025
* 使链接充满整个列表项区域 *//* 移除下划线 *//* 文字颜色 *//* 内填充 *//* 圆角效果 *//* 平滑过渡效果 *//* 鼠标悬停时改变背景色 *//* 文字颜色加深 */
css-50 Projects in 50 Days(4)
xwc999
11-14 257
【代码】css-50 Projects in 50 Days(4)
常见的 CSS-in-JS 库
jjsnc
11-14 251
后记 CSS-in-JS 优缺点。
CSS 样式的优先级？
m0_47408435的博客
11-16 401
在CSS中，样式的优先级决定了当多个样式规则应用于同一个元素时，哪个样式会被最终使用。记住，这些规则并不是绝对的，有时可能需要根据具体情况进行判断。，因为ID选择器的优先级最高。如果所有其他因素相同，那么带有。声明的样式将覆盖所有其他样式。都应用了相同的样式，那么。都应用了相同的样式，
【学习】【css】元素的水平垂直居中
最新发布
m0_61097007的博客
11-18 290
【代码】【学习】【css】元素的水平垂直居中。
Tailwind CSS 和 UnoCSS简单比较
CherishTaoTao的博客
11-16 747
特性UnoCSS生成方式预生成所有可能的类，使用时移除未用类按需生成，只有实际用到的类才会被生成性能生成较大的文件，但可以通过 JIT 模式优化生成极小的文件，按需生成 CSS 类，性能更优定制性强大且灵活，通过配置文件调整设计系统更加灵活和动态，支持极细粒度的定制开发体验类名标准化，适合团队开发，但可能类名冗长简洁，灵活，适合追求个性化定制的开发者社区支持庞大且成熟，拥有丰富的插件和资源相对较小，但性能和灵活性上有优势适用场景快速开发、设计系统、团队合作项目。
永夜星河主题特效2（星河背景 + 闪烁文字+点击星星 + 文字弹出特效）
VLOKL的博客
11-16 1190
永夜星河主题特效2（星河背景 + 闪烁文字+点击星星 + 文字弹出特效）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值