CSS三种常用选择器

CSS的优势:

1.内容和表现分离

2.网页结构表现统一,可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO,容易被引擎收录

CSS三种导入方式

就近原则,哪种样式距离修饰内容近,就选择那个。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        
        h1{
            color:chartreuse;
        }
    style>
head>
<body>
<link rel="stylesheet" href="style.css">

<h1 style="color: aqua">hello,world!h1>
body>
html>

外部样式两种写法
链接式:

<link rel="stylesheet" href="style.css">外部样式

导入式:

<style>
        @import url("style.css");
    style>

选择器:选择页面某一个,或者某一类元素

标签选择器:会选择这个页面所有标签。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        h1{
            color: #27c52e;
            background: aqua;
            border-radius: 34px ;
        }
        p{
            font-size: 80px;
        }
    style>
head>
<body>
<h1>好好学习h1>
<h1>天天向上h1>
<p>hello,worldp>
body>
html>

类选择器:可以复用。形式为:英文状态下点加类名加大括号

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .qingjiang{
            color: aqua;
        }
        .kuangshen{
            color: blue;
        }
    style>



head>
<body>
<h1 class="qingjiang">好好学习h1>
<h2 class="kuangshen">好好学习h2>
<h3>好好学习h3>

body>
html>

id选择器:全句唯一,不可复用。形式为:英文状态下井号加ID名加大括号。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
#qingjiang{
    color: brown;
}
    style>
head>
<body>
<h1 id="qingjiang">世上无难事h1>
<h1 >世上无难事h1>

body>
html>

ID选择器>类选择器>标签选择器

你可能感兴趣的:(css,前端)