CSS基础

Posted 超霸霸

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础相关的知识，希望对你有一定的参考价值。

CSS基础

一、概念

CSS（Cascading Style Sheets）：层叠样式表

  • 层叠：多个样式可以作用在同一个html的元素上，同时生效

二、好处

  • 功能强大
  • 将内容展示和样式控制分离
    • 降低耦合度
    • 让分工协作更容易
    • 提供开发效率

三、CSS的使用

  • 内联样式
    • 在标签内使用style属性指定css代码
<div style="color:red;">hello world</div>
  • 内部样式
    • 在head标签内定义style标签，style标签的标签体内容就是css代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        div{
            color: #6486ed;
        }
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>
  • 外部样式
    • 定义css资源文件
    • 在head标签内，定义link标签，引入外部的资源文件

a.css文件：

div{
    color:red;
}

css.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="a.css">
</head>
<body>
<div>
    hello world
</div>
</body>
</html>

【注意】：

  • 1，2，3种方式css作用范围越来越大

  • 内联样式不常用，后期常用内部样式和外部样式

  • 外部样式可以写为：（了解即可，不常用）

    <style>
	@import "a.css";
</style>

四、CSS语法

  • 格式：
选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}
  • **选择器：**筛选具有相似特征的元素

【注意】：每一对属性需要使用分号;隔开，最后一对属性可以不加分号;

五、选择器

  • 概念：筛选具有相似特征的元素

  • 分类：

    • 基础选择器

      1. id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
        • 语法：#id属性值{}
      2. 元素选择器：选择具有相同标签名称的元素
        • 语法：标签名称{}
        • 注意：id选择器优先级高于元素选择器
      3. 类选择器：选择具有相同的class属性值的元素
        • 语法：.class属性值{}
        • 注意：类选择器优先级高于元素选择器

      案例：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <style>
        <!--id选择器-->
        #div1{
            color: #b8ed64;
        }
        <!--元素选择器-->
        div{
            color: #ed6464;
        }
        <!--类选择器-->
        .cls1{
            color: grey;
        }
    </style>
</head>
<body>
<div id="div1">hello world</div>
<div>hello world</div>
<p class="cls1">hello world</p>
</body>
</html>

      效果：

    • 扩展选择器

      1. 选择所有元素
        • 语法：*{}
      2. 并集选择器
        • 选择器1, 选择器2{}
      3. 子选择器
        • 语法：选择器1, 选择器2{}
      4. 父选择器
        • 语法：选择器1 > 选择器2{}
      5. 属性选择器：选择元素名称，属性名=属性值的元素
        • 语法：元素名称[属性名称="属性值"]{}
      6. 伪类选择器：选择一些元素具有的状态
        • 语法：元素:状态{}
        • 状态：
          1. link：初始化的状态
          2. visited：被访问过的状态
          3. active：正在访问状态
          4. hover：鼠标悬浮状态

      案例：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        /*子选择器，选择div标签的p子标签*/
        div p {
            color: #64aded;
        }
        /*父选择器，选择p标签的div父标签*/
        div > p {
            border: 1px solid; /*solid代表实线*/
        }
        /*属性选择器*/
        input[type="text"] {
            border: 5px solid;
        }
        /*伪类选择器*/
        a:link {
            color: pink;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: yellow;
        }
        a:visited {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>海贼王</p>
    </div>
    <div>海贼王</div>
    <input type="text">
    <input type="password">
    <br>
    <a href="#">百度</a>
</body>
</html>

      效果：

六、属性

  • 文字、文本
    1. font-size：字体大小
    2. color：文本颜色
    3. text-align：对齐方式
    4. line-height：行高
  • 背景
  • 边框
    1. border：设置边框，复合属性
  • 尺寸
    1. width：宽度
    2. height：高度
  • 盒子模型：控制布局
    1. margin：外边框
    2. padding：内边框
      • 默认情况下内边距会影响整个盒子的大小
      • box-sizing：border-box；设置盒子的属性，让width和height就是盒子的最终大小
    3. float：浮动
      • left：左浮动
      • right：右浮动

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <style>
        div {
            border: 1px solid orange;
            width: 100px;
        }

        .div1 {
            width: 100px;
            height: 100px;
            /*外边距*/
            /*margin-top: 10px;*/
        }

        .div2 {
            width: 200px;
            height: 200px;
            /*内边距*/
            padding: 50px;
            /*
            设置盒子的属性，让width和height就是最终盒子的大小
             */
            box-sizing: border-box;
        }

        .div3 {
            float: left;
        }

        .div4 {
            float: left;
        }

        .div5 {
            float: right;
        }
    </style>
</head>
<body>
<div class="div2">
    <div class="div1"></div>
</div>
<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>
</html>

效果：

七、CSS练习：注册页面

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>
        * {
            /*设置默认内边距和外边距都为0*/
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            /*设置背景图片，不重复显示，居中*/
            background: url("picture.jpg") no-repeat center;
        }

        .rg_layout {
            /*设置白框的高度宽度*/
            width: 900px;
            height: 500px;
            /*设置内灰框的大小，颜色*/
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div居中*/
            margin: auto;
            /*设置外边距*/
            margin-top: 20px;
        }

        .rg_left {
            padding: 15px;
            float: left;
        }

        /*设置新用户注册*/
        .rg_left p:first-child {
            color: #FFD026;
            size: 20px;
        }

        /*设置USER REGISTER*/
        .rg_left p:last-child {
            color: #A6A6A6;
            size: 20px;
        }

        .rg_center {
            float: left;
            width: 450px;
        }

        .td_left {
            height: 45px;
            width: 100px;
            /*设置右对齐*/
            text-align: right;
        }

        /*设置左边距*/
        .td_right {
            padding-left: 50px;
        }

        .rg_right {
            margin: 15px;
            float: right;
        }

        /*设置所有的输入框*/
        #username, #password, #birthday, #phone, #name, #email {
            width: 250px;
            height: 32px;
            padding-left: 5px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
        }

        #code {
            width: 125px;
            height: 32px;
            padding-left: 5px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
        }

        /*设置验证码*/
        #img_check {
            padding-left: 5px;
            width: 120px;
            height: 40px;
            vertical-align: middle;
        }

        #button {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 0px;
        }

        /*设置立即登录*/
        .rg_right p a {
            color: pink;
        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_left"><input type="text" name="username" placeholder="请输入账号" id="username"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" placeholder="请输入密码" id="password">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="text" name="email" placeholder="请输入Email" id="email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" placeholder="请输入真实姓名" id="name"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td class="td_right"><input type="text" name="phone" placeholder="请输入您的手机号" id="phone"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</tdVSCode自定义代码片段7——CSS动画


 VSCode自定义代码片段7——CSS动画


 VSCode自定义代码片段6——CSS选择器


 css常用代码片段 (更新中)


 CSS代码片段


 CSS代码片段