python笔记(web前端 CSS)

一、CSS不同描述（层叠样式表）
1、直接写在标签里面 style = “样式1；样式2”
2、在head中通过style标签定义
3、把样式单独写在CSS文件中，然后在html文件中通过link标签导入

二、CSS语法：
例：

h1  {color:red; font-size:14px;}

三、CSS查找标签的方式（选择器）
1、基本选择器

标签选择器
id选择器
类选择器

2、通用选择器
-样式文件优先级

内联样式（直接在标签里写style）优先级最高
选择器都一样的情况下，谁靠近标签谁就生效

四、属性

padding：内容区和边框之间的距离（内填充/内边距）
margin:边框之外的距离（多用来调整标签和标签之间的距离）

五、浮动：
-----div配合float来做页面布局
六、定位：

默认的static
相对定位relative（相对于原来的位置来说）
绝对定位absolute（相对于最近的一个被定位过的父标签）
固定在某个位置（fixed）

dummyimage.com（图片制作网页）

七、选择方式和几个基本设置

/*注释*/

/*全局通用的样式*/
*{
    font-family:".PingFang SC","微软雅黑","Microsoft","Arial";
    font-size:14px;
}
/*字体粗细*/
.c4{
    font-weight:100
}
.c5{
    font-weight:900;
/*color*/
    /*color:rgb(255,0,0);*//*红 绿 蓝*/
    color:rgba(255,0,0,0.5);/*红 绿 蓝(0~1之间调节浅深)*/
}
    /*color:#FF0000;*/
/*对齐方式*/
.c3{
    text-align:center;/*居中*/
    text-align:right;/*居中*/
    text-align:justify;/*两端对齐*/
    text-intent:28px;/*首行缩进*/
}
/*去掉a标签下面的下滑线*/
a{
    text-decoration:none;
}

/*导航条的样式*/
/*商品列表的样式*/

/*标签选择器*/
h1{
    color:red;font-size:48px
}
/*id选择器*/
#p2{
    color:black;font-size:48px
}
/*类选择器*/
.c1{
    color:yellow;font-size:48px
}
/*强制生效（不推荐使用）*/
.c1{
    color:deeppink;font-size:48px!import
}

八、外边框与属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        /*全局样式*/
        *{
            margin:0;
            padding:0;
        }
        /*加边框*/
        .c1{
                background-color:red;
                height:100px;
                width:100px;
                border:10px solid green; /*10px宽   直线  绿色的框*/
        }
        /*display属性*/
        .c2{
            background-color:red;
            display:inline;  /*行内标签*/
        }
        .c3{
            background-color:green;
            display:block;/*块级标签*/
        }
        ul{
            list-style-type:none;
        }
        li{
            display:inline;
            padding:20px
            <!--border-right:1px solid #666666;-->
        }
        li.last{
            border-right:none;
        }
        li>a{
        border-right:1px solid red;
        padding-right:15px;
        <!--简写-->
        padding:15px 20px 20px 15px;
        }
        <!--CSS盒子模型-->
        .c5{
            height:100px;
            width:100px;
            border:5px solid green;
            <!--外边距-->
            margin-top:15px;
            margin-right:20px;
            margin-bottom:20px;
            margin-left:15px;
            <!--简写-->
            margin:15px 20px 20px 15px;<!--上右下左-->
            margin:15px 20px;<!--上下，左右-->
            <!--居中-->
            margin:0 auto;
        }
        /*float*/
        .c6{
            width:20%;
            height:100px;
            background-color:green;
            float:left;
        }
        .c7{
            width:80%;
            height:100px;
            background-color:red;
            float:left;
            clear:left;/*清除浮动*/
        }
        /*overflow*/
        .c8{
            width:70px;
            height:70px;
            border:1px solid black;
            overflow:auto;
        }
        .header-img{
            width:120px;
            height:120px;
            border:2px solid red;
            border-radius:100%;
        }
        img {
            max-width:100%;
            overflow:hidden;
        }
        #d1{
           border:1px solid red;
        }
        .c9{
            width:50px;
            height:50px;
            background-color:red;
            border:1px solid black;
            float:left;
        }
        /*清除浮动 一个类*/
        .clear-fix:after{
         content:"";
         clear:both;
         display:block;
        }
        /*定位*/
        .c10,
        .c11,
        .c12{
             width:100px;
             height:100px;
        }
        .c10{
            background-color:red;
        }
        .c11{
            background-color:blue;
            position:relative;/*relative：相对定位 absolute*/
            left:100px;
            top:100px;
        }
        .c12{
            background-color:green;
        }
        .13{
            position:fixed;/*固定*/
            right:20px;
            bottom:20px;
            background-color:grey;
        }
    </style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">嘿嘿</div>
<span class="c3">嘻嘻</span>
<span class="c4">啊哈</span>
<div class="c5">嘿嘿</div>
<ul>
    <li><a href="">就将计就计</a></li>
    <li><a href="">坎坎坷坷</a></li>
    <li class="last"><a href="">噢噢噢噢</a></li>
</ul>
<div class="c6">c6</div>
<div class="c7">c7</div>
<div class="c8">
    李优秀, 李优秀,
    李优秀, 李优秀,
    李优秀, 李优秀,
    李优秀, 李优秀,
    李优秀, 李优秀,
c8</div>
<div class="header-img">
    <img src="D:\Python\python_txt\old_boy\未命名图片.png" alt="">
</div>
<div id="d1" class="clear-fix">
    <div class="c9">c9</div>
    <div class="c9">c9</div>
    <div class="c9">c9</div>
    <div class="c9">c9</div>
    <div class="c9">c9</div>

</div>
<div class="c10">c10</div>
<div class="c11">c11</div>
<div class="c12">c12</div>
<div class="c13">返回顶部</div>
</body>
</html>

九、背景不动示例
HTML:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景不动效果</title>
    <style>
        .c1{
            height:300px;
            background:red;
        }
        .c2{
            height:500px;
            <!--background-image:url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg");-->
            <!--background-repeat:no-repeat;-->
            <!--background-position:center;-->
            background-attachment:fixed;
            background:url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg"
            ) no-repeat center;
        }
        .c3{
            height:300px;
            background:green;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

十、blog页面示例：
HTML:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Blog页面示例</title>
    <link rel="stylesheet" href="blog示例.css">
</head>
<body>
<!--左侧边栏开始-->
<div class="left">

    <!--头像开始-->
    <div class="header-img">
        <img src="小新.png" alt="">
    </div>

    <!--头像结束-->

    <div class="blog-name">小小龙的家</div>
    <div class="blog-info">它挣扎着最终得到一片光明！</div>

    <!--连接区开始-->
    <div class="blog-links">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">关于你</a></li>
            <li><a href="">关于它</a></li>
        </ul>
    </div>
    <!--连接区结束-->

    <!--文章分类开始-->
    <div class="blog-tags">
        <ul>
            <li><a href="">JS</a></li>
            <li><a href="">CSS</a></li>
            <li><a href="">HTML</a></li>
        </ul>
    </div>
    <!--文章分类结束-->

</div>
<!--左侧边栏结束-->

<!--右侧边栏开始-->
<div class="right">
    <div class="article-list">
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">酷酷的滕</h1>
                <span class="article-data">2018-03-07</span>
            </div>

            <div class="article-info">
                    我爱你
                    为了找你
                    我搬进了鸟的眼睛里
                    我注视着风的方向
                    却忘记了猎人的枪响
            </div>
            <div class="article-tag">
                    #语录
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">酷酷的滕</h1>
                <span class="article-data">2018-03-07</span>
            </div>

            <div class="article-info">
                我爱你
                好想学一种
                可以伴你一生的咒语
                哪怕是
                做你的宠物狗也可以
            </div>
            <div class="article-tag">
                    #语录
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">酷酷的滕</h1>
                <span class="article-data">2018-03-07</span>
            </div>

            <div class="article-info">
                我爱你
                如果我一生只能给你拥抱
                和不放开你的手
                你是否可以跟我走
            </div>
            <div class="article-tag">
                    #语录
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">酷酷的滕</h1>
                <span class="article-data">2018-03-07</span>
            </div>

            <div class="article-info">
                我爱你凉爽的夏夜。窗户开敞，灯亮着。水果在碗中。你的头在我的肩上。一天中这些最愉悦的时刻。
            </div>
            <div class="article-tag">
                    #语录
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">酷酷的滕</h1>
                <span class="article-data">2018-03-07</span>
            </div>

            <div class="article-info">
                我爱你。 你给我每一次都是新鲜，我对你的依恋越加明显。就在我们每次亲吻的瞬间，我就再也无法离开你的身边
            </div>
            <div class="article-tag">
                    #语录
            </div>
        </div>
    </div>
</div>

<!--左侧边栏结束-->
</body>
</html>

CSS:

/*blog页面相关样式*/

/*公用样式*/

*{
    font-family:".PingFang SC","Microsoft YaHei";
    font-size:14px;
    margin:0;
    padding:0;
}

/*去掉a标签的下划线*/



/*左边栏样式*/
.left{
    width:20%;
    height:100%;
    background-color:rgb(76,77,76);
    position:fixed;/*位置固定*/
    left:0;
    top:0
}

/*左边栏头像样式*/
.header-img{
    height:128px;
    width:128px;
    border:5px solid white;
    border-radius:50%;/*圆形框*/
    overflow:hidden;/*溢出隐藏*/
    margin:0 auto;/*自动居中*/
    margin-top:20px;/*向下移20px*/
}

.header-img>img{
    max-width:100%;/*让照片最大为header-img框的大小*/
}

/*blog名称*/
.blog-name{
    color:white;
    font-size:24px;
    font-weight:bold;/*字体加粗*/
    text-align:center;/*文字居中*/
    margin-top:15px;
}
/*blog介绍*/
.blog-info{
    color:white;
    font-size:12px;
    text-align:center;/*文字居中*/
    /*text-decoration:underline;/*下加下划线*/
    border-bottom:1px solid #332;/*灰色1px下直线框*/
    margin:5px 15px;/*上下5px左右15px*/
}

/*连接组和分类组*/
.blog-links,
.blog-tags{
    text-align:center;/*文字居中*/
    color:white;
    margin-top:40px;
}

.blog-links a{
    text-decoration:none;
    color:yellow;

}

.blog-tags a{
    text-decoration:none;
    color:#4DFFFF;/*文字颜色为浅蓝色*/

}

/*右边栏样式*/
.right{
    width:80%;
    background-color:rgb(238,237,237);
    height:790px;
    float:right;/*让右边栏向右浮动*/
}

.article-list{
    margin-right:10%;
    margin-left:30px;
    margin-top:30px;
}
.article{
    background-color:white;
    margin-top:15px;
}
.article-name{
    display:inline-block;
}

.article-title{
    padding:15px;
    border-left:3px solid red;
}

.article-info{
    padding:15px;
}
.article-tag{
    padding:15px 0;
    margin:15px;
    border-top:1px solid #eeeeeeee;
}
/*文章发布时间*/
.article-data{
    float:right;
}

页面效果：
在这里插入图片描述
十一、CSS练习引入示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS练习引入示例</title>
    <link rel="stylesheet" href="index.css">
    <style>
        <!--连接未被点击过-->
        a:link{
            color:pink;
        }
        <!--访问过的网站-->
        a:visited{
            color:green;
        }
        <!--鼠标移上去-->
        a:hover{
            color:blueviolet;
        }
        <!--连接被点击后的颜色-->
        a:active{
            color:black;
        }
        #d1{
            color:red;
        }
        #d1:hover{
            color:blue;
        }
        input:focus{
        <!--外边的边框-->
            outline:0;
            <!--内部填充颜色-->
            background-color:green;
        }
        <!--设置文章第一个字色颜色大小-->
        p:first-letter{
            font-size:48px;
            color:red;
        }
        <!--在前面添加文字-->
       .c2:before{
            content:"*";
            color:red;
        }
        <!--在后面添加文字-->
       .c2:after{
            content:"[?]";
            color:blue;
        }
        .c6{
            background-color:yellow;
        }
        .c7{
            width:600px;
            height:600px;
            background-image:url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg");
            <!--不重复-->
            background-repeat:no-repeat;
            <!--background-repeat:repeat-x;-->
            <!--background-repeat:repeat-y;-->
            <!--背景位置-->
            background-position:center;
            <!--background-position:%50 %50;-->
            <!--background-position:200px 200px;-->
            <!--简写-->
            <!--background:url(-->
            <!--"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386406210,2948783140&fm=26&gp=0.jpg"-->
            <!--) no-repeat %50 %50;-->
            }
    </style>
</head>
<body>
<p id="p2">小小龙</p>
<!---->
<p class="c1">小龙龙</p>
<h1>小小飞</h1>
<!--伪类选择器-->
<a href="http://www.sogo.com">搜狗</a>
<a href="http://www.baidu.com">百度</a>
<div id="d1">啥是佩奇</div>
<input type="text">
<!--伪元素选择器-->
<p>
    你好鸭！好鸭！
    你好鸭！好鸭！
    你好鸭！好鸭！
</p>
<p class="c2">你好鸭！</p>
<p class="c2">你好鸭！</p>
<p class="c2">你好鸭！</p>
<!--字体属性设置-->
<h1>嘿嘿！</h1>
<p>嘻嘻嘻！</p>
<p class="c3">默认</p>
<p class="c4">100</p>
<p class="c5">900</p>
<div class="c6">我是div</div>
<div class="c7"></div>
<div class="c8"></div>
</body>
</html>

在这里插入图片描述

十二、总结：
一、伪类和伪元素
1.伪类

link（指向未被访问页面的链接样式）
visited（指向已被访问页面的链接样式）
hover(重要用于所有元，素不只是链接，用于鼠标指针浮动在上面的元素)
active（用于活动链接）
focus(input标签获取光标焦点)

2.伪元素

first-letter
before(重要在内部前面添加)
after(重要在内部后面添加)

二、CSS属性
1.字体

font-family（字型）
font-size（字体大小）
font-weight（字体宽度）

2.文本属性

text-align (对齐)
text-decoration(装饰去掉a标签的下滑线)
text-intent(首行缩进)

3.背景属性
background-color 背景颜色
background-image 背景图片 url() no-repeat 50% 50%

4.color

red(直接写颜色)
#FF0000
rgb(255,0,0) —>rgba(255,0,0,0.5)

5.边框属性 border

border-width(边框宽度)
border-style(边框样式)
border-color(边框颜色)
简写：border: 1px solid red

6.CSS盒子模型

content(内容)
padding(内填充) 调整内容和边框之间距离
border(边框)
margin(外边距) 多用于调整标签之间距离（注意两个按着的标签margin取最大值）

注意：要习惯看浏览器窗口盒子模型

7.display(标签的展现形式)

inline(行内标签)
block(块形标签菜单里的a标签可以设置)
none(不显示，不占位)
inline-block((1)，(2)两种属性都有)

8.float(浮动)

多用于实现布局效果
----(1):顶部的导航条
----(2):页面左右分栏（博客页面：左边20%，右边80%）
float
----(1)任何标签都可以浮动，浮动之后都会变成块级 a标签float之后就可以设置高宽
float取值
----(1):left
----(2):right
----(3):none

9.clear 清除浮动–>清除浮动的副作用（内容飞出，夫标签撑不起来）
------:结合伪元素来实现
```
.clearfix:after{
    content:"";
    display:"block";
    clear:both}
```

10.overflow

标签内容放不下（溢出）
取值
------hidden:隐藏
------scroll:出现滚动条
------auto：
------scroll-x
------scroll-y
----------例子：原型头像例子
```
    overflow:hidden
    border-radius:50%(圆角)
```

在这里插入图片描述
11.定位position

static 默认
relative 相对于原来位置
absolute 相对于定位过的前辈标签
fixed 固定返回顶部按钮示例
脱离文档流：float,absolute,fixed

12.opacity(不透明度)

取值0~1
和rgb区别会改变文字和背景透明度

13.z-index

数值越大越靠近你
只能作用于定位过的元素
自定义的模态框

二、选择器

基本选择器
元素 ID 类通用
组合选择器
后代儿子毗邻弟弟
属性（input[type=“check”]）
分组和嵌套
伪类和伪元素
选择器优先级
1、选择器相同:就近原则(越靠近标签优先级越高)
2、权重的计算(内联1000>ID100>类10>元素1)

python笔记(web前端 CSS)

猜你喜欢