3-H5样式控制CSS1

于 2022-03-03 11:30:00 发布
阅读量605 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 结构性学前端 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/computer408/article/details/123243119
本文介绍了CSS的优势，如内容与表现分离、样式丰富和网页性能优化，并详细讲解了基本语法，包括链接式与导入式引入CSS的区别、样式优先级规则以及基本和高级选择器的用法。通过实例展示了标签、类和ID选择器，层次选择器、结构伪类选择器和属性选择器的运用，帮助读者深入理解CSS的样式控制和页面布局技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

#初识CSS

1.CSS的优势

内容与表现分离

网页的表现统一，容易修改

丰富的样式，使得页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS，有利于网页被搜索引擎收录

2基本语法

1样式

2区别

链接式与导入式的区别

<link/>标签属于XHTML，@import是属于CSS2.1

使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

3样式优先级

行内样式>内部样式表>外部样式表

就近原则

4基本选择器-标签、类、ID

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

基本选择器的优先级

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

标签选择器是否也遵循“就近原则”？

不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。

5高级选择器

层次选择器

结构伪类选择器

属性选择器

1层次选择器

2结构伪类选择器

奇数even,偶数odd

使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n)在父级里先看类型，再看位置

3属性选择器

总结

1标题与文章-样式引入

 /* fz  默认16,black */

css文件内容

h1 {

     font-size: 20px;

     color: red;

 }

 /* fz  默认16,black */

p {

    font-size: 16px;

    color: black;

}

方式1<link href.../>

<head lang="en">

  <meta charset="UTF-8">

<title>链接外部样式表</title>

<link href="css/common.css" rel="stylesheet" type="text/css" />

</head>

方式2<style>@import...</style>

<head lang="en">

    <meta charset="UTF-8">

    <title>导入外部样式表</title>

    <style >

        @import url("css/common.css");

    </style>

</head>

2样式优先级-就近-行内外

<head lang="en">

    <meta charset="UTF-8">

    <title>样式引入优先级问题</title>

    <!--外部样式-->

    <link rel="stylesheet" href="css/style.css"/>

    <!--内部样式-->

    <style>

        h1{

            color: green;

        }

    </style>

</head>

<body>

    <h1 style="color: red">北京欢迎你</h1>  <!--行内样式-->

    <p>北京欢迎你，有梦想谁都了不起！</p>

    <p>有勇气就会有奇迹。</p>

    <p>北京欢迎你，为你开天辟地</p>

    <p>流动中的魅力充满朝气。</p>

</body>

3标签选择器<h,p等等></h,p等等>

<head lang="en">

    <meta charset="UTF-8">

    <title>标签选择器的用法</title>

    <style type="text/css">

        h3 {

            color: #090;

        }

        p {

            font-size: 16px;

            color: red;

        }

    </style>

</head>

4类选择器class=?,.?{}

<head lang="en">

    <meta charset="UTF-8">

    <title>类选择器的用法</title>

    <style type="text/css">

        h3 {

            color: #090;

        }

        p {

            font-size: 16px;

            color: red;

        }

        .green {

            font-size: 20px;

            color: green;

        }

    </style>

</head>

<body>

<h3>北京欢迎你</h3>

<p>北京欢迎你，有梦想谁都了不起！</p>

<p class="green">有勇气就会有奇迹。</p>

</body>

5ID选择器id=?,#?{}

<head lang="en">

    <meta charset="UTF-8">

    <title>ID选择器的应用</title>

    <style type="text/css">

        #first {

            font-size: 16px;

        }

        #second {

            font-size: 24px;

        }

    </style>

</head>

<body>

<h1>北京欢迎你</h1>

<p id="first">北京欢迎你，有梦想谁都了不起！</p>

<p id="second">有勇气就会有奇迹。</p>

<p>北京欢迎你，为你开天辟地</p>

<p>流动中的魅力充满朝气。</p>

</body>

优先级比较ID>类>标签

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

6层次选择器

<head lang="en">

    <meta charset="UTF-8">

    <title>使用CSS3层次选择器</title>

    <style type="text/css">

        p,ul{

            border: 1px solid red;  /*边框属性*/

        }

        /*后代选择器*/

        /*body p{*/

            /*background: red;*/

        /*}*/

        /*子选择器*/

        /*body>p{*/

            /*background: pink;*/

        /*}*/

        /*/!*相邻兄弟选择器*!/*/

        /*.active + p{*/

            /*background: green;*/

        /*}*/

        /*/!*通用选择器*!/*/

        .active~p{

            background: yellow;

        }

    </style>

</head>

<body>

    <p  class="active">1</p><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->

    <p>2</p>

    <p>3</p>

    <ul>

        <li>

            <p>4</p>

        </li>

        <li>

            <p>5</p>

        </li>

        <li>

            <p>6</p>

        </li>

    </ul>

