Java复习打卡day32

CSS常见的属性

CSS的常见属性

1.尺寸与单位
    尺寸：
        %：百分比
        in：英寸
        cm：厘米
        mm：毫米
        em：和当前字体大小相等的尺寸，就是相当于一个字，比如一个字的大小为12pt ,那么，1em代表12pt；
            2em代表24pt。
        ex：一px相当于一个字体的x-height（一个x-height相当于一个字体尺寸的一半）
        pt：磅（1pt等于72英寸）
        pc：十二点活字（一个pc相当于计算机上的12个点）
        px：像素（计算机上的一个点）

    颜色：
        颜色名：直接写需要的颜色名，如：red表示红色。
        rgb（x,y,z）：RGB数值，如：rgb（255，0， 0）表示红色。这些数值都是0-255之间的
        rgb（x%,y%,z%）：RGB 百分比，如：rgb（100%，0%，0%）表示红色
        #rrggbb：十六进制表示颜色，如：#ff0000表示红色
    颜色属性：
        a.HSL颜色：通过对色调（H），饱和度（S），亮度（L）的设置实现对图片的颜色的设置；
            background-color:hsl:(240,20%，20%)；color:white;
        b.HSLA颜色：在上面的基础上加上了透明度（A）的设置；
            background-color:hsl:(240,20%，20%, 0.2)；
        c.RGB颜色设置：红（R），绿（G），蓝（B）三个颜色的通道的变化，实现对颜色的设置；
            background-color:rgb(244, 255, 255);
        d.RGBA颜色设置：在上面的基础上加上了透明度的设置（A）；
            background-color:rgba(244, 255, 255, 0.2);
        e.图像的透明度设置：img.opacity{opacity:0.2;}
            兼容IE8 filter:alpha(opacity=100);

2.字体属性
    font：简写
    font-size：字体的大小
    font-family：字体的类型，形如：宋体
    font-style：normal：正常，italic：斜体(选择字体中的斜体字展示)，oblique：字体倾斜（人为的是字体倾斜， 就是即便是没有斜体字体的文本也可以实现斜体）
    font-weight：字体加粗：bold
    font-variant：small-caps 小型的大写字母字体
    font-strench：[了解]字体的拉升是相对于浏览器显示的字体的正常尺寸（大部分浏览器不支持）

    下面向大家介绍几种常用的字体
    宋体、新宋体、黑体、楷体_GB2312、微软雅黑、幼园、隶书、华文细黑、细明体、新细明体、

3.文本属性
    text-indent：首行缩进 text-indent：2em;首行缩进两个字
    text-overflow：文本的溢出是否使用省略标记（...）clip|ellipsis
    text-align:文本的位置 left center right
    text-transform：文本的大小写 capitalize（文本的首字母大写）uppercase（全部大写） lowercase（全部小写）（除了这三个赋值，还有none，full-width 赋值，但是这两种的用处非常小，在此就不和大家介绍了）
    text-decoration:文本画线 none，underline下划线，line-through：贯穿线。
    text-decoration-line:[了解] 文本装饰线条的位置[部分内容有些浏览器不支持]

    text-shadow：文本是否有阴影，是否有模糊
    vertical-align：垂直对齐方式
    direction：文本流向 rtl 或者 ltr

    whitespace：nowrap（强制在同一行内显示所有文本）

    letter-spacing：字间距
    word-spacing：单词之间的间距
    line-height：行高（基线和基线的距离）
    color：字体颜色

4.背景属性
    background
    background-color：
    background-image：
    background-repeat：
    background-position：
    background-attachment：图像是否固定
        scroll（默认值）背景会随着图像的滑动而滑动。。
        fixed：背景固定。
    background-origin：content-box
    background-clip：padding-box
    background-size：50px


5.边框
    盒子模型（见陈述下面的图片）

    border：
    border-color：
    border-style：solid实线 dashed虚线 dotted点状线
    border-width：
    border-left-color；
    border-left-style：
    border-left-width：
    ....

    CSS3增加的样式
    border-radius 圆角设置
    box-shadow：设置对象的阴影


6.内补白（内补丁）
    padding：检索或设置对象四边的内部边距 如：padding：50px；
    padding-top：检索或设置对象的顶部内部边距
    padding-right：检索或设置对象的右边内部边距
    padding-bottom：检索或设置对象的底部内部边距
    padding-left：检索或设置对象的左边内部边距

7.外补白（外补丁）
    margin：检索或设置对象四边的外缘边距 如：margin：10px
    margin-top：检索或设置对象顶部的外缘边距
    margin-right：检索或设置对象右边的外缘边距
    margin-bottom：检索或设置对象底部的外缘边距
    margin-left：检索或设置对象左边的外缘边距


