分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

Web-9月10日随笔

发布时间:2023-09-06 02:18责任编辑:沈小雨关键词:Web

p是特殊标签,可以忽略结尾标签!

Css的4种引入方式:

 1. 行内样式  (style标签,写在行内)

 2. 行间样式    (style属性)

 3.外部引入样式   <link  rel=" stylesheet"   href=" css形式的网页 ">

1. 行内样式 :<!DOCTYPE  html>

        <html   lang="en">

         <head>

       <meta chaset="UFT-8">

       <title>网页的标题</title>

       <style>

       p{

          color="red"    }

       </style>

         </head>

       <body>

         <p>行内样式</p> 

       </body> 

       </html>

2.  行间样式  :<!DOCTYPE  html>

       <html>

        <head>

          <meta charset="UFT-8">

          <title>网页的标题</title>

               <style type="text/css">

            

          </style>  

        </head>

             <body>

          <p style=“colo:red”>行间样式</p>

        </body>  

       </html>

3.  外部引入样式   :<!DOCTYPE   html>

          <html>

          <head>

            <meta charset="UFT-8">

            <title>网页的标题 </title>

             <link  rel="stylesheet"    href="新创一个以css结尾的文件">

             <style  type="text/css">

              

            </style>

          </head>

          <body></body>

          </html>

选择器: 

1.标签选择器        2. class选择器              3.id选择器    

4.交集选择器(两者是并且的关系,选择器之间不能有空格)          5.后代选择器(用来选择元素的后代,外层元素在外,内层元素与外层元素之间用空格隔开)      

6.子代选择器(仅仅只选择外层元素的儿子,用大于号表示)

范例:  <!DOCTYPE  html>

          <html>

          <head>

            <meta charset="UFT-8">

            <title>网页的标题 </title>

            <style   type="text/css">

             p{

                 color=“purple”  }   (标签选择器)

             p  a{

               color=“green”    }(p标签下面的a标签都是绿色)

              #aa.aaa{

               color="yellow"     }【 交集选择器 】

              【   p #aa{

                 color="red"   }(id权重大,所以取红)

             p .aaa{

                color=“blue”    }(class选择器权重小,所以不取蓝)】(后代选择器)

             p>#aa{

                 color="pink"   }(子代选择器)

            </style>

          </head>

          <body>

            <p>

              虎子

              <a  id=“aa”   class=“aaa”>还可以<a>哈哈哈</a></a>

            </p>  

          </body>

          </html>

          id选择器(权重:100)>class选择器(权重:10)>标签选择器(权重:1)

          权重可以叠加。   important (无限大)

       

Web-9月10日随笔

原文地址:https://www.cnblogs.com/lovels/p/9622785.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved