47.前端css学习、登陆页面的制作

时间：2024-12-20 11:35:31

CSS：

  • 有了CSS，html中大部分表现样式的标签就可以不用了
  • html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁

CSS的引入方式：

  • 内联式引入：直接赋予标签style属性进行样式编写　　

    • <h style="color:red">你好</h>
  • 嵌入式：直接在文档页面通过style标签创建嵌入的样式表 
    • <!DOCTYPE html>
<html>
    <head>
        <title>CSS学习</title>
        <style type="text/css">
            h{
                color:darkviolet;
            }
        </style>
    </head>
    <body>
        <h>你好</h>
    </body>
</html>
  • 外部式：在文档中通过link标签，将外部样式文件引入到页面中： 
    • <!DOCTYPE html>
<html>
    <head>
        <title>CSS学习</title>
        <link rel="stylesheet" type="text/css" href="E:/python学习资料/上课代码编写/代码练习py/main.css">
    </head>
    <body>
        <h>你好</h>
    </body>
</html>
    • /* main.css的内容 */
h{
    color: blue;
}
  • 优先级：内联式 > 嵌入式 > 外部式 （就近原则）

CSS语法：

  • CSS语法规则由两部分构成：选择器 & 一条或多条声明　

    • selector{
    declaration1;
    declaration2;
}
selector:
    选择器，一般是你需要改变的HTML标签
declaration1:
    每条声明，由一个属性和一个值组成
    • selector{
property: value;
}
属性（property）是您希望设置的样式属性（style attribute）
每个属性有一个值。属性和值被冒号分开
  • 当属性中的值为若干单词时，加引号 
    • h1{
font-family: "sans serif";
}
  • 颜色的写法： 
    • p{
color: #00FF00;
}
    • h1{
color: #0F0
}
    • body{
background: rgb(255,0,0);
background: rgb(100%,0%,0%);
}
请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号
当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么

CSS选择器：

  • 标签选择器

    • 影响范围大，常做通用设置，或用在层级选择器中
    • <p>第一段文字</p>
<p>再来一段</p>
    • <!DOCTYPE html>
<html>
    <head>
        <title>CSS学习</title>
        <style>
            p{
                color: brown;
            /*定义所有p标签字体为红色*/
            }
        </style>
    </head>
    <body>
        <p>第一段文字</p>
        <p>再来一段</p>
　　</body>
</html>
  • 类选择器
    • 通过类名来选择元素，一个类可以用于多个元素；
    • 一个元素也可以使用多个类，应用灵活，可复用；
    • 是CSS中使用最多的一种选择器
    • <p class="www">第一段文字</p>
<p class="www1">再来一段</p>
    • <!DOCTYPE html>
<html>
    <head>
        <title>CSS学习</title>
        <style>
            p.www{
                color: brown;
            /*定义www类标签字体为红色*/
            }
        </style>
    </head>
    <body>
        <p class="www">第一段文字</p>
        <p class="www1">再来一段</p>
　　</body>
</html>
  • 属性选择器
    • 对指定属性的HTML元素进行设置，而不限于class和id属性
    • 通过属性 
      • <a href="https://www.baidu.com">这是一个连接</a>
<p href="test">测试</p> 
      • [href]{
　　color: blue;
}
/*为所有具有href属性的元素设置字体颜色*/
    • 通过属性的值（整个匹配） 
      • <a href="https://www.baidu.com">这是一个连接</a>
<p href="test">测试</p>
      • [href="test"]{
　　font-size: 20px;
}
/*为属性为test的元素设置字体大小*/
    • 属性的值（属性的值中包含所匹配的单词）：~= 
      • <p attr="test">测试</p> √
<p attr="test-xx">测试</p> x
<p attr="test_xx">测试</p> x
<p attr="test xx">测试</p> √
      • [attr~=test]{
　　font-size: 20px;
}
/*为属性包含test的元素设置字体大小*/

      • 注意：不包含下划线和连字符的

    • 属性的值（从开头整个匹配或带有连字符的属性值）：|= 
      • <p attr="test">测试</p> √