8.定位Position
    position：定位方式：absolute（绝对定位） fixed（固定的）（relative 相对于背景位置不变）
    z-index：层叠顺序，值越大，越往上面。
    top：检索或设置有其最近的父类的顶部属性
    right：检索或设置有其最近的父类的右边属性
    bottom：检索或设置有其最近的父类的底部属性
    left：检索或设置有其最近的父类的左边属性
9.Layout布局
    display：是否及如何显示，none：隐藏；block：块状显示
    float：对象是否以及如何浮动， none：不浮动|left：靠左浮动|right：靠右浮动
    clear：清除浮动 none|left|right|both
    visibility：设置或检索是否显示对象，visible|collapse|hidden，和display不同， 此属性为隐藏其属性，但保留其物理区域
    clip：检索和设置对象的可是区域，区域外的部分是透明的 clip(上-右-下-左)
            clip(auto, 50px, 20px, auto) 上和左都是自动的不做处理， 右下分别是50， 20
    overflow：超出隐藏：hidden，不剪切内容：visible
    overflow-x:内容超过指定宽度时如何处理 visible|hidden|auto|scroll
    overflow-y:内容超过指定高度时如何处理

10.弹性盒子模型
    旧版：
        box-orient：设置或检索盒模型对象的子元素的排列方式horizonal（水平排列） |vertical（纵向排列）
        box-pack:设置或检索盒子模型对象的子元素的对齐方式
        box-align:设置或检索盒子模型对象的子元素的对齐方式
        box-flex:设置或检索盒子模型对象的子元素如何分配器剩余组
        box-flex-group:设置或检索盒子模型对象的子元素的所属组
        box-ordinal-group:设置或检索盒子模型对象的子元素的显示顺序
        box-direction:设置或检索盒子模型对象的子元素排列顺序是否反转
        box-lines:设置或检索盒子模型对象的子元素是否可以显示换行

    新版：
        1.Flex是‘Flexible Box’ 的缩写，用来为弹性盒子模型提供最大的弹性。
        2.任何一个容器都可以定义为弹性盒子
        .box{
            display:flex;
        }
        3.行内元素也可以定义为弹性盒子
        .box{
            display:inline-flex;
        }
        一、基本概念：
            1.采用flex布局的元素被称为“flex 容器” 简称容器。
            2.它的所有子元素自动成为flex 成员，被称为flex项目，简称“项目”
        
            容器默认存在两根轴，主轴（mian axis）和交叉轴（cross axis）
            主轴的开始位置叫做main start ,结束位置叫做main end
            交叉轴的开始位置叫做cross start ,结束位置叫做cross end
            项目默认沿着主轴排列，单个项目占据的主轴空间叫做main size ,
        单个项目占据的交叉轴空间叫做cross size .
        二、容器的六个属性
            flex-direction:主轴的方向
                值：row从左向右|row-reverse从右向左|column从上向下|column-reverse从下向上
            flex-wrap:一条条轴线按照直线排下来，如何换行？
                值：nowrap不换行|wrap向下换行|warp-reverse向上换行
            flex-flow:属性是flex-direction 和flex-wrap 的合体，默认的属性值是raw nowrap
            justify-content:主轴的对齐方式
                值：flex-start左对齐|flex-end右对齐|center 中心对齐
                space-between项目分别靠左和靠右对齐
                space-around项目之间的间隔比项目和边框治之间的间隔大一倍
            align-items:交叉轴如何对齐
                值：flex-start|flex-end|center|baseline|stretch相关的个属性的意思我将通过代码向大家展示
            align-content:多根轴线的对齐方式
                值：flex-start|felx-end|center|space-between|space-around|stretch

        三、项目上的属性
            order:项目的排列顺序
            flex-grow:定义项目的放大比例，默认为0
            flex-shrink:定义项目的缩小比例，默认为1，即如果该空间不足，将该项目缩小
            flex-basis:定义了在分派多余空间之前，项目占据的主轴空间（main size）
            flex:是flex-grow,flex-shrink,flex-basis的缩写，默认值为（0， 1， auto）后两个属性可选
            align-self:属性允许项目有不同于其他项目的对齐方式，可覆盖align-items。

