三 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 ...
随机推荐
- 实战二：nacos服务注册与发现，openfeign服务调用
一,参照上一篇创建好微服务结构后,按业务需求编写各微服务逻辑 二,服务注册 1,安装nacos:下载,解压,运行startup.cmd 2,访问 http://localhost:8848/nacos ...
- 阿里云ecs，rds，redis优惠套餐
阿里云ECS优惠套餐 阿里云RDS优惠套餐 阿里云REDIS优惠套餐 阿里云REDIS集群版 阿里云短信资源包
- sql server DDL语句 建立数据库 定义表 修改字段等
一.数据库:1.建立数据库 create database 数据库名;use 数据库名; create database exp1;use exp1; mysql同样 2.删除数据库 drop dat ...
- 走在深夜的小码农 Fourth Day
Css3 Fourth Day writer:late at night codepeasant 学习大纲 一.emmet语法 1.简介 Emmet语法的前身是Zen coding,它使用缩写,来 ...
- 如何在 Debian 9 上搭建 LNMP 环境
步骤一.安装Nginx Nginx在默认的Debian存储库中可用. 使用以下命令更新软件包索引并安装Nginx: sudo apt update sudo apt install nginx 安装过 ...
- .netcore基于mysql的codefirst
.netcore基于mysql的codefirst 此文仅是对于netcore基于mysql的简单的codefirst实现的简单记录.示例为客服系统消息模板的增删改查实现 第一步.创建实体项目,并在其 ...
- 力扣 122 买卖股票的最佳时机II
力扣 122 买卖股票的最佳时机II 思路: 动态规划,表面上是\(O(2^n)\)的搜索空间,实际上该天的选择只与前一天的状态(是否持有股票)有关.从收益的角度来看,确实每一天的不同选择都会产生不同 ...
- EFCore 5 新特性 `SaveChangesInterceptor`
EFCore 5 新特性 SaveChangesInterceptor Intro 之前 EF Core 5 还没正式发布的时候有发布过一篇关于 SaveChangesEvents 的文章,有需要看可 ...
- project--客户信息管理系统
软件设计分析 该软件有三个模块组成:Customer CustomerList CustomerView Customer 为实体对象,用来封装客户信息: CustomerList 为 Custo ...
- 微软.net installer源码解析
微软源码地址 dotnet/install-scripts/blob/master/src/dotnet-install.ps1 代码 [string]$AzureFeed="htt ...