三 CSS基础入门
2024-08-31 11:51:40
CSS介绍
CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。
CSS语法
CSS实例
每个CSS样式由两个组成部分:选择器和声明(属性和属性值),每个声明之后用分号结束。
CSS的几种引入方式
行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red; font-size: 20px">Hello world.</p>
内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
color: #4cae4c;
font-size: 20px;
}
</style>
</head>
<body>
<p >Hello world.</p>
</body>
</html>
外部样式
外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
rel:指定引入样式表;href:指定了CSS样式表位置。
导入外部样式文件
在内部样式表<style>标记中,使用@import导入一个外部样式表,具体格式:@import“CSS样式表”;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*导入外部CSS样式表*/
@import "../06lianxi/05-mi.com/css/mi.css";
</style>
</head>
<body> </body>
</html>
选择器的优先级
CSS优先性
注:内联样式即为行内样式!
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性值
!import方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。
万不得已可以使用!import
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#a1 {
color: red;
}
.a2 {
color: green!important;
}
</style>
</head>
<body>
<P id="a1" class="a2" style="color: black">!important优先性最高</P>
<P ></P>
</body>
</html>
CSS继承性
继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代;
例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上所有标签都会继承body的字体颜色。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {
color: green;
}
继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。
在CSS中以text-、font-、line-开头的属性以及color属性都可以继承
但有一些属性不能被继承,如:<a>标签颜色,必须对<a>标签本身设置、<h>标签字体不能继承,必须对<h>标签本身进行设置、
border、margin、padding、background等。
最新文章
- WinRT自定义控件第一 - 转盘按钮控件
- Linux服务器宕机案例第二则
- gradle介绍
- Android学习笔记⑦——UI组件的学习AdapterView相关1
- hdu 4961 Boring Sum (思维 哈希 扫描)
- 纯css3鼠标经过图片显示描述特效
- [转载]maven基础入门
- 【网络流#7】POJ 3281 Dining 最大流 - 《挑战程序设计竞赛》例题
- 新鲜博客出炉www.pubwin2009.net
- DrawText的使用
- 快速排序Java版
- memcached分布式缓存
- spring配置文件中context:property-placeholder导入多个独立的配置文件
- JButton 按钮,JRadioJButton单选按钮,JChectBox复选框
- 转 Java虚拟机5:Java垃圾回收(GC)机制详解
- javaweb开发1.环境配置(javaweb插件下载及tomact在eclips中配置)
- python图片和分形树
- Bayesian generalized linear model (GLM) | 贝叶斯广义线性回归实例
- rotate-list 旋转部分链表
- Web前端开发最佳实践系列文章汇总
热门文章
- PHP实现Bitmap的探索 - GMP扩展使用
- 用node.js给C#写一个数据表的实体类生成工具
- The path ";"; is not a valid path to the 3.10.0-957.el7.x86_64 kernel headers.
- Eclipse IDE 使用指南:Git失误提交代码,撤销commit操作
- UI自动化执行时报Parent suite setup failed: SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81报错的问题解决
- 在PLC中开关量采集模块的作用
- 系统日志报错i8042prt无法加载
- [Luogu P1122]最大子树和 (简单树形DP)
- 较详细的gdb入门教程
- 转载:Python中collections模块