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 指令
欢迎评论😀