第17节基本CSS选择器

最新推荐文章于 2021-08-26 13:40:11 发布

Simple-Coder

最新推荐文章于 2021-08-26 13:40:11 发布

阅读量426

点赞数

分类专栏： Html+css

本文链接：https://blog.csdn.net/qq_32895969/article/details/55102419

版权

Html+css 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

基本CSS选择器

<html>
    <head>
        <title>基本css选择器</title>
        <style type="text/css">
        <!-- .red{color:red;} .blue{color:blue;} .green{color:green;} -->
        <!-- p{font-family:楷体;size:18px;color:red;} -->

        <!-- .big{font-size:25px;} -->

        <!-- #green{color:green;} #blue{color:blue;} #gray{color:gray;} -->

        @import 导入样式.css;
        </style>
        <link href="链接样式.css" type="text/css" rel="stylesheet">

    </head>
    <body>
    <!--基本选择器包含：标记选择器、类别选择器、ID选择器-->
        <h2 align=center class="red">一、标记选择器</h2>
        <p>标记选择器 使用方法：在style中 添加标签名{属性：值;属性：值;}<p>
        <hr/>
        <h2 align=center class="blue">二、类别选择器 使用方法：在style中 添加.(class的名字){属性：值;属性：值;}</h2>
        <p class="green">类别选择器1</p>
        <p class="blue">类别选择器2</p>
        <!--一个标签运用多个类别选择器-->
        <p class="red big">类别选择器3</p>
        <hr/>
        <h2 align=center class="green">三、ID选择器 使用方法：</h2>
        <p id="blue">ID选择器1</p>
        <p id="green">ID选择器2</p>
        <p id="gray">ID选择器3</p>
        <hr/>
        <h2 align=center class="red">在html中使用css的方法 包括：行内样式、内嵌样式、链接样式、导入样式</h2>
        <h2 align=center>行内样式</h2>
        <p style="color:#FF00FF;font-style:italic">行内样式 格式：<标签 style属性="属性:值"></p>
        <p style="color:#FF0000;text_decoration:underline;">行内样式 格式：<标签 style属性="属性:值"></p>
        <p style="color:#FF00FF; font-size:20px; font-weight:bold;">正文内容3 </p>
        <hr/><br/>
        <h2 align=center>内嵌样式格式：标签{属性:值;属性:值;}</h2>
        <p>内嵌样式 其实就是选择器的书写格式</p>
        <hr/><br/>
        <h2 class="a1"align=center>链接样式格式：{link href="xxx.css" type="text/css" rel="stylest.eet"}</h2>
        <p class="a2">链接样式是使用频率最高的也是最为实用的。实现了html代码和css代码完全分离。让后期工作变得简单好维护。注意link不能嵌套在style标签中否则没有效果。</p>
        <hr/><br/>
        <h2 class="b1"align=center>导入样式格式：①@import url(xxx.css) ②@import url("xxx.css") ③@import url('xxx.css') ④@import xxx.css ⑤@import "xxx.css" ⑥@import 'xxx.css'</h2>
        <p class="b2">导入样式和链接样式除了语法不一样，其他都是一样的。@import必须嵌套在style才有效果</p>

    </body>
</html>

链接样式.css

.a1{color:gray; align:center}
.a2{
color:yellow;
text-decoration:underline;
font-weight:bold;
font-size:15px;}

导入样式.css

.b1{color:yellow;}

.b2{
color:blue;
text-decoration:underline;
font-weight:bold;
font-size:15px;}

Simple-Coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

第17节 基本CSS选择器

基本CSS选择器

链接样式.css

导入样式.css

第17节基本CSS选择器