前端基础之CSS_1[通俗易懂]

前端基础之CSS_1[通俗易懂]摘要CSS(层叠样式表)的三种设置方法基本选择器组合选择器属性选择器分组与嵌套伪类选择器伪元素选择器选择器的优先级一些样式的设置(字体、文本、背景、边框)display属性设置01.CSS(层叠样式表)的三种设置方法CSS又名层叠样式表,它的作用就是给H…

大家好,又见面了,我是你们的朋友全栈君。

摘要


01.CSS(层叠样式表)的三种设置方法

  •  CSS又名层叠样式表,它的作用就是给HTML网页进一步装饰,前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构,后面学习的表form表单展现的形式是很low的,需要进一步对齐修饰设置,让它变得更高大上起来,这就离不开CSS的知识。
    • 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现
      HTML
      标准通用标记语言的一个应用)或
      XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
    • CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
  • 语法结构:选择器 {属性: 属性值;属性: 属性值}
  • 注释形式:/*这是注释内容*/
                     /*多行注释内容1
                       多行注释内容2
                    */
  • 三种设置方法:
      • head里面style中写css:<style>p {color: red}</style>
      • head里面link引入css文件:<link rel=”stylesheet” href=”my_scc_02.css”> 
      • 在标签内直接指定style:<p style=”color: red”>hello world!</p>

我们在设置不同种类标签内容的样式的时候,需要知道我们修改的标签的位置,接下来看看如何精确定位设置样式的位置,才能设置其样式。

02.基本选择器

标签通常同的属性有:id和class类

  • 标签选择器:根据标签种类来设置该类标签样式
  • id选择器:每个标签都可以设置一个id在唯一标识它,所以我们可以通过这个id来定位到该标签位置,从而进行修改样式操作,id前面注意要加上#
  • 类选择器:在标签里面设置class=”c1″,c1是一个类的设置样式,在style里定义的时候前面需要加点(.c1 {color:red})
  • 通用选择器:类似这种* {color: blue},*代表所有标签,意思就是所有都全部设置
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS学习测试</title>
        <style>
            p {
          
          color: gold}
            .c1 {
          
          color: mediumturquoise}
            #p1 {
          
          color: blue}
            * {
          
          color: red}
        </style>
    </head>
    <body>
    <p>我要记住你的样子</p>
    <div>像鱼记住水的拥抱</div>
    <span>像云在天空中停靠</span>
    <h3 class="c1">夜晚的来到</h3>
    <p id="p1">也不会忘了阳光的温暖</p>
    </body>
    (涉及查找优先级的问题,在后面会谈及。)

    前端基础之CSS_1[通俗易懂]


03.组合选择器(span套span,不符合html5规则)

  • 后代选择器==>div  span:div里面所有的span
    <div>
        01我要忘了你的样子
        <br>
        <span>
            02像鱼忘了海的味道
            <br>
            <span>
                03放下所有梦和烦恼
            </span>
        </span>
    </div>

    前端基础之CSS_1[通俗易懂]

  • 儿子选择器==>div>span:div里面儿子一层(第一层)所有的span
    <style>
            div>span {
          
          color: deeppink}
        </style>
    
    <div>主div
        <div>主div的儿子1
            <span>主div的孙子1</span>
        </div>
        <p>主div的儿子2
            <span>主div的孙子2</span>
        </p>
    </div>

    前端基础之CSS_1[通俗易懂]

  • 毗邻选择器==>div+span:div下面挨着的span
    <style>
            div+span {
          
          color: deeppink}
    </style>
    
    <div>主div
        <p>主div的儿子2
            <span>主div的孙子2</span>
        </p>
    </div>
    <span>div下面的第一个span</span>
    <span>div下面的第二个span</span>

    前端基础之CSS_1[通俗易懂]

  • 弟弟选择器==>div~span:与div同一级且下面所有的标签
        <style>
            div~span {
          
          color: deeppink}
        </style>
    
    <div>主div
        <p>主div的儿子2
            <span>主div的孙子2</span>
        </p>
    </div>
    <span>div下面的第一个span</span>
    <span>div下面的第二个span</span>

    前端基础之CSS_1[通俗易懂]


04.属性选择器

  •  在标签内自定义一个属性,用于找到该标签的作用。
        <style>
            [xxx] {
          
          color: deeppink}
        </style>
    
    <p xxx>自定义属性xxx</p>
    <p xxx="1">自定义属性+值1</p>
    <p xxx="2">自定义属性+值2</p>
    <p id="xxx">我是打酱油的!</p>

    前端基础之CSS_1[通俗易懂]

        <style>
            [xxx='1'] {
          
          color: deeppink}
        </style>
    
    
    <p xxx>自定义属性xxx</p>
    <p xxx="1">自定义属性+值1</p>
    <p xxx="2">自定义属性+值2</p>
    <p id="xxx">我是打酱油的!</p>

    前端基础之CSS_1[通俗易懂]

        <style>
            [xxx='2'] {
          
          color: deeppink}
        </style>
    
    <span xxx="2">我是span,我的属性里有xxx</span>
    <p xxx>自定义属性xxx</p>
    <p xxx="1">自定义属性+值1</p>
    <p xxx="2">自定义属性+值2</p>
    <p id="xxx">我是打酱油的!</p>

    前端基础之CSS_1[通俗易懂]


