CSS二之调节样式

CSS二之调节样式

一、补充

  • 选择器优先级补充
  • mycss1.css
/*p {*/
/*    color: green;*/
/*}*/

#d1 {
    color: red;
}
  • 选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <style>-->
<!--        p {-->
<!--            color: red;-->
<!--        }-->

<!--    </style>-->
<!--    <link rel="stylesheet" href="mycss1.css">-->

    <style>
        /*.c1 {*/
        /*    color: blue;*/
        /*}*/
        /*p {*/
        /*    color: deeppink;*/
        /*}*/
        #d1 {
            color: red;
        }
    </style>
</head>
<body>
<!--<p style="color: aqua">今天周五啦 马上要放假啦 好开心啊</p>-->
<p id="d1" class="c1" style="color: yellow">今天周五啦 马上要放假啦 好开心啊</p>
<!--1、选择器相同 引入方式不同 就近原则-->
<!--2、选择器不同 引入方式相同-->
</body>
</html>

二、CSS调解样式

  • 宽和高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 400px;
        }
        span {
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
<div style="color: deeppink">
    效率第一
</div>
<span style="color: darkorange">
    坚持就是胜利
</span>
</body>
</html>

  • 字体属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-family: "Microsoft New Tai Lue", monospace;
            font-size: 48px;
            font-weight: lighter;/字重/
            /*color: yellow;*/
            /*color: #ffffff;*/
            /*color: rgb(255,103,0);*/
            color: rgba(255,100,0,0.4);/*多了个透明度*/
        }
    </style>
</head>
<body>
<p>床上明月光...地上鞋俩双...啊床受不了</p>
</body>
</html>

  • 文字属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*text-align: justify; !*两端对齐*!*/
            /*text-decoration: underline; !*文本装饰下划线*!*/
            /*text-decoration: line-through; !*定义穿过文本下的一条线。*!*/
            text-decoration: overline;/*定义文本上的一条线。*/
            font-size: 16px; /*字体大小*/
            text-indent: 32px; /*首行缩进2个字符*/
        }
        a {
            text-decoration: none;/*默认。定义标准的文本*/
            color: yellow;
        }
    </style>
</head>
<body>
<p>加油 努力 奋斗</p>
<a href="http://www.mzitu.com">点我哦有你好看</a>
</body>
</html>

  • 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    background-color: black;*/
        /*    color: white;*/
        /*}*/
        .c1 {
            width: 1000px;
            height: 1000px;
            /*background-color: red;*/
            /*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 style="font-size: 32px" class="c1">啊亚峰真的好帅啊</div>
</body>
</html>

  • 图片背景应用案列之图片背景固定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            background-image: url("111.png");
            background-attachment: fixed;/*将图片固定在背景中*/
        }
    </style>
</head>
<body>
<div style="height: 800px;background-color: red"></div>
<div style="height: 800px;background-color: grey"></div>
<div style="height: 800px" id="d1"></div>
<div style="height: 800px;background-color: yellow"></div>

</body>
</html>

  • 边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*border: dotted;!*点的造型*!*/
            /*border-color: red;!*边框颜色*!*!*/
            /*border-width: 10px;!*边框粗细*!*/
            /*border-left: solid;!*实的*!*/
            /*border-right: dashed;!*矩形虚线边框*!*/
            /*border-top: dotted;*/
            /*border-bottom: solid;*/
            /*border-left-color: deeppink;*/
            /*!*边框有四边 每一边都可以设置独有的样式 颜色 粗细*!*/

            /*简写*/
            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 style="font-size: 32px; color: orange">
    啊今天出太阳了啊，好开心啊
</p>
<div style="font-size: 32px; color: green">加油啊，坚持坚持再坚持</div>
<span style="font-size: 32px; color: blue">每天都要被自己帅醒好烦啊</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-image: url("111.png");
            background-repeat: no-repeat;
            background-position: 100%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

  • display属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 50px;width: 50px;background-color: red;display: inline">
        啊大家好啊
    </div>
    <div style="height: 50px;width: 50px;background-color: green;display: inline">
        我爱家人，我爱祖国
    </div>
    <span style="background-color: red;height: 100px;width: 100px;display: inline-block">我是span</span>
    <span style="background-color: green;height: 100px;width: 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>

  • 盒子模型
  • 理论知识
盒子模型
    快递盒
    快递盒与快递盒之间的距离            标签与标签之间的距离          外边距(margin)
    快递盒盒子的厚度                    标签的边框                       边框(border)
    快递盒里面的物体到里面盒子的距离    标签内部文本内容到边框的距离  内边距/内填充(padding)
    快递盒内容的物体大小                标签内部的文本内容              内容(content)
  • 代码
