css入门及深入了解

阳光穿透心脏的1/2处 2022-06-12 22:45 175阅读 0赞

1 CSS入门  
1.1 引入  
html：负责网页的结构  
css： 负责网页的美观（样式）  
1.2 体验

<html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>css入门</title>
                <style type="text/css">
                    a{
                        font-size:24px;
                        color:#0F0;
                    }
                </style>
                </head>
    
                <body>
                <a href="xxxx" >超链接</a><br/>
                <a href="xxxx" >超链接</a><br/>
                <a href="xxxx" >超链接</a><br/>
                <a href="xxxx" >超链接</a><br/>
                </body>
                </html>

1.3 定义  
CSS（Cascading Style Sheet 层叠样式表） 简称，样式。  
主要负责网页的美观。  
1.4 css的使用方式  
1）行内样式  
注意：  
1）使用标签的style属性进行css控制，css写在style属性值中  
2）弊端：只能控制一个标签的样式  
超链接

2）内部样式
            注意：
            1）使用style的标签进行css控制，css内容写在style标签体内
            2）一次控制多个标签的样式
            3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

3）外部样式（推荐使用）
            注意：
                1）建立独立后缀为css的文件，css内容写在该文件中
                2）在使用css的html页面中，导入外部css文件

<link href="01.css" rel="stylesheet"/>

2 CSS语法

a{
            font-size:24px;
            color:#F00;
    }
    
    选择器（selector）：使用选择器来选择需要添加样式的标签。
    CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....
    CSS值（value）：添加样式的具体值。12px , 红色，背景图片....
    
        2.1 选择器
        标签选择器
        作用： 选择同名的标签
    div{
            font-size:24px;
            color:#F00; 
        }

注意：  
1）选择到所有同名的标签

类选择器    
        作用： 选择同类的标签
    /*类选择器*/
        .c1{
            font-size:24px;
            color:#F00; 
        }

注意：  
1）选择的标签必须有class的属性。同类的标签使用同名  
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！  
id选择器  
作用： 选择一个标签  
\#d1\{  
font-size:24px;  
color:\#0F0;  
\}  
注意：  
1）选择的标签必须有id属性。  
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById(“id属性值”)  
3）id选择器的优先级最高！

并集选择器
    /*并集选择器*/
        .c1,#d1{
            font-size:24px;
            color:#0F0;
        }
        作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。
    
        交集选择器
    
    /*交集选择器
        div里面的span标签
        */
        .c1 span{ 
            font-size:24px;
            color:#0F0;
        }
    
        作用： 选择某个选择器中的子标签。
    
        通用选择器
    
    
    /*通用选择器*/
    *{
        font-size:24px;
        color:#0F0;
    }
        作用； 选择所有的标签
        伪类选择器
        作用：控制标签在不同状态下的样式。
    
        标签有四种状态：
                link: 没有访问过的状态
                hover: 鼠标经过的状态
                active:鼠标激活（按下但没有松开）的状态
                visited: 已经被访问过的状态（鼠标点下且松开）

2.2 常用的CSS属性和值  
CSS文本

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css文本</title>
        <style type="text/css">
    
            body{
                /*color：颜色*/
                color:#F00;
                /*字符间距*/
                letter-spacing:10px;
                /*对齐方式*/
                text-align:center;
                /*文本修饰  下划线-underline，  中划线(line-through)   上划线-overline  没有:none*/
                text-decoration:line-through;
                /*单词间距*/
                word-spacing:30px;
            }
        </style>
        </head>
    
        <body>
        今天 天气 不错！
        </body>
        </html>

CSS字体

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css字体</title>
        <style type="text/css">
            body{
                /*字体类型 
                注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。
                */
                /*
                font-family:"宋体";
                */
                /*字体大小*/
                /* 
                font-size:24px;
                */
                /*字体样式: 正(normal默认)  斜(italic)*/
                /*
                font-style:italic;
                */
                /*字体粗细  bold 加粗*/
                /*
                font-weight:bold;
                */
    
                /* font: 简写属性 */
                font:italic bold 36px "黑体";
            }
        </style>
        </head>
    
        <body>
        华育国际
        </body>
        </html>

CSS背景

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css背景</title>
        <style type="text/css">
    
            body{
                /*背景颜色*/
                /*
                background-color:#0CF;
                */
                /*背景图片*/
                /*
                background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
                */
                /*设置背景图片是否重复，或如何重复
                    not-repeat: 不重复
                    repeat-x: x轴重复
                    repeat-y: y轴重复
                    repeat: x和y轴重复(默认)
                */
                /*
                background-repeat:no-repeat;
                */
                /*设置背景的起始位置*/
                /*
                /*需要画图详细讲解*/
                background-position:top center;
                */
                /*简写属性*/
                background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
    
            }
        </style>
        </head>
    
        <body>
        </body>
        </html>

