• Web前端-CSS


    ------------恢复内容开始------------

    CSS

    一.CSS的优势

    • 内容和表现分离
    • 网页结构表现统一,可以实现复用
    • 样式丰富
    • 建议使用独立于html的css文件
    • 利用SEO,容易被搜索引擎收录
    1 <!--导入CSS文件-->
    2 <link rel="stylesheet" href="style.css">

     二.三种导入方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--2.内部样式-->
        <style>
            h1{
            color:green;
            }
        </style>
        <!--3.外部样式-->
        <link rel="stylesheet" href="style.css">
    </head>
    <!--优先级:就近原则,那种样式离元素近就用那种-->
    <body>
    <!--1.行内样式:在标签元素中编写style属性,编写样式即可-->
    <h1 style="color:red">我是标题</h1>
    </body>
    </html>

     三.选择器

    作用:选择页面上的某一个或某一类元素

    一.基本选择器:

    • 标签选择器
    • 类选择器
    • id选择器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*标签选择器会选择到页面上的所有该标签的元素;格式:标签{}*/
            h1{
            color:green;
            }
            /*类选择器,可以复用;格式:.类名{}*/
            .stduy{
            color:yellow;
            }
            /*id选择器,id必须唯一,不可复用;格式:#id名{}*/
            #hh{
            color:red;
            }
        </style>
    </head>
    <!--优先级:不遵循就近原则,id选择器>类选择器>标签选择器-->
    <body>
    <h1 class="stduy">学习</h1>
    <h1 id="hh">学习</h1>
    <h1>学习</h1>
    </body>
    </html>

     二.层次选择器

    • 后代选择器:当前选中元素下层及下下层等的所有元素
    • 子选择器:当前选中元素下层的元素
    • 相邻兄弟选择器:当前选中元素相邻的元素(只有一个,下一个)
    • 通用兄弟选择器:当先选中元素的所有相邻元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*后代选择器*/
            body p{
            background:green;
            }
            /*子选择器*/
            body>p{
            background:red;
            }
            /*相邻兄弟选择器*/
            .active+p{
            background:yellow;
            }
            /*通用选择器*/
            .active~p{
            background:black;
            }
        </style>
    </head>
    <body>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li><p>p4</p></li>
        <li><p>p5</p></li>
        <li><p>p6</p></li>
    </ul>
    </body>
    </html>

     三.结构伪类选择器

    <style>
            /*伪类选择器*/
            /*ul的第一个子元素*/
            ul li:first-child{
            background:green;
            }
            /*ul的最后一个子元素*/
            ul li:last-child{
            background:red;
            }
    </style>

     四.属性选择器

    格式:标签[属性名]{};标签[属性名=属性值]{};属性值可用正则匹配;=表示绝对等于;*=表示包含;^=以什么开头;%¥=以什么结尾

    四.美化网页元素

    一.字体样式

    <!--font-family:字体
        font-size:字体大小
        font-weight:字体粗细
        color:字体颜色
    -->
        <style>
            body{
            font-family:楷体;
            font-size:50px;
            font-weight:bold;
            color:green;
            }
        </style>

     二.文本样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--color:颜色,可用单词,rgb,rgba;
        text-align:排版
        text-indent:首行缩进
        line-height:行高
        -->
        <style>
            h1{
            color:rgba(0,255,255,0.9);
            text-align:center
            }
            p{
            text-indent:2em;
            line-height:40px;
            }
            /*下划线*/
            .l1{
            text-decoration:underline;
            }
            /*中划线*/
            .l2{
            text-decoration:line-through;
            }
            /*上划线*/
            .l3{
            text-decoration:overline;
            }
            /*超链接去下划线*/
            a{
            text-decoration:none;
            }
        </style>
    </head>
    <body>
    <p class="l1">213</p>
    <p class="l2">213</p>
    <p class="l3">213</p>
    <h1>南山南</h1>
    <p>你在南方的艳阳里
        大雪纷飞
        我在北方的寒夜里
        四季如春
        如果天黑之前来得及
        我要忘了你的眼睛
        穷极一生
        做不完一场梦
        他不再和谁谈论相逢的孤岛
        因为心里早已荒无人烟
        他的心里再装不下一个家
    </p>
    <p> 做一个只对自己说谎的哑巴
        他说你任何为人称道的美丽
        不及他第一次遇见你
        时光苟延残喘
        无可奈何
        如果所有土地连在一起
        走上一生
        只为拥抱你
        喝醉了他的梦
        晚安
        你在南方的艳阳里大雪纷飞
        我在北方的寒夜里四季如春
        如果天黑之前来得及
        我要忘了你的眼睛
        穷极一生做不完一场梦
        大梦初醒 荒唐了一生
    </p>
    </body>
    </html>

     三.文本阴影和超链接伪类

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a{
            text-decoration:none;
            color:black;
            }
            /*鼠标悬停状态*/
            a:hover{
              color:green;
              font-size:100px;
            }
            /*鼠标按住未释放的状态*/
            a:active{
            color:yellow;
            }
            /*text-shadow:水平偏移,垂直偏移,阴影半径,阴影颜色*/
            #name{
              text-shadow:5px 5px 5px red;
            }
        </style>
    </head>
    <body>
    <a href="#"><img src="../images/ycy.jpg"></a>
    <p id="name"><a href="#">杨超越</a></p>
    <p><a href="#"> 超越妹妹</a></p>
    </body>
    </html>

     四.列表

    <!--list-style:none;去掉圆点
        list-style:circle; 空心圆
    -->
        <style>
            ul li{
            list-style:circle;
            }
        </style>

    五.背景

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1{
            width:1000px;
            height:1000px;
            border:1px solid red;
            background-image:url("../images/ycy.jpg");
            background-repeat:repeat-x;/*水平平铺*/
            background-repeat:repeat-y;/*垂直平铺*/
            background-repeat:no-repeat;/*不平铺*/
            background-position:100px 100px;/*定位*/
            }
        </style>
    </head>
    <body>
    <div class="div1"></div>
    </body>
    </html>

     渐变

    background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);

     五.盒子模型

    margin:外边距

    border:边框

    padding:内边距

    一.边框

    <!--border:粗细,样式:(solid实线,dashed虚线),颜色-->
    <style>
        #box{
        width:200px;
        border:1px dashed red;
    }
    </style>

     二.内外边距

    外边距居中:margin:0 auto;

    三.圆角边框

    <!--画圆:圆角=宽度的一半-->
    <style>
            div{
            width:100px;
            height:100px;
            border:10px solid red;
            border-radius:50px;
            }
     </style>

     阴影

    box-shadow:10px 10px 10px yellow;

     四.display和浮动

    <!--display:block块元素
        display:inline行内元素
        display:inline-block是块元素但是可以内联在一行
     -->
        <style>
            div{
            width:100px;
            height:100px;
            border:10px solid red;
            display:inline-block;
            }
             span{
            width:100px;
            height:100px;
            border:10px solid red;
            display:inline-block;
            }
        </style>

     float:left左浮动;float:right右浮动

    父级元素塌陷解决

    • 增加父级元素的高度
    • 增加一个空的div,清除浮动
    <div class="clear"></div>
    .clear{
            clear:both;
            margin:0;
            padding:0;
    }
    •  overflow:给父级元素增加overflow属性:overflow:hidden;
    • 给父类添加一个伪类
     #father:after{
        content:'';
        dispplay:block;
        clear:both;
        }

     display vs float

    • display:方向不可控制
    • float:父级元素会塌陷

    六.定位

    1).相对定位

     相对原来的位置进行指定的偏移,相对定位始终处在标准文档流中,原来的位置会被保留;

    position:relative;
    top:-20px;
    left:20px;
    right:20px;
    bottom:-10px;

     2).绝对定位

    基于XXX定位

    • 在没有父级元素定位的前提下,相对于浏览器定位
    • 若父级元素存在定位,则相对于父级元素定位

     绝对定位不在标准文档流中,原来的位置不会被保留

    #father{
            position:relative;
    }
    #second{
            border:1px solid green;
            background:red;
            position:absolute;
            right:30px;
    }

    3)固定定位

    position:fixed

    4)z-index和透明度

    z-index:1;层级,默认是0,最高无限

    opacitya:0.5;透明度

    ------------恢复内容结束------------

  • 相关阅读:
    HTML5中的FileSystem API的一个问题(或者是BUG)
    TSQL入门(二)——创建表
    javascript绘制谢尔宾斯基三角形(Sierpinski triangle)
    VS2010操作SQL SERVER CE 4.0数据库
    TSQL入门(三)——增删改(INSERT、DELETE、UPDATE)
    IE6警告框
    TSQL入门(二)——创建表
    TSQL入门(一)——创建数据库
    TSQL入门(一)——创建数据库
    javascript绘制谢尔宾斯基三角形(Sierpinski triangle)
  • 原文地址:https://www.cnblogs.com/python-road/p/13213526.html
Copyright © 2020-2023  润新知