CSS入门学习

最新推荐文章于 2023-08-12 21:43:52 发布

小马code

最新推荐文章于 2023-08-12 21:43:52 发布

阅读量123

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44016361/article/details/119853151

版权

CSS

概念

css：页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表

优点：

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

使用

CSS的使用：CSS与HTML结合方式

内联样式
内部样式
外部样式

内联样式

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

<div style="color:red">hello world</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: aqua;
        }
    </style>
</head>
<body>
<!--内部样式 在head标签中使用style标签，style标签的标签体内内容就是css代码-->
<div>hello world</div>
</body>
</html>

外部样式

简单来说，就是将css样式定义到外部文件中，当html页面需要使用的时候，使用link标签引入

a.css

div{
    color: red;
}

demo.html

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

注意

内联样式，内部样式和外部样式三种方式，css的作用范围越来越大
内联样式不常用，后期常用内部样式和外部样式
外部样式除了link引入，还有另外一种使用方法
```
<style>
	@import "./css/a.css"
</style>
```

CSS语法

格式：

选择器{
	属性名1：属性值1；
	属性名2：属性值2；
	...
}

选择器：筛选具有相似特征的元素
注意：

每一对属性需要使用分号隔开，最后一对属性可以不加

选择器

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

基本选择器

id选择器：选择具体的id属性值的元素
- 语法：#id{属性名：属性值;…}
元素选择器：选择具有相同标签名称的元素
- 语法：标签{属性名：属性值;…}
类选择器：选择有相同的class属性值的元素
- 语法：.class名{属性名：属性值;…}
选择器优先级：id选择器>类选择器>元素选择器
扩展选择器

选择所有元素
- 语法：*{}
并集选择器：
- 语法：选择器1，选择器2{}
子选择器：筛选选择器1元素下的选择器2元素
- 语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1
- 语法：选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素
- 语法：元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
- 语法：元素：状态{}
- 如：状态：
  
  link：初始状态
  
  visited：被访问过的状态
  
  active：正在访问状态
  
  hover：鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子选择器*/
        div p{color:red;}
        /*父选择器*/
        div > p{border: red dashed;}
        /*并集选择器*/
        div,p{color:green;}
        /*属性选择器*/
        div[color]{border: aqua dashed;}
        /*伪类选择器*/
        a:link{color: red;}
        a:visited{color: deepskyblue;}
        a:active{color: aquamarine;}
        a:hover{color: yellow;}
    </style>
</head>
<body>
<div>
    <p>helloworld</p>
</div>
<div color="green">hellojava</div>
<p>helloC++</p>
<a href="#">www.baidu.com</a>
</body>
</html>

属性

文本

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

背景

background-color：背景颜色
background-image：背景图片

边框

border：设置边框，复合属性

尺寸

width：宽度
height：高度

盒子模型

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

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            box-sizing: border-box;
        }
        body{
            background:url("./image/白鹤亮翅.jpg") center;
        }
        .layout {
            width: 1000px;
            height: 700px;
            border: 6px solid gainsboro;
            background-color: aliceblue;
            margin: auto;
            margin-top:20px;
        }
        .left{
            /*border: 2px solid red;*/
            float: left;
            margin:10px;
        }
        #p1{
            color: #FFD026;
            size: 40px;
        }
        #p2{
            color: darkgray;
            size: 40px;
        }
        #p3{
            size:10px;
        }
        .center{
            /*border: 2px solid red;*/
            float: left;
            width: 600px;
            padding-left: 50px;
            padding-top:100px;
        }
        .right{
            /*border: 2px solid red;*/
            float: right;
            margin:10px;
        }
        .td_left{
            width:100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 30px;
        }
        .input{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
        }
        #sub{
            width:150px;
            height: 40px;
            background-color: #FFD026;
            border:1px solid #FFD026;
            margin-left: 120%;
        }
    </style>
</head>
<body>
<div class="layout">
    <div class="left">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
    </div>
    <div class="center">
        <div>
            <form>
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input name="username" id="username" placeholder="请输入账号" class="input"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码" class="input"></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="请输入Email" class="input"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input name="name" id="name" placeholder="请输入真实姓名" class="input"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td class="td_right"><input type="number" name="phone" id="phone" placeholder="请输入手机号" class="input"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td class="td_right">
                            <input type="checkbox" name="sex" value="man">男
                            <input type="checkbox" name="sex" value="women">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">出生日期</td>
                        <td class="td_right"><input type="date" name="date" class="input"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="yzm">验证码</label></td>
                        <td class="td_right"><input name="yzm" id="yzm" class="input"></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="submit" value="注册" align="center" id="sub">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="right">
        <p id="p3">已有账号,<a href="#">立即登录</a> </p>
    </div>
</div>
</body>
</html>

小马code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门学习

CSS概念css：页面美化和布局控制概念：Cascading Style Sheets 层叠样式表优点：功能强大将内容展示和样式控制分离降低耦合度。解耦让分工协作更容易提高开发效率使用CSS的使用：CSS与HTML结合方式内联样式内部样式外部样式内联样式在标签内使用style属性指定css代码<div style="color:red">hello world</div>在head标签内，定义style标签，style标签的内容就是
复制链接

扫一扫