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基础入门的更多相关文章

  1. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

  2. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  3. 第五十五天 css基础入门

    一.引入css的三种方式 1.行间式 <div style="width: 100px; height: 100px; background-color: red">& ...

  4. 【Python】Java程序员学习Python(三)— 基础入门

    一闪一闪亮晶晶,满天都是小星星,挂在天上放光明,好像许多小眼睛.不要问我为什么喜欢这首歌,我不会告诉你是因为有人用口琴吹给我听. 一.Python学习文档与资料 一般来说文档的资料总是最权威,最全面的 ...

  5. 【WEB基础】HTML & CSS 基础入门(7)表格

    表格的基本结构 表格是网页上最常见的元素,它除了可以用来展示数据,还常常被用来排版.虽然现在提倡使用DIV+CSS完成页面布局,但表格框架简单明了,对于繁杂的数据,一个简洁的表格能让其展现的极有条理. ...

  6. 【WEB基础】HTML & CSS 基础入门(5)边框与背景

    前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...

  7. 【WEB基础】HTML & CSS 基础入门(3)段落及文本

    写在前面:CSS选择器 网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的.简单的例子,网页上有几段文字,我们想 ...

  8. 【WEB基础】HTML & CSS 基础入门(4)列表及其样式

    前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...

  9. 【WEB基础】HTML & CSS 基础入门(2)选取工具:VS2019安装使用

    前面 子曰“工欲善其事,必先利其器”.开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了.这里推荐使用Visu ...

随机推荐

  1. volatile到底做了什么:

    volatile到底做了什么: 禁止了指令重排 保证了不同线程对这个变量进行操作时的可见性,即一个线程修改了某个变量值,这个新值对其他线程是立即可见的 不保证原子性(线程不安全) synchroniz ...

  2. GitHub如何删除项目库Repositories

    1.在头像那里找到settings按钮 2.选择repositories 3.找到你要删除的项目 4.点击settings 5.滑到页面最下面,点击delete 7.输入项目名称,复制即可 8.删除后 ...

  3. centos7下PHP安装gd扩展

    第一步: 安装需要用到的库 yum -y install libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel 第二步: ...

  4. windows下nginx中配置端口转发 ----本文来自转载

    什么是端口转发 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 转载原文链接:https://www.cnblogs.com/chanshuyi/ ...

  5. APP后台架构20191205

    1.架构,架构与业务紧密相关,是有业务驱动的. 2.APP后台演进原则. App后台的架构是由业务规模驱动而演进的,App后台是为业务服务的,App后台的价值在于能为业务提供其所需要的功能,不应过度设 ...

  6. 并发编程——多线程计数的更优解:LongAdder原理分析

    前言 最近在学习ConcurrentHashMap的源码,发现它采用了一种比较独特的方式对map中的元素数量进行统计,自然是要好好研究一下其原理思想,同时也能更好地理解ConcurrentHashMa ...

  7. STM32入门系列-STM32最小系统介绍

    STM32最小系统组成 单片机最小系统,也就是能够使得单片机正常运行程序,最少需要连接哪些器件.一般来说,STM32最小系统由四部分组成: 电源电路 复位电路 晶振电路 下载电路 STM32单片机由A ...

  8. 自定义控件-只有横线的文本输入框(TxtLine)

    需求:在实际开发中,由于TextBox控件的背景色样式不美观,且TextBox不能直接设置背景颜色,因此需要使用自定义控件以实现如下效果 实现代码 public partial class TxtLi ...

  9. .NetCore中简单使用EasyNetQ

    前言 我们在.Net中使用RabbitMQ,最原始的就是基于RabbitMQ.Client进行编码,在这个过程中我们需要通过代码约定和维护队列,Exchange等.如果是自行编码封装通用型的Rabbi ...

  10. 动态规划——用二进制表示集合的状态压缩DP

    动态规划当中有非常常见的一个分支--状态压缩动态规划,很多人对于状态压缩畏惧如虎,但其实并没有那么难,希望这文章能带你们学到这个经典的应用. 二进制表示状态 在讲解多重背包问题的时候,我们曾经讲过二进 ...