css的样式导入方式及选择器 - Css

首页 > 博客列表 > css的样式导入方式及选择器

博主信息

博文 19

粉丝 0

访问量 19493

专题推荐

更多>

css 样式引用

css 样式引用有四种

内部样式引用，在当前页面生效 style

<!DOCTYE html>
<html>
 <head>
     <title>内部样式的引用</title>
     <style>
         div{
             color: red;
         }
     </style>
 </head>
 <body>
     <div>12112</div>
 </body>
</html>

2.行内样式的引用是用 stlye 属性来定制样式

<!DOCTYPE html>
<html>
 <head>
 <title>行内定制样式</title>
 <body>
     <p style="color:red;">你好 中文网</p>
 </body>
 </head>
</html>

3.外联样式的引用使用 link 标签

<!DOCTYPE html>
<html>
 <head>
 <title>外联样式</title>
 <link text="stylesheet" href="文件位置">
 <body>
     <p>你好 中文网</p>
 </body>
 </head>
</html>

4.公共样式的引入使用 @import url();

选择器的使用

<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择的使用<title>
        <style>
            /*标签选择器 一组*/
            li{
                border:1px soild red;
            }
            /*类选择器 一组 使用方式 .类名*/
            .demo{
                color:red;
            }
            /*id 选择器 浏览器不保证唯一性 由开发者自定义 使用方式 #id*/
            #id{
                background-color:blue;
            }
            /* 后代选择器  所有层级*/
            ul li{
                color:blue;
            }
            /*子元素选择器  仅父子层级*/
            body>ul>li{
                background-color:red;
            }
            /*同级相邻选择器*/
            .demo1+li{
                background-color:bule;
            }
            /*同级所有选择器*/
            。demo~li{
                color:yellow;
            }
            /*伪类选择器*/
            a:hover{
                display:none;
            }
        </style>
    </head>
    <body>
        <ul id="dd">
            <li class="demo"></li>
            <li class="demo1"></li>
            <li class="demo"></li>
            <li class="demo"></li>
        </ul>
        <a href="">你好</a>
    </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML 语法元素属性

2020-12-08 23:28:19