zoukankan      html  css  js  c++  java
  • 前端知识(三)

    • 分组与嵌套
    • 伪类选择器
    • 伪元素选择器
    • 选择器优先级
    • css属性相关(操作标签样式)

    一、分组与嵌套

    div,p,span {  /*逗号表示并列关系*/
                color: yellow;
            }
    #d1,.c1,span  {
                color: orange;
            }
    

    伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                background-color: black;
            }
            a:link {  /*访问之前的状态*/
                color: red;
            }
            a:hover {  /*需要记住*/
                color: aqua;  /*鼠标悬浮态*/
            }
            a:active {
                color: black;  /*鼠标点击不松开的状态  激活态*/
            }
            a:visited {
                color: darkgray;  /*访问之后的状态*/
            }
            p {
                color: darkgray;
                font-size: 48px;
            }
            p:hover {
                color: white;
            }
            
            input:focus {  /*input框获取焦点(鼠标点了input框)*/
                background-color: red;
            }
        </style>
    </head>
    <body>
    <a href="https://www.jd.com/">小轩在不在?</a>
    <p>点我有你好看哦</p>
    <input type="text">
    </body>
    </html>
    

    三、 伪元素选择器

    p:first-letter {
                font-size: 48px;
                color: orange;
            }
    p:before {  /*在文本开头 同css添加内容*/
                content: '你说的对';
                color: blue;
            }
    p:after {
                content: '雨露均沾';
                color: orange;
            }
    ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
    

    四、选择器优先级

    """
    id选择器
    类选择器
    标签选择器
    行内式
    	
    """
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <style>
            /*
                1.选择器相同 书写顺序不同
                    就近原则:谁离标签更近就听谁的
                2.选择器不同 ...
                    行内 > id选择器  > 类选择器 > 标签选择器
                    精确度越高越有效
            */
            #d1 {
                color: aqua;
            }
            /*.c1 {*/
            /*    color: orange;*/
            /*}*/
            /*p {*/
            /*    color: red;*/
            /*}*/
        </style>
    <!--    <link rel="stylesheet" href="mycss1.css">-->
    </head>
    <body>
        <p id="d1" class="c1" style="color: blue">贤妻果然很识趣,有前途~</p>
    </body>
    </html>
    

    五、css属性相关

    <style>
            p {
                background-color: red;
                height: 200px;
                 400px;
            }
            span {
                background-color: green;
                height: 200px;
                 400px;
                /*行内标签无法设置长宽 就算你写了 也不会生效*/
            }
    </style>
    

    字体属性

    p {
                /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/
    
                /*font-size: 24px;  !*字体大小*!*/
    
                /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
    
                /*color: red;  !*直接写颜色英文*!*/
                /*color: #ee762e;  !*颜色编号*!*/
                /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
                /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/
    
                /*当你想要一些颜色的时候 可以利用现成的工具
                    1 pycharm提供的取色器
                    2 qq或者微信截图功能
      							也可以多软件结合使用 
                */
            }
    

    文字属性

    p {
                /*text-align: center;  !*居中*!*/
                /*text-align: right;*/
                /*text-align: left;*/
                /*text-align: justify;  !*两端对齐*!*/
    
                /*text-decoration: underline;*/
                /*text-decoration: overline;*/
                /*text-decoration: line-through;*/
                /*text-decoration: none;*/
                /*在html中 有很多标签渲染出来的样式效果是一样的*/
                font-size: 16px;
                text-indent: 32px;   /*缩进32px*/
            }
            a {
                text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
            }
    

    背景图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            #d1 {
                height: 500px;
                background-color: red;
            }
            #d2 {
                height: 500px;
                background-color: green;
            }
            #d3 {
                height: 500px;
                background-image: url("222.png");
                background-attachment: fixed;
            }
            #d4 {
                height: 500px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    </body>
    </html>
    

    边框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
    
            p {
                background-color: red;
    
                border- 5px;
                border-style: solid;
                border-color: green;
    
            }
            div {
                /*border-left- 5px;*/
                /*border-left-color: red;*/
                /*border-left-style: dotted;*/
    
                /*border-right- 10px;*/
                /*border-right-color: greenyellow;*/
                /*border-right-style: solid;*/
    
                /*border-top- 15px;*/
                /*border-top-color: deeppink;*/
                /*border-top-style: dashed;*/
    
                /*border-bottom- 10px;*/
                /*border-bottom-color: tomato;*/
                /*border-bottom-style: solid;*/
                border: 3px solid red;  /*三者位置可以随意写*/
    
            }
            #d1 {
                background-color: greenyellow;
                height: 400px;
                 400px;
                border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
            }
        </style>
    </head>
    <body>
        <p>穷人  被diss到了  哭泣.png</p>
    <div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
    <div id="d1"></div>
    </body>
    </html>
    

    display属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /*#d1 {*/
            /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
            /*    display: inline;  !*将标签设置为行内标签的特点*!*/
            /*}*/
            /*#d2 {*/
            /*    display: inline;*/
            /*}*/
            /*#d1 {*/
            /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
            /*}*/
            /*#d2 {*/
            /*    display: block;*/
            /*}*/
            /*#d1 {*/
            /*    display: inline-block;*/
            /*}*/
            /*#d2 {*/
            /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
            /*}*/
        </style>
    </head>
    <body>
    <div style="display: none">div1</div>
    <div>div2</div>
    <div style="visibility: hidden">单纯的隐藏 位置还在</div>  
    <div>div4</div>
    <!--<div id="d1" style="height: 100px; 100px;background-color: red">01</div>-->
    <!--<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>-->
    <!--<span id="d1" style="height: 100px; 100px;background-color: red">span</span>-->
    <!--<span id="d2" style="height: 100px; 100px;background-color: greenyellow">span</span>-->
    
    <!--<div id="d1" style="height: 100px; 100px;background-color: red">01</div>-->
    <!--<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>-->
    </body>
    </html>
    

    盒子模型

    """
    盒子模型
    	就以快递盒为例
    		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
    		盒子的厚度(标签的边框 border)
    		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
    		物体的大小(内容 content)
    	
    	
    	如果你想要调整标签与标签之间的距离 你就可以调整margin
    	
    	浏览器会自带8px的margin,一般情况下我们在写页面的时候,上来就会先将body的margin去除
    	
    """
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;  /*上下左右全是0
                /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
                /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
                /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
            }
            /*p {*/
            /*    margin-left: 0;*/
            /*    margin-top: 0;*/
            /*    margin-right: 0;*/
            /*    margin-bottom: 0;*/
            /*}*/
    
            #d1 {
                margin-bottom: 50px;
            }
    
    
            #d2 {
                margin-top: 20px;  /*不叠加 只取大的*/
            }
    
            #dd {
                margin: 0 auto;  /*只能做到标签的水平居中*/
            }
            p {
                border: 3px solid red;
                /*padding-left: 10px;*/
                /*padding-top: 20px;*/
                /*padding-right: 20px;*/
                /*padding-bottom: 50px;*/
    
                /*padding: 10px;*/
                /*padding: 10px 20px;*/
                /*padding: 10px 20px 30px;*/
                /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
            }
        </style>
    </head>
    <body>
    <!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
    <!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
    <!--<div style="border: 3px solid red;height: 400px; 400px">-->
    <!--    <div id='dd' style="border: 1px solid orange;height: 50px; 50px;background-color: blue;"></div>-->
    <!--</div>-->
    
    <p>ppp</p>
    
    </body>
    </html>
    

    浮动

    """浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
    只要是设计到页面的布局一般都是用浮动来提前规划好
    <style>
            body {
                margin: 0;
            }
            #d1 {
                height: 200px;
                 200px;
                background-color: red;
                float: left;  /*浮动  浮到空中往左飘*/
            }
            #d2 {
                height: 200px;
                 200px;
                background-color: greenyellow;
                float: right;   /*浮动 浮到空中往右飘*/
            }
    </style>
    
  • 相关阅读:
    Atitit. 真正的全中国文字attilax易语言的特点以及范例
    Atitit.nosql api 标准化 以及nosql数据库的实现模型分类差异
    Google&quot;员工&quot;曝内幕:Google员工的17个秘密
    WINDOWS 乱码解决
    计算机软件开发文档编写指南
    概要设计阶段概要设计说明书
    关于管理的经典故事(员工激励)
    概要设计阶段组装测试计划
    一个还不太老的程序员的体会
    程序员四大忌 你该如何避免呢?
  • 原文地址:https://www.cnblogs.com/dingbei/p/12884928.html
Copyright © 2011-2022 走看看