05.分组与嵌套

  • 分组:
    <style>
        div,p,span {
          
          color: red}
    </style>
    
    <div>我是div</div>
    <p>我是一个p</p>
    <span>我是span</span>

    前端基础之CSS_1[通俗易懂]

  • 嵌套:
    <style>
        div p,span {
          
          color: red}
    </style>
    
    <div>我是div
        <p>我是div里面的一个p</p>
        <span>我是div里面的span</span>
    </div>
    <p>我是一个p</p>
    <span>我是span</span>

  • div p嵌套关系,然后div和span是组合关系,所以:
    前端基础之CSS_1[通俗易懂]


06.伪类选择器

  •  a标签的四种状态:
        <style>
            a {
          
          text-decoration: none}   /*去掉下划线*/
            a:link {
          
          color: green}       /*链接什么都不干的时候颜色*/
            a:hover {
          
          color: red}        /*鼠标放在链接上面不做任何动作时候变的颜色*/
            a:active {
          
          color: blue}      /*鼠标点击链接时候,链接的颜色*/
            a:visited {
          
          color: gray}     /*当这个链接已经点击过,将变成的颜色*/
        </style>
    
    <p><a href="#我是下面" id="我是上面">点我跳到下面</a></p>
    <p><a href="http://www.t66y.com" target="_blank">点我开启新的人生篇章(爬梯吧)</a></p>
    <p><a href="http://www.baidu.com" target="_blank">百度一下</a></p>
    <p><a href="#我是上面" id="我是下面">点我跳到上面</a></p>

  • 获取焦点:让输入框在选中时候,背景颜色变成自定义颜色
        <style>
            input:focus {
          
          background-color: yellow}
        </style>
    
    <form action="">
        <label for="a1">用户: <input type="text" id="a1" name="username"></label>
        <label for="a2">用户: <input type="password" id="a2" name="password"></label>
        <input type="submit">
    </form>

    前端基础之CSS_1[通俗易懂]


07.伪元素选择器

  •  伪元素选择器:将某一标签的第一个,开头、结尾处设置样式。
  • first-letter
        <style>
            p:first-letter {
          
          color: red;
                            font-size: 24px}
        </style>
    
    <p>我闻西方大士,</p>
    <p>为人了却凡心。</p>
    <p>秋来明月照蓬门,</p>
    <p>香满禅房幽径。</p>
    <p>屈指灵山会后,</p>
    <p>居然紫竹成林。</p>
    <p>童男童女拜观音,</p>
    <p>仆仆何嫌荣顿?</p>            

    前端基础之CSS_1[通俗易懂]

  • before:

       <style>
            p:before {
          
          content: '△';
                      color: red;
                      font-size: 24px}
        </style>
    
    <p>万物由道而生,循着道成长,而后又回归于道。</p>
    <p>人可以毁灭,但不可以屈服。</p>
    <p>你要克服的是你的虚荣心,是你的炫耀 欲,你要对付的是时时刻刻想出风头的小聪明。</p>

    前端基础之CSS_1[通俗易懂]

  • after:

        <style>
            p:after {
          
          content: '☆';
                      color: red;
                      font-size: 24px}
        </style>
    
    <p>包租婆,怎么就没有水了呢</p>
    <p>维护世界和平就靠你了,我这里有本秘籍,见与你有缘,就十块钱卖给你了.</p>

    前端基础之CSS_1[通俗易懂]


08.选择器的优先级

  •  相同选择器,不同的引入方式:就近原则(从上往下生效),看哪个style里标签更近。
  •  不同选择器,不同引入方式:行内样式>id选择器>类选择器>标签选择器

