• CSS3层叠样式表


    1. /*
    2. *作者:呆萌老师
    3. *☑csdn认证讲师
    4. *☑51cto高级讲师
    5. *☑腾讯课堂认证讲师
    6. *☑网易云课堂认证讲师
    7. *☑华为开发者学堂认证讲师
    8. *☑爱奇艺千人名师计划成员
    9. *在这里给大家分享技术、知识和生活
    10. *各种干货,记得关注哦!
    11. *vx:it_daimeng
    12. */

            CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。

    方式1 行内样式  

    1.      <div style="color:red; background-color: yellow;">       
    2.             文字 div>

    方式 2 嵌入式

    1.  <style>
    2.              span{
    3.                 color: red;
    4.                 background-color: yellow;
    5.              }
    6.         style>

    方式3 链接式

    <link rel="stylesheet" href="css/index.css"  />
    • CSS中的选择符
    1. 元素选择器
    1.  <div id="d1">aadiv>
    2.         <div class="news_title">bbdiv>
    3.         <div class="news_title">ccdiv>
    4.         <ul>bbul>
    5.         <span class="news_title">ddspan>

    对应css样式的写法:

    /* 通配符选择器 */

    1. *{
    2.     margin: 0;
    3.     padding: 0;
    4. }

    /*标签选择器*/

    1. div,ul{
    2.    
    3.     margin: 0;
    4.     padding: 0;
    5. }

    /*id 选择器*/

    1. #d1{
    2.     color: red;
    3. }

    /*类别选择器*/

    1. .news_title
    2. {
    3.     color: green;
    4. }

    关系选择器
        /*父子关系*/

    1. li>a{
    2.     color: green;
    3. }

    /*包含关系*/

    1. .list a{  
    2.     color: red;   
    3. }

    /*相邻关系  ul下面的第一个a 标签*/

    1. ul + a{
    2.     color: blue;  
    3. }

    /*兄弟关系 ul后面的所有 兄弟 a标签 */

    1. ul ~ a{
    2.     color: yellow;
    3. }

     属性选择器
    /*属性选择器*/

    input[name='uname']

    {

        color: red;

    }

    /*name 以 u开头*/

    input[name^='u']

    {

        color: red;

    }

    /*name 以 u结尾*/

    input[name$='u']

    {

        color: red;

    }

    /*name 包含u的*/

    input[name*='u']

    {

        color: red;

    }

  • 相关阅读:
    地址总线、物理地址、虚拟地址讲解
    数据结构之【堆】(Heap)
    【Ceph Cluster】完全删除Ceph集群
    NFT Insider #72:The Sandbox 阿尔法第三季正式启动,耐克NFT已产生超过1.85亿美元的收入
    模拟赛题解9.13
    【C#】中IndexOf的用法
    .NET混合开发解决方案13 自定义WebView2中的上下文菜单
    spring的annotation-driven配置事务管理器详解
    视频改字祝福 豪车装X系统源码uniapp前端源码
    常见希腊字母
  • 原文地址:https://blog.csdn.net/daimenglaoshi/article/details/126610400