<p attr="test-xx">测试</p> √
<p attr="test_xx">测试</p> x
<p attr="test xx">测试</p> x
      • [attr|=test]{
　　font-size: 20px;
}
/*为单词为test或开头为test-的元素设置字体大小*/
      • 注意：适用于由连字符分隔的属性值
    • 属性的值（从属性值的开头进行匹配）：^= 
      • <p attr="test">测试</p> √
<p attr="test-xx">测试</p> √
<p attr="test_xx">测试</p> √
<p attr="test xx">测试</p> √
      • [attr^=test]{
　　font-size: 20px;
}
/*为开头包含test的所有元素设置字体大小*/
    • 属性的值（从属性值的结尾开始匹配）：$= 
      • <p attr="test">测试</p> √
<p attr="xx-test">测试</p> √
<p attr="xx_test">测试</p> √
<p attr="xx test">测试</p> √
      • [attr$=test]{
　　font-size: 20px;
}
/*为结尾是test的所有元素设置字体大小*/
    • 属性的值（只要含有则匹配）：*= 
      • <p attr="test">测试</p> √
<p attr="xx-test">测试</p> √
<p attr="xx_test">测试</p> √
<p attr="xx test">测试</p> √
      • [attr*=test]{
　　font-size: 20px;
}
/*为含有test的所有元素设置字体大小*/
    • 几种属性选择的匹配方式：
      • ~=：用于选取属性值中包含指定词汇的元素；
        • 必须是单独的词汇，不能是带有连字符或下划线组成的单词。
      • |=：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词；
        • 可以有连字符组成，word或者是word-wild
      • ^=：匹配属性值以指定值开头的每个元素
      • $=：匹配属性值以指定值结尾的每个元素
      • *=：匹配属性值中包含指定值的每个元素
  • 层级选择器
    • 主要应用在标签嵌套的结构中，通过层级，限制样式的作用范围
    • <div class="header">
    <p class="title">标题1</p>
    <span class="author">作者1</span>
    <p class="content">
        主要内容
    </p>
</div>
<div class="footer">
    <p class="title">标题2</p>
    <span class="author">作者2</span>
    <p class="content">
        主要内容2
    </p>
</div>        
    • .header .title{
    color: gold;
    font-size: 30px;
}
/*生效所有header类下的title类*/
.header .author{
    color: blue;
    font-size:;
}
/*生效所有header类下的author类*/
.header p{
    font-weight: bold;
}
/*生效所有header类中的p标签*/
  • ID选择器
    • 通过ID名进行元素选择，元素的ID名定义时在整个文档属于唯一　
    • 通过ID选择器只能对应页面元素中的一个
    • ID名通常作为JS脚本定位使用，不推荐ID选择器
    • <div class="header">
<p id="title">标题1</p>
<span id="author">作者1</span>
<p id="content">
主要内容
</p>
</div> 
    • #title{
    font-size: 25px;
    font-weight: bold;
}
#author{
    font-size: 10px;
}
#content{
    color: blue;
}
  • 伪类选择器
    • CSS伪类选择器用于向某些选择器添加特殊的效果
    • 伪类的语法 
      • selector:pseudo-class{
    property: value;
}
    • 与css类搭配使用 
      • selector.class:pseudo-class{
    property: value;
}
  • 锚伪类
    • 控制连接访问状态，常见状态有：活动状态、已访问状态、未被访问状态、鼠标悬停状态
    • <a class="baidu" href="https://www.baidu.com">访问这里</a>
    • .baidu:link{
    color: blue;
}
/*未访问过的连接*/
.baidu:visited{
    color: black;
}
/*访问过的连接*/
.baidu:hover{
    color: gold;
}
/*鼠标划过的连接*/
.baidu:active{
    color: red;
}
/*已选中的连接*/
    • link、visited、hover、active

      • 注意：hover必须定义在link和visited之后，才是有效的；active必须定义在hover之后，才是有效的

