zoukankan      html  css  js  c++  java
  • css-属性、样式调节

    CSS-属性、样式调节

    选择器优先级

    1. 选择器相同,遵循就近原则;

    2. 选择器不同

      行内–>id选择器–>类选择器–>标签选择器

    除此之外还可以通过添加 !importrant方式来强制让样式生效,但并不推荐使用,因为使用过多会导致样式文件混乱不堪,不宜维护.

    语法举例:.c1 { color: blue !important;}

    在这里插入图片描述

    宽和高

    宽和高.只能给块儿级标签设置;行内标签是无法设置宽高的.

    heigth:高

    在这里插入图片描述

    字体属性

    调节文本颜色两种方式

    1. color: yellow;#颜色
         	color: #ffffff;#颜色
         	color: rgb(255,103,0);#颜色深浅
         	color: rgba(255,103,0,0.4);#颜色深浅
      
    2.     font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;#字体类型
          font-size: 16px;	#字体型号
          font-weight: bold;	#字体粗细
          color: rgba(255,103,0,0.4);	#颜色深浅
      

    在这里插入图片描述

    文字属性

            p {
                text-align: justify;#对其方式
                text-decoration: underline;#下划线在文字下方
                text-decoration: overline;#下划线在文字上方
                text-decoration: line-through;#下划线穿过文字
                font-size: 16px;#文字大小
                text-indent: 32px;#首行缩进大小
            }
        
    
    
                a {
                text-decoration: none;#控制下划线方式
                color: yellow;#字体颜色
            }
    

    背景属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: black;#背景色
                color: white;#标签的字体色
            }
            .c1 {
                width: 400px;#宽
                height: 400px;#高
                /*background-color: gray;*/#背景色
                /*background-image: url("111.png");*/背景图片
                /*background-repeat: no-repeat; #不平铺(平铺的话会铺满整个规定的背景)
                /*!*background-repeat: repeat-x;  *!*/#	X轴平铺
                /*!*background-repeat: repeat-y;*!*/#	Y轴平铺
                /*background-position: 100px 10px; !*# 平铺调节;第一个调节左右  第二个调节上下
    
    
                #平铺支持简写;分别是:左右,上下,图片色,不平铺
                background: center center url("111.png") yellow  no-repeat ;
    
            }
        </style>
    </head>
    <body>
    <!--<div>-->
    <!--    大空间的凯撒件打开-->
    <!--</div>-->
    <div class="c1"></div>
    </body>
    </html>
    

    背景图片和应用案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1 {
                background-image:#背景图片 url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
                background-attachment: fixed;#背景--固定
            }
        </style>
    </head>
    <body>
    <div style="height: 500px;background-color: red"></div>
    <div style="height: 500px;background-color: gray"></div>
    <div style="height: 500px" id="d1"></div>
    <div style="height: 500px;background-color: yellow"></div>
    
    </body>
    </html>
    

    边框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p {
                /*border-style: dotted;  !*样式*!*/
                /*border-color: red;  !*边框颜色*!*/
                /*border-width: 10px;  !*边框粗细*!*/
                /*border-left: solid;*/
                /*border-right: dashed;*/
                /*border-top: dotted;*/
                /*border-bottom: solid;*/
                /*border-left-color: deeppink;*/
                /*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/
    
                #上面P标签边框的简写
                border: solid 3px red;  /*只要把参数写进去就可以  不需要考虑顺序*/
            }
            div {
                height: 500px;
                width: 500px;
                border: 3px solid red;
            }
            span {
                height: 200px;
                width: 200px;
                border: 5px solid green;
            }
        </style>
    </head>
    <body>
    <p>
        看的撒科技大厦考虑到金卡圣诞节快乐撒娇
    </p>
    
    <div>sakljdkasd</div>
    <span>hdsakljdklsad</span>
    
    </body>
    </html>
    

    画圆

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                height: 200px;
                width: 200px;
                border-radius: 50%;#基于上面的框,圆的占比
                background-color: red;#圆背景色
                background-image: url("111.png");#图片
                background-repeat: no-repeat;#不平铺
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    display属性

    display:显示

    inline:排队

    inline-block:内联块

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div style="height: 50px; 50px;background-color: red;display: inline">哟哟哟
    </div>
    
    <div style="height: 50px; 50px;background-color: green;display: inline">啊啊啊
    </div>
    
    <span style="background-color: red;height: 100px; 100px;display: inline-block">span</span>
    
    <span style="background-color: green;height: 100px; 100px;display: inline-block">span</span>
    
    <!--inline-block能够让一个标签即有块儿级标签可以设置长宽的特点 又有行内标签在一行展示的特点-->
    
    <div>div1</div>
    
    <!--<div style="display: none">div2</div>-->
    
    <div style="visibility:hidden">div2</div>
    
    <div>div3</div>
    
    <!--display: none隐藏标签 并且标签所占的位置也要让出来-->
    </body>
    </html>
    

    盒子模型

    1. 外边框margin
    2. 边框border
    3. 内边距/内填充padding
    4. 内容content
    快递盒
    快递盒与快递盒之间的距离---标签与标签之间的距离---外边距(margin)
    快递盒盒子的厚度---标签的边框---边框(border)
    快递盒里面的物体到里面盒子的距离---标签内部文本内容到边框的距离---内边距/内填充(padding)
    快递盒内容的物体大小---标签内部的文本内容          
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;  #/*取消body标签自带的8px的外边距*/
            }
            /*div {*/
            /*    border: 5px solid red;*/
            /*}*/
            .c1 {
                height: 100px;
                width: 100px;
                background-color: red;
                /*margin-bottom: 50px;*/
                /*margin-left: 100px;*/
                /*margin: 20px;  #上下左右
                /*margin: 20px 40px;  #第一个是上下   第二个是左右
                /*margin: 20px 40px 60px;  #上   左右   下
                /*margin: 20px 40px 60px 80px;  #上  右 下 左  顺时针
                /*margin: 0 auto;  #水平居中
    
    
            }
            .c2 {
                margin-top: 20px;
                height: 100px;
                width: 100px;
                background-color: green;
            }
            .c3 {
                border: 3px solid black;
                height: 400px;
                width: 400px;
                /*padding-top: 20px;*/
                /*padding-left: 40px;*/
                /*padding: 20px;*/
                padding: 20px  40px;
                /*padding: 20px;*/
                /*padding: 20px;*/
                /*padding跟margin简写规律一致*/
    
            }
            p {
                margin: 0;
            }
            ul {
                padding-left: 0;
            }
        </style>
    
    </head>
    <body>
    <!--<div>啥都卡死的十大科技打卡</div>-->
    <!--<div class="c3">-->
    <!--   <div class="c1" id="d1"></div>-->
    <!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
    <!--</div>-->
    
    
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    <p>文字</p>
    
    
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    
    </body>
    </html>
    

    浮动

    浮动的元素是脱离正常文档流的 自身多大就会占多大 不再有独占一行的概念(浮动多用于页面的前期布局(!!!))

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;#取消外边框默认的8
            }
            .c1 {
                height: 100px;
                width: 100px;
                background-color: red;
                float: left;#左边浮动
            }
            .c2 {
                height: 100px;
                width: 100px;
                background-color: green;
                float: right;#右边浮动
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    </body>
    </html>
    

    浮动的缺陷

    浮动会造成父标签塌陷的问题(里面没有元素会塌陷)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;
            }
            #d1 {
                border: 3px solid black;
    
            }
            .c1 {
                height: 100px;
                width: 100px;
                background-color: red;
                float: left;
            }
            .c2 {
                height: 100px;
                width: 100px;
                background-color: green;
                float: left;
            }
            .c3 {
                height: 150px;
                width: 100px;
                background-color: orange;
                /*float: left;*/
            }
            .clearfix:after {
                content: " ";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
    <div id="d1" class="clearfix">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3">
            sadkjajsdasjd
        </div>
    </div>
    </body>
    </html>
    

    解决方法:

    清除浮动带来的影响,只需要记住一个结论 ,在写页面之前 先定义好清除浮动的css代码 ;结论:谁塌陷了 就给谁加上clearfix样式类

    .clearfix:after {content: "";display: block;clear: both;} 
    

    #浏览器默认是优先展示文本内容的(即文本内容不被浮动在上方的页面所影响)

    溢出

    内容超过文本框,会出现下拉条,或者修改文本框大小

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1 {
                height: 50px;
                width: 50px;
                border: 1px solid black;#第一个参数边框大小,第二个边框色
                overflow: auto;#溢出自动调节
            }
        </style>
    </head>
    <body>
    <div class="c1">
        今天周五了 可惜明天不放假
        今天周五了 可惜明天不放假
        今天周五了 可惜明天不放假
        今天周五了 可惜明天不放假
        今天周五了 可惜明天不放假
        今天周五了 可惜明天不放假
        今天周五了 可惜明天不放假
    </div>
    </body>
    </html>
    

    圆形头像示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;
                background-color: antiquewhite;#背景色
            }
            .c1 {
                height: 100px;
                width: 100px;
                border-radius: 50%;#圆占比
                border: 1px solid white;#圆边框大小和圆背景色
                /*background-image: url("111.png");*/
                /*background-repeat: no-repeat;*/
                overflow: hidden;#溢出的元素自动隐藏
            }
            img {
                max-width: 100%;#图片在园内占比大小
            }
        </style>
    </head>
    <body>
    <div class="c1">
        <img src="111.png" alt="">
    </div>
    </body>
    </html>
    

    定位(position)

    所有的标签默认情况下都是静态的(static) 无法做位置的修改
    如果你想要修改标签位置 你需要先将静态改为可以修改的状态

    关键字语法:position:relative/absolute/fixed

    相对定位 relative

    ​ 相当于标签原有的位置做偏移
    ​ 了解即可

    绝对定位 absolute

    ​ 相当于已经定位过的(static>>>relative)父标签做偏移
    ​ eg:
    ​ 小米购物车

    固定定位 fixed

    ​ 相当于浏览器窗口固定在某个位置始终不变
    ​ eg:
    ​ 回到顶部

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin: 0;
            }
            .c1 {
                height: 100px;
                width: 100px;
                background-color: red;
                /*position: static;  #!*默认值*!*/
                position: relative;  #/*相对定位*/
                left: 100px;
                top: 100px;
            }
            .c2 {
                height: 50px;
                width: 100px;
                background: green;
                position: relative;#相对定位
            }
            .c3 {
                position: absolute;#绝对定位
                height: 200px;
                width: 200px;
                background-color: orange;
                left: 100px;
                top: 50px;
            }
            .cc {
                height: 50px;
                width: 100px;
                background-color: #4e4e4e;
                color: white;
                position: fixed;#固定浮动
                bottom: 20px;#浮动框高度
                right: 20px;#浮动框右间距
            }
        </style>
    </head>
    <body>
    <!--<div class="c1"></div>-->
    <!--<div class="c2">-->
    <!--    <div class="c3">空空的 什么都没有...</div>-->
    <!--</div>-->
    <div style="height: 1000px;background-color: red"></div>
    <div style="height: 1000px;background-color: green"></div>
    <div style="height: 1000px;background-color: orange"></div>
    <div class="cc">回到顶部</div>
    </body>
    </html>
    

    是否脱离文档流

    哪些状态是脱离正常文档流的

    ​ 验证这个标签原来所占用的位置还在不在
    ​ 浮动
    ​ 定位

    不脱离

    ​ 相对定位

    脱离

    ​ 脱离文档流
    ​ 绝对定位
    ​ 固定定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1 {
                background-color: red;
                height: 50px;
                width: 50px;
                position: relative;#相对定位 不脱离
            }
            .c2 {
                background-color: green;
                height: 50px;
                width: 50px;
                /*position: absolute;*/#脱离
                position: fixed;#脱离
                bottom: 20px;
                right: 20px;
            }
            .c3 {
                background-color: orange;
                height: 50px;
                width: 50px;
            }
        </style>
    </head>
    <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    </body>
    </html>
    

    z-index模拟

    控制z轴的距离(类似弹出的登录小框)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .modal {
                background-color: #808080;
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: 999;#Y轴小于下面的页面,所以显示在下面的页面下面
                opacity: 0.4;
            }
            .form {
                background-color: white;
                height: 200px;
                width: 100px;
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 1000;#Y轴
                margin-top: -100px;
                margin-left: -50px;
            }
        </style>
    </head>
    <body>
    <div>我是最底下的那个</div>
    <div class="modal"></div>
    <div class="form"></div>
    </body>
    </html>
    

    透明度

    透明度:

    1. optacity既可以该颜色也可以改文本
    2. rgba只能改该颜色
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1 {
                background-color: rgba(128,128,128,0.4);
            }#只能改该颜色
            .c2 {
                background-color: rgb(128,128,128);#既可以改颜色也可以改文本颜色  
                opacity: 0.4;
            }
        </style>
    </head>
    <body>
    <div class="c1">阿萨德撒大家都</div>
    <div class="c2">阿萨德撒大家都</div>
    </body>
    </html>
    
    我把月亮戳到天上 天就是我的 我把脚踩入地里 地就是我的 我亲吻你 你就是我的
  • 相关阅读:
    treeview十八般武艺,js选择和绑定权限树
    开源WebOS
    公交车路线查询系统后台数据库设计
    网页信息抓取
    一步一步打造WebIM(3)——性能测试
    WebBrowser介绍——Javascript与C++互操作
    .NET文档生成工具ADB[更新至2.3]
    一步一步打造WebIM(4)——Comet的特殊之处
    在SQL Server中对视图进行增删改
    开源企业即时通讯和在线客服
  • 原文地址:https://www.cnblogs.com/zhulipeng-1998/p/12863888.html
Copyright © 2011-2022 走看看