第17节基本CSS选择器

来源：互联网发布：域名注册机构编辑：程序博客网时间：2024/06/10 00:46

基本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;}

0 0

第17节 基本CSS选择器

基本CSS选择器

链接样式.css

导入样式.css

第17节基本CSS选择器