<!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;!*距离下面50,若俩个都有以大的为主*!*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            margin: 20px 40px 60px 80px;  /*上  右 下 左  顺时针*/
            /*margin: 0 auto;  !*水平居中*!*/
        }
        .c2 {
            margin-top: 20px;/*距离上面20*/
            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>
    <div class="c2" id="d2"></div>

<p>中国我爱你</p>
<p>中国我爱你</p>
<p>中国我爱你</p>
<p>中国我爱你</p>
<p>中国我爱你</p>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</div>
</body>
</html>

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

浮动的缺陷
    浮动会造成父标签塌陷的问题

clear属性
    专门用来清除浮动所带来的负面影响 父标签塌陷的问题

清除浮动带来的影响 你只需要记住一个结论
    在写页面之前  先定义好清除浮动的css代码
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    结论:谁塌陷了 就给谁加上clearfix样式类

浏览器默认是优先展示文本内容的

  • 演示
<!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;
            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>
        .left-menu {
            background-color: #4e4e4e;
            width: 20%;
            height: 1000px;
            float: left;
        }
        .right-menu {
            background-color: wheat;
            width: 80%;
            height: 2000px;
            float: right;
        }
    </style>
</head>
<body>
<div class="left-menu"></div>
<div class="right-menu"></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;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;/*解决浮点带来的影响*/
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">/*想解决哪里浮点带来的影响就在后面加上class="clearfix"*/
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3">希望香港早日恢复秩序</div>
</div>
</body>
</html>

  • 溢出属性
<!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; !*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*!*/
            overflow: scroll; /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
            /*overflow: hidden; !*内容会被修剪，并且其余内容是不可见的。*!*/
            /*overflow: visible ; !*默认值。内容不会被修剪，会呈现在元素框之外*!*/
        }
    </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: 300px;
            width: 300px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
        }
        img {
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
</body>
</html>

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

    相对定位  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-color: 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-index
    控制z轴的距离

透明度
    optacity既可以该颜色也可以改文本
    rgba只能该颜色

  • 演示
<!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;
            opacity: 0.4;/*透明度*/
        }
        .form {
            background-color: white;
            height: 200px;
            width: 100px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="model"></div>
<div class="form"></div>
</body>
</html>

  • 透明度
    optacity既可以该颜色也可以改文本
    rgba只能该颜色
  • 演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: rgba(128,128,128);
        }
        .c2 {
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="c1">哇塞透明了啊</div>
<div class="c2">哇塞透明了啊</div>
</body>
</html>

原文地址：https://www.cnblogs.com/yafeng666/p/12109728.html

时间： 2024-10-13 19:02:26

CSS二之调节样式的相关文章

CSS的内联样式和外链样式简单介绍

CSS的内联样式和外链样式简单介绍:关于标题中的概念可能很多朋友根本就有在意过,或者没有特别的注意,但并不说明他们就没有使用对应的方式设置样式,但是能够明白各自的代表那种方式总比不明白的好,下面就介绍一下它们各自的概念.一.内联样式:所谓的内联样式就是直接写在标签内部的样式,代码如下: <div style="color:red">蚂蚁部落</div> 以上代码可以将字体颜色设置为红色.二.外链样式表:外链样式表就是通过在网页头部利用link标签引用一个单独的c

CSS控制print打印样式

来源:http://blog.csdn.net/pangni/article/details/6224533 一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />   用于打印的css:<link rel="stylesheet&

CSS重置标签默认样式

CSS重置标签默认样式:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在默认情况下,很多标签都有自带的属性,例如body自带有margin.ul有自带的padding.h1-h6的字体大小各部相同.li前面带有的小圆圈等等.这些自带的默认属性会给实际的布局中带来不少的麻烦,我们可以再样式表的开始就重置这些默认的属性.实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

CSS ul（列表样式）

CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点.小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记. 二.不同的列表项标记 list-style-type属性指定列表项标记的类型是: ul.a {list-style-type: circle;} /*无序,空心

CSS(2)---css字体、文本样式属性

css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size).字体粗细(font-weight).字体风格(font-style).字体颜色(color). 1.字体设置(font-family) 网页中常用的字体有 宋体.微软雅黑.黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码: p { font-family:"微软雅

前端学习(9)~css学习(三)：样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

.css()与.addClass()设置样式的区别

对于样式的设置,addClass与css方法两者之间有什么区别? 可维护性: .addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类.css方法是通过JavaScript大量代码进行改变元素的样式 通过.addClass()我们可以批量的给相同的元素设置统一规则,变动起来比较方便,可以统一修改删除.如果通过.css()方法就需要指定每一个元素是一一的修改,日后维护也要一一的修改,比较麻烦 灵活性: 通过.css()方式可以很容易动态的去改变一个样式的属性,不需要在

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的

css中的列表样式

在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表样式主要是对列表项目前列表符号的设置,其语法如下: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian