前端之css

目录

前端之css

基于form表单发送数据

  1. 用于获取用户数据的标签至少应该含有name属性
    name属性相当于字典的键
    用户输入的数据会被保存到标签的value属性中
    value属性相当于字典的值
  2. 如果不需要用户填写数据 只需要选择 那么我们需要自己填写value
<input type="radio" name="gender" value="male">

ps:没有name属性的标签 form表单会直接忽略 不会发送
3. 针对input标签理论上应该配一个label标签绑定 但是也可以不写

<label for="d1">username:
    <input type="text" id="d1">
    </label>
<label for="d1">username:</label>
    <input type="text" id="d1">
  1. 标签的属性如果和属性值相等 那么可以简写
<input type="file" multiple="multiple">
<input type="file" multiple>
  1. 针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value="" selected="selected">222</option>
<option value="" selected>222</option>
  1. 下拉框与文件上传可以复选
<input type="file" multiple>

css叠层样式表

主要用来调节html标签的各种样式

页面都是由HTML构成的页面上有很多相同的HTML标签 但是相同的HTML标签在不同位置可能有不同的样式

标签的两大重要属性》》》区分标签

  1. class属性
    分门别类 主要用于批量查找
  2. id属性
    精确查找 主要用于点对点

写css流程

  1. 先查找标签

  2. 在想如何调整样式

  3. css语法结构

    选择器{
    样式名1:样式值1;
    样式名2:样式值2;
}

  4. css注释语法

    /*注释语句*/

  5. 引入css的多种方式

    • head内sytle标签内部编写
    • head内link标签链接css样式(标准引入方式)
    • 标签内style属性内直接编写(不推荐)

css选择器

<!--<body>-->
<!--body-->
<!--<div class="c1 c2 c3">div-->
<!--    <p class="divp1">divp-->
<!--        <span class="divpspan">divpspan</span>-->
<!--    </p>-->
<!--    <div class="divdiv">divdiv</div>-->
<!--</div>-->
<!--<span class="span">sapn</span>-->
<!--</body>-->

  1. css基本选择器

    • 标签选择器(直接按照标签名查找标签)

      div {
    color: #5affce;
}

    • 类标签选择器(按照标签的class值查找标签)

      .c1{
    color: red;
}

    • id选择器（根据标签id值精准查找标签）

      #span1{
    color: aqua;
}

    • 通用选择器(直接选择页面所有的标签)

      *{
    background-color: #2f0099;
}

  2. css组合选择器

    预知知识点 我们对标签的嵌套有另外一套说辞
<p>ppp</p>
<p>ppp</p>
<div>div
<div>divdiv
    <p>divdivp
    	<span>divdivpspan</span>
    </p>
</div>
<p>divp</p>
<span>divspan</span>
</div>
<p>ppp</p>
<span>spanspan</span>

    针对标签的上下层级以及嵌套有另外的说法

    父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

    • 后代选择器

      div span{
    color: aquamarine;
}

    • 儿子选择器（不能隔代选择）

      div>p{
    color: red;
}

    • 毗邻选择器（在用一级标签）谁在前就从哪一个标签向下找不想上找（如果有多个相连，必须要按照顺序找，一个没找到，就不行）

      div+p{
    color: #006699;
}

    • 弟弟选择器（小波浪号）只要是同级向下标签都能找到

      div~p{
    color: red;
}

  3. 分组与嵌套

    #多个选择器合并查找，就是只要在这里面的选择都查找
div,p,span{
    color: red;
}

    #span1,.ppp1,span{
    color: red;
}

    查找class含有c1的div
div.c1 {  
    color: red;
}

    查找id是p1的p
p#p1{ 
    color: red;
}

    查找含义c1样式值里面 id是span1的span标签
.c1 span#span1{
    color: aquamarine;
}

  4. 属性选择器

    [username]:hover {
    background-color: red;
}
[username]{
    background-color: aqua;
}
[username]:focus{
    background-color: pink;
}
[password='password']{
    background-color: aqua;
}
[password]:hover {
    background-color: pink;
}
div[divname='div1']{
    background: red;


}
[divname='div1']{
    background: red;


}

    image

  5. 伪类选择器
    a标签补充说明 针对没有点击过的网址默认是蓝色点击过的则为紫色

    a:hover{
    color: red;
}
input:focus{
    background: pink;
}

    image

选择器优先级

  1. 选择器相同 导入方式不
    就近原则

    <link rel="stylesheet" href="style.css">
<style>
    a{
        color: pink;
    }
</style>

    image

  2. 选择器不同导入方式相同
    内联样式 > id选择器 > 类选择器 > 标签选择器

    a{
    color: pink;
}

.a1{
    color: red;
}

#aa1{

    color: aqua;
}

    image

css样式调节

字体样式

.niubi{
            font-size: 48px;
            font-family: "Microsoft JhengHei Light";

            /*字体粗细*/
            /*font-weight: lighter;*/

            /*color: #006699;*/
            /*color: red;*/
            /*color: rgb(225,110,0);*/
            /*颜色透明的最后一个参数是透明度0-1的小数*/
            color: rgba(225,110,0,0.5);
            /*局中*/
            text-align: center;
            /*也是局中*/
            margin: 0 auto 0 auto;

            /*常用于取消a标签下划线*//*但也可以用在其他方面line-through从中间线,overline底部线,underline顶部线*/
            text-decoration: underline;
            /*首行空多少*/
            text-indent: 24px;
        }

image

取色器工具

  1. pycharm
    image

  2. 截图工具
    微信截图，qq截图之类的

背景属性

div{
    width: 800px;
    height: 800px;
    background-color: pink;
    /*background-image: url("https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417");*/
    /*background-repeat: no-repeat;*/

    /*cover自动缩放填充*/
    /*contain横向填充*/
    /*background-size: cover;*/

    /*图片位置*/
    /*background-position: center;*/

    /*background-position-x: 100px;*/
    /*background-position-y: 50px;*/

    background: url("https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417")
        no-repeat  100px 50px pink;
/*当有多个属性名相同的前缀 那么可以简写一次性完成*/
}

image

边框border

.div1{
    width: 200px;
    height: 200px;
    border-left-color: red;
    border-left-style: dotted;
    border-left-width: 5px;

    border-right-width: 5px;
    border-right-style: solid;
    border-right-color: #b0ecdf;

    border-bottom-color: pink;
    border-bottom-style: double;
    border-bottom-width: 5px;

    border-top-color: black;
    border-top-style: solid;
    border-top-width: 5px;

}
.div2{
    width: 200px;
    height: 200px;
    border: 5px solid aquamarine;
    /*这一句等于上面好多句，常常用于四边都一样的情况*/
    border-radius: 50%;
}

image

隐藏display

行内标签是无法设置长宽 只有块级可以设置

  1. display:none 彻彻底底的隐藏标签（页面上不会显示 也不会保留标签的位置）
  2. visability:hiddon 隐藏的不彻底，会保留原标签位置
.div1{
    width: 200px;
    height: 200px;
    border: 5px solid black;
    visibility: hidden;
}

.div2{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    display: none;
}
.div3{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
}

image

盒子模型

我们可以将标签看成一个盒子（快递盒）

  1. 快递包里面的内容 content(内容)
  2. 快递内容与外壳的距离 padding(内边距，内填充)
  3. 快递外壳的厚度 border(边框)
  4. 快递盒子与快递盒子的距离 margin(外边距)
/*    !*padding: 20px; 上下左右*!*/
/*    !*padding: 20px 40px;  上下   左右*!*/
/*    !*padding: 10px 20px 30px;上  左右  下*!*/
/*    !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致

针对标签的嵌套 水平方向可以局中

margin 0 auto;

image

浮动float

浮动就是用来作业面布局的

浮动的现象

​ float:left right

.div1{
    /*width: 200px;*/
    /*height: 200px;*/
    /*border: 5px solid pink;*/
}

.div2{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    float: right;
}
.div3{
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    float: left;
}

image

解决浮动的影响

clear

解决浮动带来的影响终极方法

先提前写好样式类，谁塌陷了 就给谁添加clearfix样式类就可以了

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

image

ps:浏览器会优先展示文本内容（如果被挡住）

溢出overflow

.div1 {
    width: 200px;
    height: 200px;
    border: 5px solid pink;
}

.div2 {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    /*float: right;*/
}

image

解决溢出

.div1 {
    width: 200px;
    height: 200px;
    border: 5px solid pink;
    overflow: hidden;
}

.div2 {
    width: 400px;
    height: 400px;
    border: 5px solid pink;
    /*float: right;*/
}

image

定位position

标签在默认情况下都是无法通过定位参数移动的

针对标签移动有四种状态

  1. static静态（标签的默认状态 无法定位移动）
  2. relative相对（基于原标签位置移动,但是会保留原标签位置）
  3. absolute绝地（基于某个定位过的的标签移动）
  4. fixed固定定位（基于浏览器窗口定位移动）
.div1{
    width: 200px;
    height: 200px;
    position: relative;
    border: pink solid 5px;
    top:200px;
    left: 400px;

}