下面是笔者写的一些代码，写的不是太好，请大家取其精华，去其糟粕，加油！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{color: royalblue;}
        h1{color: rgb(50%, 20%, 34%);}
        /* div.bb{color:saddlebrown} */
        div.bb{color: rgba(255,255, 255,0.1);}
        div.bb{
            background-color: rgb(50%, 20%, 34%);
        }
        .pp2,.pp1{
            text-indent: 2em;
        }
        .pp{
            text-indent: 2em;
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-variant: small-caps; */
        }
        .pp1,.pp2{
            font-style: italic;
        }
        .pp1,.pp2{
            font-style: oblique;
        }
        .pp1,.pp2{
            font-style: normal;
            font-stretch: ultra-expanded;
        }
        /*理论上,是比一般的字体宽4个基数，其他的在下不再赘述，（注意：大部分的浏览器都不支持这个属性）*/
        .pp1,.pp2{
            font-family: Arial,Georgia,helvetica, verdana;
            /* 上面的代码表明在现实网页的时候优先显示Arial字体，但是当你的机器上没有Arail字体，但是有Georgia字体的时候，就会显示Georgia字体*/
        }
        .div{
            font-size: large;
            border-width: 10px;
            /*字体的大小有很多的等级，虽然多但是好理解，在此不做列举。顺便说一句，font-size的默认值为Medium.*/
        }
        .pp1{
            font-weight: bold;
            /*font-weight的默认值为400 ，而bold的加粗程度相当于是700*/
        }
        .pp2{
            font-weight: bolder;
            /*比上面的文本稍加粗*/
        }
        .pp1{
            text-overflow: clip;
        }
        div{
            text-align: right;
            text-transform: capitalize;
            /* text-decoration-line:underline; */
        }
        .xx li:nth-child(1){
            text-decoration-line:none;
        }
        .xx li:nth-child(2){
            text-decoration-line:overline;
        }
        .xx li:nth-child(3){
            -webkit-text-decoration-line:underline;
            -moz-text-decoration-line:underline;
            text-decoration-line:underline;
            
        }
        .xx:nth-child(3){
            -webkit-text-decoration-color:rgb(11, 233, 85);
            -moz-text-decoration-color: rgb(11, 233, 85);
            text-decoration-color: rgb(11, 233, 85);
        }
        .xx li:nth-child(4){
            text-decoration-line:line-through;
        }
        .xx li:nth-child(5){
            text-decoration-line:blink;
            /*很多的浏览器都是不支持这个属性的*/
        }
       .xx li{
           text-decoration-line: line-through;
       }
       .xx li{
           text-decoration-color: red;
       }
       
    </style>
</head>
<body>
    <h1>CSS常见的属性</h1>
    <ul>
        <div class="aa0 bb">CSS常见的属性</div>
        <div class="aa1 bb">CSS常见的属性</div>
        <div class="aa2 bb">CSS常见的属性</div>
        <div class="aa3 bb">CSS常见的属性</div>
        <div class="aa4 bb">CSS常见的属性</div>
        <div class="aa5 bb">CSS常见的属性</div>
        <div class="aa6 bb">CSS常见的属性</div>
        <div class="aa7 bb">CSS常见的属性</div>
    </ul>
    <ul>
        <div class="aa"><p class="pp1">颜色：
            颜色名：直接写需要的颜色名，如：red表示红色。
            rgb（x,y,z）：RGB数值，如：rgb（255，0， 0）表示红色。这些数值都是0-255之间的
            rgb（x%,y%,z%）：RGB 百分比，如：rgb（100%，0%，0%）表示红色
            #rrggbb：十六进制表示颜色，如：#ff0000表示红色</p>
        <p class="pp2">颜色属性：
            a.HSL颜色：通过对色调（H），饱和度（S），亮度（L）的设置实现对图片的颜色的设置；
                background-color:hsl:(240,20%，20%)；color:white;
            b.HSLA颜色：在上面的基础上加上了透明度（A）的设置；
                background-color:hsl:(240,20%，20%, 0.2)；
            c.RGB颜色设置：红（R），绿（G），蓝（B）三个颜色的通道的变化，实现对颜色的设置；
                background-color:rgb(244, 255, 255);
            d.RGBA颜色设置：在上面的基础上加上了透明度的设置（A）；
                background-color:rgba(244, 255, 255, 0.2);
            e.图像的透明度设置：img.opacity{opacity:0.2;}
                兼容IE8 filter:alpha(opacity=100);</p></div>
    </ul>
    <ul>
        <li><h1>史上最好看的英文篇章</h1>
            <div>　<p class="pp">There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.</p>

                　　<p class="pp">May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.</p>
                
                　　<p class="pp">The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people</p>
                
                　　<p class="pp">who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.</p>
                
                　　<p class="pp">When you were born,you were crying and everyone around you was smiling.Live your life so that when you die,you're the one who is smiling and everyone around you is crying.</p>
                
                　　<p class="pp">Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on the opportunity to brighten someone’s day with this message.</p>
                
                </div>
        </li>
    </ul>
    <div class="xx">
        <li>没有文本装饰</li>
        <li>有下划线装饰</li>
        <li>有上划线装饰</li>
        <li>贯穿线装饰</li>
        <li>字体闪烁装饰</li>
    </div>
</body>
</html>