</body>

1后代选择器-E F

        /*body p{*/

            /*background: red;*/

        /*}*/

2子选择器E>F

        /*body>p{*/

            /*background: pink;*/

        /*}*/

   

3相邻兄弟选择器E+F

        /*.active + p{*/

            /*background: green;*/

        /*}*/

   

4通用选择器E~F

.active~p{

            background: yellow;

        }

7结构伪类选择器

<head lang="en">

    <meta charset="UTF-8">

    <title>使用CSS3结构伪类选择器</title>

    <style>

        /*ul的第一个子元素*/

        ul li:first-child{

            background: red;

        }

        /*ul的最后一个子元素*/

        ul li:last-child{

            background: green;

        }

        /*body下面的第2个p元素*/

        /*p:nth-child(2){*/

            /*background: yellow;*/

        /*}*/

        /*选择到父级里的第一子元素p*/

        p:nth-child(1){

            background: yellow;

        }

        /*父元素里第2个类型为p的元素*/

        p:nth-of-type(2){

            background: blue;

        }

    </style>

</head>

<body>

<!--演示的时候可以先把h2注释掉，等讲解E F:nth-child(n)和E F:nth-of-type(n)时候在打开-->

    <!--<h2>结构伪类选择器</h2>-->

    <p>p1</p>

    <p>p2</p>

    <p>p3</p>

    <ul>

        <li>li1</li>

        <li>li2</li>

        <li>li3</li>

    </ul>

</body>

ul的第一个子元素

        ul li:first-child{

            background: red;

        }

        

ul的最后一个子元素

        ul li:last-child{

            background: green;

        }

        

body下面的第2个p元素

        /*p:nth-child(2){*/

            /*background: yellow;*/

        /*}*/

       

 选择到父级里的第一子元素

        p:nth-child(1){

            background: yellow;

        }

        

父元素里第2个类型为p的元素

        p:nth-of-type(2){

            background: blue;

        }

8属性选择器

<head lang="en">

    <meta charset="UTF-8">

    <title>CSS3属性选择器的使用</title>

    <style type="text/css">

        /*此段代码只是让结构更美观，后续会详细讲解*/

        .demo a {

            float: left;

            display: block;

            height: 50px;

            width: 50px;

            border-radius: 10px;

            text-align: center;

            background: #aac;

            color: blue;

            font: bold 20px/50px Arial;

            margin-right: 5px;

            text-decoration: none;

            margin: 5px;

        }

        /*存在属性id的元素*/

        /*a[id] {*/

            /*background: yellow;*/

        /*}*/

        /*/!*属性id=first的元素*!/*/

        /*a[id=first] {*/

            /*background: red;*/

        /*}*/

        /*/!*属性class="links"的元素*!/*/

        /*a[class="links"] {*/

            /*background: red;*/

        /*}*/

        /*/!*属性class里包含links字符串的元素*!/*/

        /*a[class*=links] {*/

            /*background: red;*/

        /*}*/

        /*/!*属性href里以http开头的元素*!/*/

        /*a[href^=http] {*/

            /*background: red;*/

        /*}*/

        /*/!*属性href里以png结尾的元素*!/*/

        a[href$=png] {

            background: red;

        }

    </style>

</head>

<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>

    <a href="" class="links active item" title="test website" target="_blank" >2</a>

    <a href="sites/file/test.html" class="links item"  >3</a>

    <a href="sites/file/test.png" class="links item" > 4</a>

    <a href="sites/file/image.jpg" class="links item" >5</a>

    <a href="efc" class="links item" title="website link" >6</a>

    <a href="/a.pdf" class="links item" >7</a>

    <a href="/abc.pdf" class="links item" >8</a>

    <a href="abcdef.doc" class="links item" >9</a>

    <a href="abd.doc" class="linksitem last" id="last">10</a>

</p>

</body>

1存在属性id的元素E[id]

        /*a[id] {*/

            /*background: yellow;*/

        /*}*/

     

   

2属性id=first的元素E[id=first]

        /*a[id=first] {*/

            /*background: red;*/

        /*}*/

        

3属性class="links"的元素E[...]

        /*a[class="links"] {*/

            /*background: red;*/

        /*}*/

      

  

4属性class里包含links字符串的元素E=[class*=links]

        /*a[class*=links] {*/

            /*background: red;*/

        /*}*/

    

    

5属性href里以http开头的元素E=[href^=http]

        /*a[href^=http] {*/

            /*background: red;*/

        /*}*/

        

6属性href里以png结尾的元素E[href$=png]

        a[href$=png] {

            background: red;

        }

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值