19-谢文姬-2.2-学习笔记

最新推荐文章于 2022-10-20 00:08:19 发布

青木·ya

最新推荐文章于 2022-10-20 00:08:19 发布

阅读量489

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46212761/article/details/104148931

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

CSS简介

CSS简介

CSS的主要使用场景就是美化页面，布局页面的。
HTML的局限性：HTML只关注内容的语义。

CSS-网页的美容师

CSS是层叠样式表的简称，也称为CSS样式表或级联样式表，CSS是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框样式、边距等）以及版面的布局和外观显示样式。

总结

HTML主要做结构，显示元素内容。
CSS美化HTML，布局页面。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构、（HTML）与样式（CSS）相分离。

CSS语法规范

键值对：一个属性对应一个值

CSS代码风格

样式格式书写

紧凑格式
展开格式
( 建议使用展开格式，更为直观)

样式大小写

建议使用小写

空格规范

属性值前，冒号后面，保留一个空格
选择器（标签）和花括号之间保留一个空格

CSS选择器

标签选择器

语法：标签名 {
属性1：属性值；
属性2：属性值：
…}

作用：标签选择器可以把某一标签全部选出来。
优点：能快速为页面中同一类型的标签统一设置样式。
缺点：不能设置差异化样式，只能选择全部的当前标签。

类选择器

语法： .类名{
属性1：属性值；
属性2：属性值；
…}

作用：实现差异化选择不同标签，单独选择一个或某几个标签。
在这里插入图片描述

（谁需要用，就谁调用）

类选择器使用注意事项

多类名使用

在这里插入图片描述

注意

id选择器

在这里插入图片描述
注意：id属性只能在每个HTML文档中出现一次。
（样式#定义，结构id调用，只能调用一次）

类选择器与id选择器的区别

在这里插入图片描述

通配符选择器

用" * "定义，它表示选取页面中所有元素(标签)

语法： * {
属性1：属性值；
属性2：属性值；
…}

注意：通配符选择器不需要调用，自动就给所有元素使用样式。

总结

在这里插入图片描述

注册页面案例

（补充上一篇笔记的案例）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>注册页面</title></head><body>    <h3>GOT7会员注册</h3>    <table width=900 height=300 >        <!--第一行-->        <tr>            <td>小可爱要取名为：</td>            <td><input type=text></td>        </tr>        <!--第二行-->        <tr>
            <td>性别：</td>            <td>                <input type=radio name="sex" value="nan" id="nan"> <label for="nan">男</label>                  <input type=radio name="sex" value="nv" id="nv"> <label for="nv">女</label>            </td>        </tr>        <!--第三行-->        <tr>            <td>小可爱来自哪里呀</td>            <td>                <select name="where">                <option></option>                <option>广东</option>                <option>广西</option>                <option>四川</option>                <option>湖南</option>                </select>            </td>        </tr>        <!--第四行-->        <tr>            <td>你喜欢谁呀</td>            <td>                <input type="checkbox" name="who" id="wang"> <label for="wang">王嘉尔 </label>                <input type="checkbox" name="who" id="duan"><label for="duan">段宜恩 </label>                <input type="checkbox" name="who" id="lin"><label for="lin">林在范 </label>                <input type="checkbox" name="who" id="piao"><label for="piao">朴珍荣 </label>                <input type="checkbox" name="who" id="jin"><label for="jin">金有谦 </label>                <input type="checkbox" name="who" id="bam"><label for="bam">bambam </label>                <input type="checkbox" name="who" id="cui"><label for="cui">崔荣宰 </label>            </td>        </tr>        <!--第五行-->        <tr>            <td>自我介绍呀</td>            <td><textarea></textarea></td>        </tr>        <!--第六行-->        <tr>            <td></td>            <td><input type="submit" value="立即成为会员"></td>        </tr>        <!--第七行-->        <tr>            <td></td>            <td><input type="checkbox" checked=checked><a  href="#">我已仔细阅读相关规定，并严格遵守网站条例</a></td>        </tr>        <!--第八行-->        <tr>            <td></td>            <td>                <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我承诺</h4>                <ul>                    <li>不撕逼</li>                    <li>不ky</li>                    <li>专注自家</li>                </ul>            </td>        </tr>
    </table></body></html>