css-day03

xiaoruia

已于 2022-06-24 10:31:58 修改

阅读量398

点赞数

分类专栏：我的前端学习记录文章标签： javascript 前端 html

于 2022-06-24 10:30:00 首次发布

本文链接：https://blog.csdn.net/xiaoruia/article/details/125440881

版权

我的前端学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day03

alt+shift+f：快速调整代码格式

alt+shift+左键：同时选中一列

ctrl+f：查找

ctrl+h：替换

xhtml：可扩展的超文本标记语言

表单

表单域：< form >

action属性：该属性是将表单里的数据传到后台
将表单中控件属性设置name的数据传送给后台
只对表单域里的数据生效，包括提交注册按钮

表单控件：

input控件
- type=text 文本输入框
  - placeholder属性：当文本框里面没有文字时，默认显示的文字【灰色】
  - name属性：方便后台拿到值
- type=password 密码输入框
- type=radio 单选框
  - checked属性：默认勾选
  - name值必须设置一样才能实现单独勾选
- type=checkbox 多选框/复选框
- type=submit 登录按钮，本质是将数据传输到后台
  - 可以通过改变value属性改变按钮里面的文字（改变值）
- type=reset 清空按钮
  - 可以通过改变value属性改变按钮里面的文字（改变值）
文本域 texrarea
- cols：宽度（一行所能容纳的字节数）
- rows：高度（所显示的行数）

重点：

所有需要传数据的控件必须在表单里面
传数据的控件必须要有name属性
单选框的name必须相同，才能互斥实现单选的功能

实例：

<!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>
</head>

<body>
    <!-- 表单域
        action属性：数据提交的后台地址
        将表单域中给了name属性值的控件的值提交到后台
        只有在表单域中的数据才能提交到后台，重置按钮也同样只作用于表单域中
    -->
    <form action="http://baidu.com">
        <!-- 文本输入框 text
            placeholder：当文本框里面没有文字时默认显示的文字
            name：该控件的名字，用于提交后台的查看
        -->
        请输入你的昵称：<input type="text" placeholder="昵称" name="name1"><br>
        <!-- 密码输入框 password -->
        请输入你的密码：<input type="password" name="password1"><br>
        <!-- 单选框 radio
            在单选框中的name需要设置一样，才能产生互斥，否则不能单选
            checked：默认勾选
        -->
        你的性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<input type="radio"
            name="sex">其他<br>
        <!-- 复选框 checkbox -->
        你的爱好：<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<br>
        <!-- 文本域 textarea
            cols：宽度（一行所能容纳的字节数）
            rows：高度（所显示的行数）
        -->
        输入你的评价：<textarea name="area" cols="30" rows="10"></textarea><br>
        <!-- 提交按钮 submit 
            value：可以更改该控件的值
        -->
        <input type="submit" value="立即注册">
        <!-- 重置按钮 reset -->
        <input type="reset" value="清空">
    </form>
</body>

</html>

css样式引入

css样式引入分为三种：

行内样式引入：直接在标签后加入 style=“css属性名：css属性值”
内部样式引入：在head部加入style标签，然后用选择器进行添加样式
外部样式引入：在head部用link标签进行引入外部的链接样式表例如：< link rel=“stylesheet” href=“css/demo01.css” >

重点：

行内样式使用较少，重点在内部样式和外部样式，当代码量很多时就用外部引用
三种样式的优先级遵循就近原则，当三种样式同时出现时，最上层的样式会被下层覆盖掉，所以行内样式优先级最高

实例：

