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.并集选择器:多个选择器之间用“,”间隔,做到了对多个标签同时定义,可以节约代码量

补充:

  1. 基本无任何特性标签span

文章部分源自w3school和CSS - 导入样式文件的两种方法: link 标签和 @import 指令

欢迎评论😀

posted @ 2019-07-15 16:56  我是一个呵呵呵  阅读(186)  评论(0编辑  收藏  举报