三 CSS基础入门
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等。
三 CSS基础入门的更多相关文章
- CSS基础入门
css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- 第五十五天 css基础入门
一.引入css的三种方式 1.行间式 <div style="width: 100px; height: 100px; background-color: red">& ...
- 【Python】Java程序员学习Python（三）— 基础入门
一闪一闪亮晶晶,满天都是小星星,挂在天上放光明,好像许多小眼睛.不要问我为什么喜欢这首歌,我不会告诉你是因为有人用口琴吹给我听. 一.Python学习文档与资料 一般来说文档的资料总是最权威,最全面的 ...
- 【WEB基础】HTML & CSS 基础入门（7）表格
表格的基本结构 表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版.虽然现在提倡使用DIV+CSS完成页面布局,但表格框架简单明了,对于繁杂的数据,一个简洁的表格能让其展现的极有条理. ...
- 【WEB基础】HTML & CSS 基础入门（5）边框与背景
前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...
- 【WEB基础】HTML & CSS 基础入门（3）段落及文本
写在前面:CSS选择器 网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的.简单的例子,网页上有几段文字,我们想 ...
- 【WEB基础】HTML & CSS 基础入门（4）列表及其样式
前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...
- 【WEB基础】HTML & CSS 基础入门（2）选取工具：VS2019安装使用
前面 子曰“工欲善其事,必先利其器”.开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了.这里推荐使用Visu ...
随机推荐
- 在PostgreSQL中CREATE STATISTICS
如果你用Postgres做了一些性能调优,你可能用过EXPLAIN.EXPLAIN向你展示了PostgreSQL计划器为所提供的语句生成的执行计划,它显示了语句所引用的表如何被扫描(使用顺序扫描.索引 ...
- oVirt4.4虚拟机备份方法
红帽oVirt于今年推出了oVirt 4.4,该版本在系统.存储.网络.用户界面等方面做出增强功能与优化更新,为oVirt用户提供功能更强大.更灵活的IT基础架构.云祺科技也于最近发布了全新版本云祺容 ...
- PPT神器
今天要给大家推荐一款开挂一般的 PPT 插件:iSlide 强烈推荐大家下载使用哈,绝对分分钟让你做出美观大气的 PPT! 不管是老师.学生还是公司人员,PPT 都是必须要掌握的技能,然而要 ...
- Redis学习笔记（七）——数据结构之有序集合（sorted set）
一.介绍 Redis有序集合和集合一样都是string类型元素的机会,且不允许重复的成员. 不同的是每个元素都会关联一个double类型的分数.Redis正是通过分数来为集合中的成员进行从小到放大的排 ...
- Mybatis---07Mybatis配置文件浅析（五）
1.environments:MyBatis 可以配置成适应多种环境,这种机制有助于将 SQL 映射应用于多种数据库之中, 现实情况下有多种理由需要这么做.例如,开发.测试和生产环境需要有不同的配置: ...
- JUC---08ForkJion(分支合并)
一.什么是ForkJion Fork/Join框架是Java7提供的并行执行任务框架,思想是将大任务分解成小任务,然后小任务又可以继续分解,然后每个小任务分别计算出结果再合并起来,最后将汇总的结果作为 ...
- Pytest里面的测试用例怎么进行前置准备和后置清理操作？
Pytest处理前置后置有两种方式可以处理. 第一种是通过setup和teardown这样的方法去处理: 第二种是通过fixture来实现的.首先先定义fixture,然后在调用.定义fixture, ...
- 【原创】Linux虚拟化KVM-Qemu分析（五）之内存虚拟化
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: KVM版本:5.9 ...
- Loadrunner11简单压测接口教程
一.需求 使用Loadrunner压测目标接口,要求支持1000并发数. 目标接口:https://www.xxx.com/digitaldata/api/signer/1.0/signerRegis ...
- 23longest-consecutive-sequence
题目描述 给定一个无序的整数类型数组,求最长的连续元素序列的长度. 例如: 给出的数组为[100, 4, 200, 1, 3, 2], 最长的连续元素序列为[1, 2, 3, 4]. 返回这个序列的长 ...