CSS学习

mikey桑

已于 2022-06-19 23:31:15 修改

阅读量266

点赞数

分类专栏：前端文章标签： css

于 2020-03-01 13:01:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41821963/article/details/104482199

版权

前端专栏收录该内容

6 篇文章

订阅专栏

1.CSS的概念

css（cascading style sheets）：进行页面美化和布局控制

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

2.使用CSS的好处

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

3.CSS的使用：css和html结合的方式

1.内联样式

在标签内使用style属性指定css代码
如

<div style="color:red;">hello CSS</div>

2.内部样式

在head标签内定义style标签，style标签体内容就是 css代码
如

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div{
           color:blue;
       }
   </style>
</head>
<body>
   <div>hello CSS</div>
</body>

3.外部样式
步骤：

定义css资源文件
在head标签内定义link标签，引入外部资源文件
如
css文件

div{
    color:green;
}

html文件

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="css/a.css">
</head>
<body>
   <div>hello CSS</div>
</body>
</html>

4.CSS语法

格式

选择器 {
   属性名1:属性值1;
   属性名2:属性值2;
   ...
}

选择器：用来筛选具有相似特征的元素

5.选择器

分类：
1.基础选择器

id选择器：选择具体的 id 属性值的元素,建议在一个 HTML 页面中一个 id 值只使用一次，保持唯一性

#div1{
   color: red;
}

<div id="div1">
   id选择器
</div>

元素选择器：选择具有相同标签名称的元素

div{
   color:green;
}

<div>
   元素选择器
</div>

类选择器：选择具有相同的 class 属性值的元素

.cls1{
   color: blue;
}

<div class="cls1">
   类选择器
</div>

选择器优先级：id选择器>类选择器>元素选择器
2.扩展选择器

通用选择器：选择所有元素

*{
	background-color:yellow;
}

并集选择器：选择所有指定的元素

div,p{
	background-color:yellow;
}

子选择器：选择指定元素下的子元素

div p{ 
	background-color:yellow;
}

父选择器：选择指定元素下的子元素，且其父元素是指定元素

div>p
{ 
	background-color:yellow;
}

注意：子选择器和父选择器的区别在于，子选择器中 p 标签在 div 标签中就可以生效，而父选择器不仅要 p 标签在 div 标签中，而且 p 标签的父标签必须是 div 标签才能生效。

属性选择器：选择元素名称，属性名=属性值的元素

input[type="text"]{
	background-color:yellow;
}

伪类选择器：选择一些元素具有的状态

a:link
{ 
	background-color:yellow;
}

这里的a标签是超链接标签，link表示初始化的状态，visited表示被访问过的状态，active表示正在访问状态，hover表示鼠标悬浮状态

6.CSS属性

1.字体，文本

font-size：字体大小
color：字体颜色
text-align：对齐方式
line-height：行高

2.背景

background

<div>
	background:url("img/logo.jpg") no-repeat;
</div>

以上
3.边框

border：设置边框，复合属性，可以对每个边框分别做设计

4.尺寸

width：宽度
height：高度

5.盒子模型

margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
使用：box-sizing：border-box；设置盒子属性，让width和height就是最终盒子大小

6.float：浮动

left
right

7.CSS案例

1.效果图
在这里插入图片描述
2.代码实现

css代码

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    background: url("../img/register_bg.png") no-repeat center;
}

.rg_layout{
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;
    /*让div水平居中*/
    margin: auto;
    margin-top: 25px;
}

.rg_left{
    /*border: 1px solid red;*/
    float: left;
    margin: 15px;
}
.rg_left_chinese{
    color:#FFD026;
    font-size: 20px;
}
.rg_left_english{
    color:#A6A6A6;
    font-size: 20px;

}

.rg_center{
    /*border: 1px solid red;*/
    float: left;
    margin: 15px;
}
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.td_right{
    padding-left: 50px ;
}
#username,#password,#email,#name,#phone,#birthday,#checkcode{
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6 ;
    /*设置边框圆角*/
    border-radius: 5px;
    padding-left: 10px;
}
#checkcode{
    width: 110px;
}
#img_check{
    height: 32px;
    /*设置垂直居中*/
    vertical-align: middle;
}
#btn_sub{
    width: 150px;
    height: 40px;
    margin-top: 15px;
    margin-left: 50px;
    background-color: #FFD026;
    border: 1px solid #FFD026 ;
}

.rg_right{
    /*border: 1px solid red;*/
    float: right;
    margin: 15px;
}
.rg_right_login{
    font-size: 15px;
}
.rg_right_login a{
    color: pink;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/注册页面样式表.css">
</head>
<body>
<div class="rg_layout">
    <!--左侧注册提示-->
    <div class="rg_left">
        <p class="rg_left_chinese">新用户注册</p>
        <p class="rg_left_english">USER REGISTER</p>
    </div>
    <!--中间填写注册信息-->
    <div class="rg_center">
        <div>
            <form>
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td class="td_right">
                            <input type="date" name="birthday" id="birthday">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right">
                            <input type="text" name="checkcode" id="checkcode">
                            <img id="img_check" src="img/verify_code.jpg"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input id="btn_sub" type="submit" value="注册">
                        </td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
    <!--右侧登陆提示-->
    <div class="rg_right">
        <p class="rg_right_login">已有账号?<a href="#">立即登陆</a></p>
    </div>

</div>
</body>
</html>