.div2{
    width: 200px;
    height: 200px;
    position: absolute;
    border: pink solid 5px;
    top: 200px;
    left: 200px;
}
.div4{
    width: 200px;
    height: 200px;
    border: pink solid 5px;
    right: 0;
}
.div5{
    width: 200px;
    height: 200px;
    border: pink solid 5px;
    position: fixed;
    right: 20px;
    bottom: 30px;
}



<div class="div1">我是第1div
    <div class="div2">我是第2div</div>
<!--    <div class="div3">我是第3div</div>-->
</div>
<div class="div5">我是第5div</div>
<div class="div4">我是第4div</div>

image

图层z-idex

  1. 谁的z-index大谁在上
  2. 只有定了的元素，才能有z-index也就是，不管相对定位绝对定位，还是固定定位，都可以使用z-index,而不浮动元素不能使用z-index
  3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果一样那么谁在html后面，谁在上面压着别人
.div1 {
    width: 200px;
    height: 200px;
    background-color: #888c8e;


}
.div4 {
    width: 300px;
    height: 300px;
    background-color: greenyellow;
    position: fixed;
    z-index: 1;

}
.div5 {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: fixed;
    z-index: 2;
}

image

透明效果opacity

opacity可以透明元素所有可见，而rgba只能透明字体的

简易博客页面搭建

<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <link rel="stylesheet" href="css/index.css">-->
<!--</head>-->
<!--<body>-->
<!--<div></div>-->

<!--<div class="blog_left">-->
<!--    <div class="blog_head_avatar">-->
<!--        <img src="https://img0.baidu.com/it/u=3194981343,487441191&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=417" alt="">-->
<!--    </div>-->
<!--    <div class="blog_info">" 桥本环奈 "</div>-->
<!--    <div class="blog_desc" style="color: red">♥我老婆♥</div>-->
<!--    <div class="blog_link">-->
<!--        <ul>-->
<!--            <li class="links"><a href="">我是大哥大</a></li>-->
<!--            <li class="links"><a href="">银魂</a></li>-->
<!--            <li class="links"><a href="">暗杀教室</a></li>-->
<!--        </ul>-->

<!--    </div>-->
<!--    <div class="blog_award">-->
<!--        <ul>-->
<!--            <li>第40届最佳新人奖</li>-->
<!--            <li>第7届优秀动作女演员奖</li>-->
<!--            <li>第26届日本最佳珠宝佩戴奖-10代部门</li>-->
<!--        </ul>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="blog_right">-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="box">-->
<!--        <div class="div_title">-->
<!--            <span class="title">基本信息</span>-->
<!--            <span class="data">2022-12-02</span>-->
<!--        </div>-->
<!--        <div class="div_context">-->
<!--            <span>我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆，我老婆</span>-->
<!--        </div>-->
<!--        <div class="div_foot">-->
<!--            <span>#演员</span>-->
<!--            <span>#歌手</span>-->
<!--        </div>-->
<!--    </div>-->



<!--</div>-->


<!--</body>-->
<!--</html>

/*通用样式*/

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #dfdcdc;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

/*.fexldflo:after {*/

/*    content: '';*/
/*    clear: both;*/

/*}*/

/*首页左边样式*/


.blog_left {
    background: #e4e4e4;
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    float: left;

}


.blog_head_avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 10px auto;
    overflow: hidden;
}

.blog_head_avatar > img {
    /*overflow: hidden;*/
    /*max-width: 100%;*/
    max-height: 100%;
    margin-left: -30px;
}

.blog_info, .blog_desc {
    font-size: 24px;
    font-weight: lighter;
    text-align: center;
    margin: 10px auto;
}

.blog_link a:hover, .blog_award a:hover {
    color: #b0ecdf;
}

.blog_link a, .blog_award a {
    color: black;
    line-height: 10px;
}

.blog_link ul > li, .blog_award ul > li {
    line-height: 40px;
}

.blog_link, .blog_award {
    font-size: 26px;
    color: black;
    text-align: center;
    margin: 35px auto;
}


/*首页右边样式*/

.blog_right {
    width: 80%;
    height: 1000px;
    float: right;
}

.box {
    margin: 30px 20px;
    background-color: white;
    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.8);
}

.div_title {
    border-left: 2px solid red;
    padding: 15px;
}

.div_title .title {
    font-size: 36px;
}

.div_title .data {
    float: right;
    font-weight: bolder;
    margin: 20px auto;

}
.div_context{
    margin: 5px auto;
    border-bottom:2px solid black;
    padding-bottom: 5px;
}
.div_context span{
    font-size: 24px;
    margin-left: 20px;
}

.div_foot span{
    font-size: 18px;
    margin-left: 20px;
}

image

posted @ 2022-12-01 19:46  clever-cat  阅读(26)  评论(0)  编辑  收藏  举报