CSS列表

系统菜单

CSS表格

CSS边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css边框</title>
        <style type="text/css">
            div{
                /*边框颜色*/
                /*简写属性
                  1) 默认设置方向属性： 上 右 下 左
                  2）如果当前方向没有设置颜色，那么取对面的颜色
                */
                /*
                border-color:#F00;
                */
                /*
                border-left-color:#F00;
                border-right-color:#0F0;
                border-top-color:#00F;
                border-bottom-color:#C90;
                */
    
                /*边框宽度*/
                /*简写属性
    
                */
                /*
                border-width:10px;
                */
                /*
                border-left-width:10px;
                border-right-width:20px;
                border-top-width:30px;
                border-bottom-width:40px;
                */
    
                /*边框样式(注意： 边框只有加了border-style才会显示出来)
                solid: 单实线
                dashed:虚线
                dotted: 点
                double: 双实线
                */
    
                /*简写属性*/
                /*
                border-style:solid;
                */
    
                /*
                border-left-style:solid;
                border-right-style:dashed;
                border-top-style:dotted;
                border-bottom-style:double;
                */
    
                /*所有边框属性的简写属性*/
                border:2px solid #F00;
            }
        </style>
        </head>
    
        <body>
        <div>div1</div>
        </body>
        </html>

3 盒子模型  
3.1 定义  
可以把html页面上每个标签看做是一个盒子。  
通过需求讲解盒子模型：  
1.将盒子的宽高变为之前的两倍  
2.将盒子厚度变为原来的两倍  
3.盒子里面的内容距顶部内10px  
4.盒子里面的内容距离左内边10px  
5.下面的盒子距离上面的盒子10px(两种方式实现)

盒子相关的属性：
                宽度和高度（width和height）： 决定这个盒子的容量
                内边距（padding）： 盒子边框与内容的距离
                边框（border）： 盒子的厚度
                外边距（margin）： 盒子与盒子之间的距离

1.  CSS定位（画图解释）  
    ![这里写图片描述][SouthEast]  
    相对定位：relative（相对自己之前的位置）  
    绝对定位：abosolute（相对父标签的位置）  
    固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

div{
            width:100px;
            height:100px;
            border:10px solid #999;}
        #div1{
            background-color:#006;
                                  }
        #div2{
            background-color:#0C0;}
        #div3{
            background-color:#3F0;
            /*position:relative;
            top:10px;
            left:10px;*/
            /*
            position:absolute;
            top:20px;
            left:20px;*/
            position:fixed;
            top:200px;
            left:450px;
            }

1.  作业：利用div+css设计一个qq登录页面，画图说明需求，代码完成  
    代码如下：  
    **你们得更改图片位置就行了**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    div{
        width: 400px;
        height: 400px;
        border-6px solid #900;
        position:fixed;
        left:500px;
        top:200px;
        width:10px;
        height:60px;
        border:2px solid #900;
    }
    div{
        width: 320px;
        height: 300px;
        border-1px solid #900;
        position:fixed;
        left:500px;
        top:220px;
        text-align: center;
    
    
        background-image: url(C:\\Users\\hunter\\Desktop\\javaweb\\第02天代码+资料\\css资料\\05.素材\\1.jpg);
        background-repeat: no-repeat;
        background-position: top center;
    }
    #d1
    {   
        background-image: url(C:\\Users\\hunter\\Desktop\\javaweb\\第02天代码+资料\\css资料\\05.素材\\head.png);
    
    }
    #d2
    {
        background-image: url(C:\\Users\\hunter\\Desktop\\javaweb\\第02天代码+资料\\css资料\\05.素材\\key.jpg);
    }
    .type1{
        padding-left:30px;
        background-repeat: no-repeat;
    }
    #d3{
        margin-right:20px;
    }
    
    </style>
    </head>
    <body>
        <div >
        <br ><br ><br ><br ><br >
        用户名:<input type="username" name="username" id="d1" class="type1" ><br >
        <br>
    
        密码:    <input type="password" name="password" id="d2" class="type1"><br>
        <br>
    
        <input type="button" value="登录" id="d3">
        <input type="submit" value="注册" id="d4"></div>
    </body>
    </html>

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220613/9ee57ad602c44ede933bd4ff26b6c885.png
[SouthEast 1]: /images/20220613/bbe6d75cc40a41079ffab12194b34dc8.png
[SouthEast 2]: /images/20220613/4df10f02f8b342bf8b88c2cab766d58b.png
[SouthEast 3]: /images/20220613/26ee03b604d8495c90cc29e846fb7d92.png