css基础
css 全名Cascading Style Sheets，中文为层叠样式表，主要用来美化界面，必须与别的语言一起使用。
使用方式可以分为：
1.外部样式表
又分为链接（link标签）和导入（@import）css文件
而css文件即是将head中的style中的代码独立而成
使用语法分别为：1.链接 <link href="url路径" rel="stylesheet" type="text/css" media="媒体查询列表"/>
2.导入@import url;
或@import url 媒体查询列表; /*一个逗号分隔的 媒体查询 条件列表，满足条件时才引入 CSS。*/
2.内部样式表
有很多选择器，每个选择器有自己的优先级
如标签选择器优先级最低，但是默认对网页内的统一标签的内容生效（能否生效成功要看优先级了）
而id选择器和类选择器用法上无语法上的硬性区别，却又有使用标准的区别：id选择器在标准上要求一个页面上一个id选择器只用一次（但是语法上确实可以用多次），对比类选择器则可以使用多次（补充：id优先级大于类，可以看到作用范围与优先级成反比）
使用示例：
1.标签选择器：
<head>
<style>
p p标签的选择器
{
background-color:yellow;
}
</style>
</head>
<body>
<p>我住在 Duckburg。</p> p标签的选择器默认对p标签生效
2.类选择器:
<head>
<style>
.intro 用.class{}的方式定义类选择器
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro"> 在div内intro类选择器生效
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
3.id选择器
<head>
<style>
#firstname 使用#id定义id选择器
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p id="firstname">我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
3.行内样式表
行内样式都使用属性 style来实现，如：
<p style="color:red">This is a paragraph.</p>
更进一步的，外部样式表和内部样式表可以将选择器组合使用，共有三种组合方法：
1.后代选择器：将外层标签写在外面，内层写在后面，中间有空格做间隔，实现了选择标签元素和标签元素的交集；，十分好用，个人认为在三种方法中最实用
2.交集选择器，第一个必须是标签选择器，第二个必须是id或类选择器，中间没有空格，实现了选择标签元素和id/类元素的交集；
3.并集选择器：多个选择器之间用“，”间隔，做到了对多个标签同时定义，可以节约代码量
补充：
- 基本无任何特性标签span
文章部分源自w3school和CSS - 导入样式文件的两种方法： link 标签和 @import 指令
欢迎评论😀
浙公网安备 33010602011771号