<!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>
    <!-- 引入样式表的优先级取决于顺序（就近原则），css具有层叠性，后面的样式会覆盖前面的样式 -->
    <link rel="stylesheet" href="css/demo01.css">
    <style>
        input {
            width: 300px;
            height: 80px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 行内样式便覆盖了上述的外部和内部样式 -->
    <input type="submit" style="background-color: yellow;">
</body>
</html>

选择器

选择器有 ①通配符选择器 ②标签选择器 ③类（class）选择器 ④id选择器 ⑤群组选择器 ⑥后代选择器

通配符选择器：
- 语法：*{…}
- 作用于全局，主要用于清除标签自带的样式【权重为0】
标签选择器：
- 语法：标签名 {…}
- 对所有的此标签起作用【权重为0001】
类（class）选择器：
- 语法：. 标签中的class属性值 {…}
- 需要设置标签的class属性，取名需要合乎规范【权重为0010】
id选择器：
- 语法：#标签的id属性值{…}
- 需要设置标签的id属性值，此id只能存在一个【权重为0100】
群组选择器：
- 语法：选择器，选择器，选择器{…}
- 主要是方便多个标签设置相同的样式【各个选择器的权重不叠加】
后代选择器：
- 语法：选择器（父辈）选择器（子辈）{…}
- 用于对子辈进行样式的更改【权重为父辈的权重+子辈的权重】

重点：

类选择权使用频率最高，取名一定要合乎规范
id选择器的id不能重复
群组选择器各个权重分开
后代选择器的权重需要叠加计算
当不同的选择器对同一个标签进行设置时，通过比较权重来判断优先级
如果权重相同，则使用层叠性原则

实例：

<!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>
         /* 通配符选择器 */
        /* 应用全局 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 标签选择器 */
        p {
            color: blue;
        }
        /* 类选择器 */
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
        }
        /* id选择器*/
        #idbox {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        /* 子代选择器 */
        .list li {
            color: pink;
        }
        /* 群组选择器 */
        em,b,span {
            color: green;
        }
    </style>
</head>
<body>
    <p>嘻嘻</p>
    <div class="box"></div>
    <!-- id只能有一个，不能重复 -->
    <div id="idbox"></div>
    <ul class="list">
        <li>我</li>
        <li>我</li>
        <li>我</li>
    </ul>
    <em>我</em>
    <b>我</b>
    <span>我</span>
</body>
</html>

继承和层叠性

继承：通常是父辈的样式传给子辈
层叠性：在css中，后面设置的样式会覆盖掉前面的样式，也就是就近原则
a标签部分不能被继承

实例：

<!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>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <!-- p标签的样式会继承给子标签 -->
    <!-- 继承的权重是最低的 -->
    <p>
        <i>我是儿子</i>
    </p>
    <!-- 但是a标签不会被继承，需要单独设置 -->
    <p>
        <a href="#">d</a>
    </p>
    <!-- 当权重一样时，就会层叠，后面的会覆盖前面的样式 -->
</body>
</html>

伪类选择器

伪类选择器：

a：link ：当链接未被点击时的默认状态
a：visited：当链接被点击后的状态
a：hover：当鼠标悬停上时的状态
a：active：当鼠标点击时的状态

重点：

如果四个选择器一起出现，则顺序不能改变，因为css有层叠性的原则，后面的会将其覆盖掉
link和visited只能用于a标签，而hover和active可以用作别的标签

实例：

<!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>
        /* 当链接未被点击时的默认状态 */
        a:link {
            color: red;
        }
        /* 当链接被点击后的状态 */
        a:visited {
            color: yellow;
        }
        /* 鼠标悬停上的状态 */
        a:hover {
            color: purple;
        }
        /* 鼠标点击时的状态 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <!--伪类选择器的顺序不能更改 link->visited->hover->active(实际上是根据层叠性，后面的会覆盖前面的动作，所以顺序不能改变)
        伪类选择器的权重为10
        hover和active不止可以用在超链接标签，也可以使用在别的标签上
    -->
    <a href="####">点击一下</a>
</body>
</html>

span和div

span：在一行内可以放置多个span小盒子
div：一个div盒子独占占据一行

实例：

<!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>
        div span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        我是最帅的-- <span>睿睿</span>
    </div>
</body>
</html>

总结

在表单中：
- 所有元素都必须在表单里面才能被传输到后台
- 需要有name属性才能被后台识别
- 单选框中的name值必须相同
css引入：
- 行内样式不常用，重点是内部样式和外部样式
- 优先级依据层叠性原则
选择器：
- 使用最多的是类（class）选择器，class命名需要规范
- id选择器的id不能重复
- 群组选择器要用逗号分隔
- 子代选择的权重为父辈+子辈的权重
- 根据权重的大小判断优先级，权重相同时则根据层叠性进行判断优先级
继承和层叠性：
- 子代继承父代，层叠性则是后面会覆盖前面(就近原则)
- a标签部分不能被继承
伪类选择器：
- 顺序：link->visited->hover->active
- hover和active可以用于别的标签
span和div：span可以在一行中显示多个，div独占一行