CSS选择器的权重

  • 当有多个同类样式作用于同一个元素时：
    • 1. 权重高的样式对元素起作用
    • 2. 权重相同时后写的样式覆盖前面写的
  • 使用!important将样式权重设置为10000，将!important写到样式属性值后 
    • <p id="test" style="color: blue;">测试</p>
    • #test{
    color: red !important;
}
  • 权重值：就近原则
    • 内联式样式：1000 
      • <p style="color: red;"></p>
    • D选择器：100 
      • #id {color: red;}
    • 类选择器：10 
      • .class { background: blue;}
    • 标签选择器：1 
      • p{font-weight:bold;}

CSS基本属性

  • 布局属性
    • width：设置元素（标签）的宽
    • height：设置元素（标签）的高 
      • #button{width:100px; height:100px;} 
    • background：设置背景色或背景图　 
      • body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

      • background 属性可以分解为如下几个设置项

        - background-color: 设置背景颜色
        - background-image: 设置背景图片地址
        　　url(路径)
        - background-repeat: 设置图片如何重复平铺
        　　repeat、repeat-x(水平方向重复)、repeat-y(垂直方向重复)、no-repeat(图片只显示一次)
        - background-position: 设置图片的位置
        　　left、right、center
        - background-attachment: 设置图片是固定的还是会随页面滚动
        　　scroll(背景图片会随着页面其余部分的滚动而移动)、fixed(页面的其余部分滚动时，背景图像不会移
        动)、

        　　　　　　　

      • 注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础.

    • border：设置元素周围的边框　 
      • p{
    border: 10px double blue;
}

      • 依次设置：border-width、border-style、border-color

      • 也可以拆分成四个边的样式选项

        • - border-top: 顶边框
- border-buttom: 底边框
- border-left: 左边框
- border-right: 右边框
        • [attr]{
    border-top: 5px inset blue;
    border-bottom: 5px inset green;
    border-left: 5px outset red;
    border-right: 5px outset red;
}
    • 设置时提供的边框样式属性： 
      • - dotted: 点状
- solid: 实线
- double: 双线
- dashed: 虚线
- groove: 3D 凹槽边框
- ridge: 定义 3D 垄状边框
- inset: 定义 3D inset 边框
- outset: 定义 3D outset 边框
- inherit: 规定应该从父元素继承边框样式
      • <p class="p1">aaaaaaa</p>
<p class="p2">bbbbbbb</p>
<p class="p3">ccccccc</p>
<table class="table1" border="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年纪</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>女</td>
        <td>18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>20</td>
    </tr>
</table>
      • .p1{
    border: 1px dotted blue;
}
.p2{
    border: 1px solid blue;
}
.p3{
    border: 1px double blue;
}
.table1{
    border: 5px double red;
}

    • padding：设置元素包含的内容和元素边框的距离，也叫内边距

      • p{
    padding: 100px;
    border: 1px solid black;
}

      • 这个样式属性也可以拆分成以下单独四种，可以分别设置对应位置的内边距

        • - padding-top: 设置上内边距
- padding-bottom: 设置下内边距
- padding-left: 设置左内边距
- padding-right: 设置右内边距
    • margin：设置元素和外界的边距，也叫外边距 
      • p{
    margin: 10px;
}
/*同时设置四个边距为10px*/

      • 与padding类似，margin属性也可以拆分为四个方向的单独设置

        • - margin-top: 设置上外边距
- margin-bottom: 设置下外边距
- margin-left: 设置左外边距
- margin-right: 设置右外边距
    • float：定义元素在当前父元素下向哪个方向浮动，这个属性常用于图像，使文本围绕在图像周围
      • 如果浮动方向空间不足，元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止
      • <input type="submit" value="提交">
      • input{
    float: left;
}
  • 文本常用属性
    • color：设置元素中的文字颜色 
      • p{color: red;}
    • font-size：设置元素中的文字大小 
      • p{font-size: 12px;}
    • font-family：设置元素中的文字字体 
      • p{font-family:"微软雅黑"}
