三 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 ...
随机推荐
- 面试不再慌，看完这篇保证让你写HashMap跟玩一样
今天这篇文章给大家讲讲hashmap,这个号称是所有Java工程师都会的数据结构.为什么说是所有Java工程师都会呢,因为很简单,他们不会这个找不到工作.几乎所有面试都会问,基本上已经成了标配了. 在 ...
- 503. 下一个更大元素 II
503. 下一个更大元素 II 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大 ...
- java之集合容器（Collection，Map）
首先我们要了解什么是集合? 正所谓容器,比如说杯子是装水的容器,衣柜是装衣服的容器,那么集合就是装数据的容器. 集合有什么特点呢? 1.集合长度是可变的 2.集合用来存储对象 集合和数组有什么区别呢? ...
- 【总结】docker
1 docker概述 1.1 docker简介 Docker目标是实现轻量级的操作系统虚拟化解决方案.比虚拟机更轻量级. 虚拟机可以理解成一栋楼里的一个个房间(共享花园基地等),而docker可以理解 ...
- html input只允许输入整数
如果想想让input输入框只输入整数,直接使用以下的input就可以了 <input id="sequence" class="o_input" onke ...
- error: invalid command ‘bdist_wheel‘
解决方法: pip3 install wheel 了解更多,请关注公众号
- K8S Canal基于Prometheus进行实时指标监控
文章来源于本人的印象笔记,如出现格式问题可访问该链接查看原文 部署canal的prometheus监控到k8s中 1.grafana的docker部署方式:https://grafana.com/gr ...
- Servlet学习笔记（四）
目录 Servlet学习笔记(四) 一.会话技术Cookie.session 1. 什么是会话技术? 2. 会话技术有什么用? 3. Cookie 3.1 什么是Cookie? 3.2 使用Cooki ...
- fidder 学习
前提 你要清楚下面两个问题的答案 1.接口是什么? 2.抓包是什么? 在提一嘴 想要获取手机上的时时请求 首先要把手机和电脑连接同一个网络 也就是在同一频道上 开始 1.安装 Fidder Every ...
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...