CSS

最新推荐文章于 2020-04-22 20:01:37 发布

bm1998

最新推荐文章于 2020-04-22 20:01:37 发布

阅读量3.8k

点赞数 62

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

本文链接：https://blog.csdn.net/bm1998/article/details/96786630

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

1. CSS 的概念
2. CSS 的作用
3. CSS 与 HTML 的结合方式
4. CSS 格式
5. 选择器
- 5.1 选择器的作用
- 5.2 选择器的分类
6. CSS 属性
7. CSS 案例

1. CSS 的概念

CSS(Cascading Style Sheets)，层叠样式表。是一种用来表现 HTML 文件样式的计算机语言。

样式就是定义如何显示 HTML 元素。样式通常存储在样式表中。

层叠就是多个样式可以作用在同一个 HTML 的元素上，同时生效。

2. CSS 的作用

解决了内容展示和样式控制分离的问题

降低耦合度
外部样式提高了开发效率

3. CSS 与 HTML 的结合方式

内联样式（不推荐使用）

在标签内使用 style 属性指定 CSS 代码
```
<div style="color:red;">hello CSS</div>
```

内部样式

在 head 标签内定义 style 标签，style 标签体内写 CSS 代码

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

外部样式

先定义 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. 选择器

5.1 选择器的作用

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

5.2 选择器的分类

基础选择器
1. id 选择器：选择具体的 id 属性值的元素
```
#div1{
	color: red;
}

<div id="div1">
    id选择器
</div>
```
  注意：建议在一个 HTML 页面中一个 id 值只使用一次，保持唯一性
2. 元素选择器：选择具有相同标签名称的元素
```
div{
	color:green;
}

<div>
    元素选择器
</div>
```
3. 类选择器：选择具有相同的 class 属性值的元素
```
.cls1{
	color: blue;
}

<div class="cls1">
    类选择器
</div>
```
  注意：与 id 选择器不同，多个标签可以使用同一个 class 属性值
扩展选择器
1. 通用选择器：选择所有元素
```
*{
	background-color:yellow;
}
```
2. 并集选择器：选择所有指定的元素
```
div,p{
	background-color:yellow;
}
```
3. 子选择器：选择指定元素下的子元素
```
div p{ 
	background-color:yellow;
}
```
4. 父选择器：选择指定元素下的子元素，且其父元素是指定元素
```
div>p
{ 
	background-color:yellow;
}
```
  注意：子选择器和父选择器的区别在于，子选择器中 p 标签在 div 标签中就可以生效，而父选择器不仅要 p 标签在 div 标签中，而且 p 标签的父标签必须是 div 标签才能生效。
5. 属性选择器
```
input[type="text"]{
	background-color:yellow;
}
```
6. 伪类选择器：选择一些元素具有的状态
```
a:link
{ 
	background-color:yellow;
}
```

6. CSS 属性

字体（Font）属性
- font-size：字体大小
- font-family：字体系列
文本（Text）属性
- color：文本的颜色
- text-align：对其方式
- line-height：行高
边框（Border）属性
- border：设置边框，复合属性
尺寸(Dimension) 属性
- width：设置宽度
- height：设置高度
背景（background）属性
- background：设置背景，复合属性
盒子模型
- margin：外边距
- padding：内边距
  
  注意：默认情况下内边距会影响整个盒子的大小。
  
  设置 box-sizing: border-box; 可以让width和height就是最终盒子的大小
- float：浮动
  - left：左浮动
  - right：右浮动

7. CSS 案例

案例效果

在这里插入图片描述

编码实现

注册页面.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>

注册页面样式表.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;
}

bm1998

关注

62
点赞
踩
191

收藏

觉得还不错? 一键收藏
打赏
4
评论
CSS

文章目录1. CSS 的概念2. CSS 的作用3. CSS 与 HTML 的结合方式4. CSS 格式5. 选择器5.1 选择器的作用5.2 选择器的分类6. CSS 属性7. CSS 案例1. CSS 的概念CSS(Cascading Style Sheets)，层叠样式表。是一种用来表现 HTML 文件样式的计算机语言。样式就是定义如何显示 HTML 元素。样式通常存储在样式表中。层...
复制链接

扫一扫