CSS学习

最新推荐文章于 2022-10-13 11:08:50 发布

winkooxx

最新推荐文章于 2022-10-13 11:08:50 发布

阅读量112

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/Dhxy1030/article/details/114294245

版权

笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

CSS学习

css：层叠样式表，页面美化和布局控制
  特点：1.功能强大 2.降低了代码的耦合 3.提高了开发效率 4.分工协作容易
  使用：与html结合
      1.内联样式：在标签内使用css中style属性
      2.内部样式：在head标签内定义style标签
      3.外部样式：顶替css资源文件，在head标签内定义style标签，引入外部资源
css属性：
	1.字体，文本 
		font-size字体大小，color颜色，text-align对齐方式，line-height行高
 	2.背景
		background：url("")
	3.边框 border
	4.尺寸 width，height
	5.盒子模型
		margin外边距
		padding内边距
		box-sizing：border-box；让上面设置的height和width的值为最终值
		float 浮动
css语法格式：
	选择器{
        属性名1：属性值1；
         属性名2：属性值2；
          属性名3：属性值3；
	}
----选择器种类：
	id选择器：选择具体的id属性值得元素#id属性值{}
		style>
        #aa{
            color: red;
            font-size: 50px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<div id="aa">i really like you</div>
</body>
----元素选择器：标签名称{}
		<style>
        div {
            color: red;
            font-size: 50px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<div>i really like you</div>
</body>
----类选择器：选择具有相同的class属性值元素
		<style>
        .aa {
            color: red;
            font-size: 50px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<div class="aa">i really like you</div>
<div class="aa">i am your father</div>
</body>
----所有选择器 *{}选择所有元素
	style>
        *{
            color: red;
            font-size: 50px;
            font-family: 楷体;
        }
    </style>
</head>
<body>
<div class="aa">i really like you</div>
<div class="aa">i am your father</div>
</body>
----并集选择器
	选择器1，选择器2{}
----子选择器
	选择器1 选择器2{} 选择器1下的选择器2
----父选择器
	选择器1>选择器2{} 选择器2上的选择器1
----属性选择器
	元素名称[属性名=“属性值”]{}
	img[src=""]{}
--------------------------------
a标签的状态
	a:link 初始化
	a:visted 被访问过
	a:active 正在访问
	a:hover 鼠标悬停状态

2.案例：优化html注册表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            background: url("cc.jpg") no-repeat center;
        }

        #p1 {
            color: yellow;
            font-size: 25px;
        }

        #p2 {
            color: #A6A6A6;
            font-size: 25px;
        }

        #p3 {
            color: pink;
        }

        .left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .right{
            padding-left: 50px;
        }
        .bg {
            width: 900px;
            height: 500px;
            background-color: #EEEEEE;
            margin: auto;
            margin-top: 200px;

        }

        .bg-left {
            /*border: 1px solid red;*/
            float: left;
            margin-left: 10px;
            margin-top: 20px;
        }

        .bg-center {
            /*border: 1px solid red;*/
            float: left;
            margin-left: 100px;
            margin-top: 20px;
            width: 450px;
        }

        .bg-right {
            /*border: 1px solid red;*/
            float: right;
        }
        #username,#password,#tel,#email,#birthday,#name{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
        }
        #zhuce{
            width: 80px;
            height: 40px;
        }

    </style>
</head>
<body>
<div class="bg">
    <div class="bg-left">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
    </div>
    <div class="bg-center">
        <form action="#" method="get">
            <table>
                <tr>
                    <td class="left"><label for="username">用户名</label></td>
                    <td class="right"><input type="text" name="username" id="username" placeholder="请输入"></td>
                </tr>
                <tr>
                    <td class="left"><label for="password">密码</label></td>
                    <td class="right"><input type="password" name="password" id="password" placeholder="请输入"></td>
                </tr>
                <tr>
                    <td class="left">性别</td>
                    <td class="right"><input type="radio" name="性别" value="1" checked>男
                        <input type="radio" name="性别" value="2">女
                    </td>
                </tr>
                <tr>
                    <td class="left"><label for="sheng"></label>省份</td>
                    <td class="right">
                        <select id="sheng" name="省份">
                            <option selected>--请选择--</option>
                            <option>陕西</option>
                            <option>北京</option>
                            <option>上海</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="left"><label for="tel">手机号</label></td>
                    <td class="right"><input type="text" name="tel" id="tel" placeholder="请输入"></td>
                </tr>
                <tr>
                    <td class="left"><label for="email">邮箱</label></td>
                    <td class="right"><input type="email" name="email" id="email" placeholder="请输入"></td>
                </tr>
                <tr>
                    <td class="left"><label for="birthday">生日</label></td>
                    <td class="right"><input type="date" name="birthday" id="birthday" placeholder="请输入"></td>
                </tr>
                <tr>
                    <td class="left"><label for="name">姓名</label></td>
                    <td class="right"><input type="text" name="name" id="name" placeholder="请输入"></td>
                </tr>
                <tr>

                    <td colspan="2" align="center"><input type="submit" value="注册" id="zhuce"></td>
                </tr>
            </table>
        </form>
    </div>
    <div class="bg-right">
        <P>已有账号?<a href="http://www.baidu.com" id="p3">立即登录</a></P>
    </div>
</div>
</body>
</html>

在这里插入图片描述
案例：计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页计算器</title>
    <style type="text/css">
        div{
            width: 200px;
            border: 4px solid #ccc;
            border-radius: 4px;
            overflow: hidden;
        }
        input{
            width: 45px;
            height: 45px;
            border: 4px solid #ccc;
            border-radius: 4px;
            float: left;
            margin: 4px 0 4px 4px;
        }
        #myinput{
            padding: 0;
            width: 135px;
            height: 37px;
        }
    </style>
    <script type="text/javascript">
        function fun(str) {
            if(str=='C'){
                myinput.value="";
            }else if(str=='='){
                //取出文本框中的值进行计算
                myinput.value=eval(myinput.value);
            }else{
                myinput.value+=str;
            }
        }
    </script>
</head>
<body>
    <div>
        <input type="text" readonly="readonly" id="myinput">
        <input type="button" value="C" onclick="fun('C')">
        <input type="button" value="7" onclick="fun('7')">
        <input type="button" value="8" onclick="fun('8')">
        <input type="button" value="9" onclick="fun('9')">
        <input type="button" value="4" onclick="fun('4')">
        <input type="button" value="5" onclick="fun('5')">
        <input type="button" value="6" onclick="fun('6')">
        <input type="button" value="1" onclick="fun('1')">
        <input type="button" value="2" onclick="fun('2')">
        <input type="button" value="3" onclick="fun('3')">
        <input type="button" value="0" onclick="fun('0')">
        <input type="button" value="+" onclick="fun('+')">
        <input type="button" value="-" onclick="fun('-')">
        <input type="button" value="/" onclick="fun('/')">
        <input type="button" value="." onclick="fun('.')">
        <input type="button" value="=" onclick="fun('=')">
    </div>
</body>
</html>

winkooxx

关注

0
点赞
踩
0

收藏

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

CSS学习css：层叠样式表，页面美化和布局控制特点：1.功能强大 2.降低了代码的耦合 3.提高了开发效率 4.分工协作容易使用：与html结合 1.内联样式：在标签内使用css中style属性 2.内部样式：在head标签内定义style标签 3.外部样式：顶替css资源文件，在head标签内定义style标签，引入外部资源css属性： 1.字体，文本 font-size字体大小，color颜色，text-align对齐方式，line-heig
复制链接

扫一扫