09.一些样式的设置(字体、文本、背景、边框)

  •  块儿级标签的宽度和长度:
         <style>
            div {
          
          width: 800px; height: 100px;background-color: mediumspringgreen}
        </style>
    
    <div>樊登读书,改变你我</div>

    前端基础之CSS_1[通俗易懂]

  • 字体相关设置(大小、自重、颜色):
        <style>
            p {
          
          font-size: 24px;
               font-weight: lighter;
               color: #FF6700;
            /*color: rgb(0,0,255);*/
            /*color: rgba(0,0,255,0.2)}   最后的0.2是透明度(0-1之间)*/
        </style>
    
    <p>面朝大海,春暖花开</p>

    前端基础之CSS_1[通俗易懂]

  • 文本属性:(通常给a标签用)

        <style>
            p {
          
          text-align: center;
            text-decoration: line-through}
        </style>
    
    <p>浪花一朵朵</p>
    <p>桃花朵朵开</p>

     

     

  • 前端基础之CSS_1[通俗易懂]  
  • 前端基础之CSS_1[通俗易懂]
  • 去掉跳转文字的下划线:
        <style>
            a {
          
          text-decoration: none}
        </style>
    
    <a href="http://www.baidu.com">百度一下</a>
    <a href="http://www.google.com">谷歌一下</a>

    前端基础之CSS_1[通俗易懂]

  • 背景属性:
        <style>
            .c1 {
          
          
            height: 200px;
            background: url("20190529[21-04].png") blue no-repeat center;
            }
    
            .c2 {
          
          height: 200px;background-color: tomato}
            .c3 {
          
          height: 200px;background-color: yellow}
            .c4 {
          
          height: 200px;background-color: greenyellow}
    
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>

    前端基础之CSS_1[通俗易懂]

  • 边框:
        <style>
            div {
          
          border: 1px dashed red}
        </style>
    
    <div>我是一条鱼</div>

    前端基础之CSS_1[通俗易懂]

  • 画圆:

        <style>
            div {
          
          
                width: 400px;
                height: 400px;
                background-color: red;
                border: 2px dashed black;
                border-radius: 50%;
            }
        </style>
    
    <div></div>

    前端基础之CSS_1[通俗易懂]


10.display属性设置(设置不显示,不会继续占用位置)

  •  display:none
        <style>
            [xxx] {
          
          display: none}    /*设为none代表含xxx属性标签的内容都不显示,且不再占用原位置
        </style>
    
    
    <div>开头1</div>
    <div xxx>看我显示没有1</div>
    <div xxx>看我显示没有1</div>
    <div>结尾2</div>

    前端基础之CSS_1[通俗易懂]

  • display:inline    将块级标签变成行内标签
        <style>
            div {
          
          
                height: 300px;
                width: 200px;
                background-color: aquamarine;
                display: inline;
            }
        </style>
    
    <div>天天</div>
    <div>年年</div>

    前端基础之CSS_1[通俗易懂]

  • display:block    将行内标签变成块级标签
        <style>
            span {
          
          display: block}
        </style>
    
    <span>美好的事情</span>
    <span>即将到来</span>

    前端基础之CSS_1[通俗易懂]

  •  display :inline-block  让span标签具有独占一行且可以设置长宽

        <style>
            span {
          
          
                width: 120px;
                height: 400px;
                background-color: bisque;
                border: 2px solid red;
                display: inline-block;
            }
        </style>
    
    <span>第一个span</span>
    <span>第二个span</span>

    前端基础之CSS_1[通俗易懂]

转载于:https://www.cnblogs.com/suguangti/p/10944050.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152676.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Xshell 官方免费版下载流程

    Xshell 官方免费版下载流程官网地址:https://www.netsarang.com所有产品下载地址:https://www.netsarang.com/download/前言网上流传有很多的Xshell的激活成功教程版、绿色版。但是Xshell多版本存在后门,或上传用户服务器账号密码。这是很可怕的,服务器的账号、密码有可能泄露。实际上官方针对个人账户是有提供免费版本来下载。下载免费版…

    2022年10月11日
  • 一键安装TiDB开发环境(centos7)

    一键安装TiDB开发环境(centos7)

  • mongodb百亿数据存储(mysql数据库并发量)

    3 过程分析与测试3.1 GridFS概述由于MongoDB中的Bson对象大小是有限制的,在1.7版本以前单个Bson对象最大容量为4M,1.7版本以后单个Bson对象最大容量为16M[5]。对于一般的文件存储,单个对象的4到16M的存储容量能够满足需求,但无法满足对于一些大文件的存储,如高清图片、设计图纸、视频等,因此在海量数据存储方面,MongoDB提供了内置的GridFS,

  • fpga学习——zynq图像处理中的DVP流接口封装

    fpga学习——zynq图像处理中的DVP流接口封装之前文章介绍了基于zynq的图像处理架构问题。其中,作为开发者,需要重点关注图像传感器接口、处理算法、显示接口,这些模块。现在我们一同学习用于视频数据接口的DVP模块,并将其封装成AXI-stream接口便于直接和VDMAIP通信。DVP_AXIstreamIPv1.0使用说明1.设计概述•用于cmos传感器视频数据采集,将cmos输出的8位视频数据拼接成RGB565模式•AXI_stream主机接口,用于和PS端内存的数据交互•基于vivado18.3软件设计2.模块分析

  • JSTL+EL表达式方法获取Oracle的Clob字段内容[通俗易懂]

    JSTL+EL表达式方法获取Oracle的Clob字段内容

  • tl494cn逆变器电路图_用TL494制作的逆变电源[通俗易懂]

    tl494cn逆变器电路图_用TL494制作的逆变电源[通俗易懂]TL494集成块广泛应用在开关电源,其内部集成有PWM、三角波发生器、电池欠压检测,+5V电压基准等电路,具有外接元件少,控制稳定的特点。笔者在网上查阅大量资料,自制了一款准正弦波300W逆变器,采用直流12V电瓶供电,可供小功率单相电机、日光灯等电感性负载用电,电路如附图所示。该逆变板工作频率由TL494⑤、⑥脚外接阻容元件确定,本例为2.2kHz左右。该频率的大小直接影响功率场效应管的功率损耗…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号