/*为了避免中文兼容问题，常用字体的英文标识*/
p{font-family:"Microsoft Yahei"}
    • font-widght：设置元素中的文字是否加粗 
      • p{font-widght:bold;}
/*设置加粗*/
p{font-widght:normal;}
/*设置不加粗*/
    • line-height：设置元素中的文字行高 
      • p{line-height:24px;}
    • text-decoration：设置元素中文字的下划线 
      • p{text-decoration:underline;}
      • - none: 默认文本格式，无下划线
- underline: 定义文本下的一条线
- overline: 定义文本上的一条线
- line-through: 定义穿过文本的一条线
    - blink: 定义闪烁的文本
- inherit: 规定应该从父元素继承 text-decoration 属性的值
    • text-align：设置元素中文字对齐方式 
      • p{text-align:center;}
    • text-indent：设置元素中文字的首行缩进 
      • p{text-indent:24px;}
    • display：设置元素的类型及隐藏方式 
      • p{display:none;}
      • - none: 元素不会显示
- block: 元素将显示为块级元素，此元素前后会带有换行符
- inline: 此元素被显示为内联元素，元素前后没有换行符
- list-item: 元素作为列表显示
- table: 元素作为块级表格来显示（类似 <table>），表格前后带有换行符
- inline-table: 元素作为内联表格来显示（类似 <table>），表格前后没有换行符
- table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
- table-caption: 此元素会作为一个表格标题显示（类似 <caption>）
  • 元素溢出
    • overflow：当子元素的大小超过所承载的父元素大小时，需要设置父元素对于溢出的子元素显示方式 
      • <p>123456789</p>
p{
    width:500px;
    text-indent: 498px;
    border: 1px solid blue;
    overflow:auto;
}
      • - visible: 默认值;内容不会被修剪，会呈现在元素框之外
- hidden: 内容会被修剪，并且其余内容是不可见的
- scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

定位

  • 文档流：文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

  • CSS3主要有三种定位：普通流、浮动、绝对定位

  • static：元素框正常生成，块级元素生成一个矩形框、作为文档流的一部分、行内元素则会创建一个或多个行框，置于其父元素中

  • relative：相对定位元素，元素还会保持定位前的形状，并且移动前的位置也会保留下来，不会脱离文档流

    • 一般是将父级设置相对定位（relative），子级设置绝对定位（absolute），子级就以父级作为参照来定位，否则子级相对于body来定位

    • 相对定位会按照元素的原始位置对该元素进行移动

  • absolute：绝对定位元素，元素脱离文档流，移动前的位置在文档流中关闭，定位后生成一个新的块级框，不论他之前在原始文档流中生成何种类型的框

    • 也可以理解为漂流在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
    • 通过绝对定位，元素可以放置到页面上的任何位置
  • fixed：固定定位元素，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行定位
  • 元素偏移的设置： 
    • - top: 定位元素的上外边距边界与其包含块上边界之间的偏移
- bottom: 定位元素下外边距边界与其包含块下边界之间的偏移
- right: 定位元素右外边距边界与其包含块下边界之间的偏移
- left: 定位元素左外边距边界与其包含块下边界之间的偏移
- z-index: 设置堆叠元素的层级，这里的层级不是从上到下，而是从里到外

　　

代码格式实现以上内容

  • 　

    <!DOCTYPE html>
<html>
    <head>
        <title>CSS学习</title>
        <style>
            /* css样式编写标签是style 然后选择html当中标签进行写样式*/
            .h_1{
                color: blueviolet;
                font-size : 100px;
                font-weight:bold;
                border:  5px solid red;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="E:/python学习资料/上课代码编写/代码练习py/main.css">
    </head>
    <body>
        <p>css学习</p>
        <h class="h_">我是css引入的</h>
        <h1 class="h_1">我是哪位</h1>
        <a class="a_" href="https://www.baidu.com">这是个百度链接</a><br><br>
        <a class="a_" href="www.xxx.xxx">xxx</a><br><br>
        <div class="div">
            <p1>div1</p1><br><br>
        </div>
        <div class="div">
            <p1>div2</p1><br><br>
        </div>
        <div class="www_">
            <p><label>账号：</label><input id="www" type="text" name="account" placeholder="请输入你的账号"/></p>
            <p><label>密码：</label><input id="www" type="text" name="account" placeholder="请输入你的密码"/></p>
            <p><input id="login" type="submit" value="登录"></p>
        </div>
    </body>
</html>
  • /* main.css */
body{
    /* 设置背景色或背景图 */
    width: 100%;
    height: 100%;
    background: black url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552742826972&di=26b956efcc0056b3819a9e8c8b493e2b&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F17bd4b72f4d43662b65b94eb0d61b6ac7bb7d9d323ba2-XMM11S_fw658) repeat-x center scroll;
}
.h_{
    /* 类选择器 */
    color: blue;
    font-size : 100px;
    font-weight:bold;
    border: 5px solid red;
}
[href]{
    /* 属性选择器 */
    color: brown;
    padding: 5px;
    font-size: 10px;
}
.a_:hover{
    /* 锚伪类鼠标划过的连接 */
    font-size: 30px;
    font-weight: bold;
    color:black;
}
.div p1{
    /* 层级选择器 */
   color: bisque;
   font-size: 50px;
   font-weight: bold;
   border: 1px dashed red;
}
.www_{
    text-align: center;
    color:red;
    width: 100%;
    height: 100%;
    border: 1px dashed red;
}
#www{
    /* id选择器 */
    width: 200px;
    height: 20px;
}
#login{
    /* id选择器 */
    width: 100px;
    height: 30px;
}　

html+css定位编写登陆的界面：

  • <!DOCTYPE html>
<html>
    <head>
        <title>登录页面的制作</title>
        <style type="text/css">
        /* 嵌入式引用css样式 */
        body{
            width: 100%;
            height: 100%;
            background: black url(file:///E:/python%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/%E4%B8%8A%E8%AF%BE%E8%A7%86%E5%B1%8F/%E4%B9%9D%E9%98%B6%E6%AE%B5%EF%BC%9AWeb%EF%BC%8CDjango/8-3-JS/img/1.gif) no-repeat;
        }
        .login{
            /* 设置类login的css样式 */
            width: 50%;
            height: 200px;
            margin-top:100px;
            /* 设置外边距 上边框 */
            margin-left: 630px;
            /* 设置外边距 左边框 */
            position: relative;
            /* 相对定位 定位元素的上外边距边界与其包含块上边界之间的偏移量 */
            top: 250px;
        }
        label{
            color: white;
            font-weight: bold;
        }
        input{
            /* 设置输入框的样式 */
            width: 25%;
            height: 25px;
            border: 2px solid ;
            background-color: gray;
            color: white;
             /* 设置边框实线 背景颜色及写入字体颜色*/
        }
        #input_:hover{
            border: 4px inset gray;
            /* 定义 3D inset 边框 */
        }
        button{
            width: 8%;
            height: 30px;
            font-size: 17px;
            font-weight: bold;
            color: lightgray;
            background-color: dimgray
            /* 设置按钮样式 */
        }
        button:hover{
            border: 4px outset gray;
        }
        #button_{
            /* float: right; */
            margin-left: 120px;
            /* 设置外边距 左边框 */
        }
        </style>
    </head>
    <body>
        <div class="login">
            <p>
                <label>账号：</label><input id="input_" type="text" name="账号">
            </p>
            <p>
                <label>密码：</label><input id="input_" type="text" name="password">
            </p>
            <p>
                <button>注册</button>
                <button id="button_">登录</button>
            </p>
        </div>
    </body>
</html>

    47.前端css学习、登陆页面的制作

　　

相关文章