Day36 CSS初识和选择器

fighting_cui

于 2021-08-08 19:46:09 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/fighting_cui/article/details/119519492

版权

本文详细介绍了HTML中的各种元素，如段落、标题、类选择器和ID选择器的使用，并展示了如何通过CSS设置文本颜色、行高、内联样式以及伪类来控制链接状态。同时，讲解了表单的基本结构，包括不同类型的输入字段、按钮和表单提交方式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*css代码*/
        /* 选择器{
            属性:值;
            属性:值;
        } */
        /* 内部样式:优点,可以操作多个标签,样式与内容分离
                缺点,只能操作当前页面的标签,样式与内容没有完全分离 */
        
        div {
            color: aqua;
            color: #cc0055;
            color: rgb(221, 204, 73);
            /* 首行缩进 */
            text-indent: 2em;
            /* 行高,行间距 */
            line-height: 20px;
        }
        /* <!--外部链接,完全实现结构与样式分离,控制整个站点--> */
        
        h1 {
            /* 字体大小 */
            font-size: 50px;
            /* 字体样式 */
            font-family: "宋体";
            /* 字体粗细*/
            font-weight: 900;
            /* 加粗 */
            font-style: italic;
        }
        
        h2 {
            /* font:style weight size/line-height family; */
            font-style: italic;
        }
        /* 类选择器,对所有class属性相同的标签这事相同的样式 */
        
        .a1 {
            color: rosybrown;
        }
        
        .a2 {
            font-size: 30px;
        }
        
        p.a1 {
            color: salmon;
        }
        /* id选择器,在页面中是唯一性的,用于设置单个标签的样式,用 #ID 表示 */
        
        #a {
            color: skyblue;
        }
        /* 通配符,选中页面中所有的标签进行设置 */
        
        * {
            color: slategrey;
        }
        /* 并集选择器,对多个选择器设置相同的样式  选择器,选择器{} */
        
        p,
        .a2 {
            color: snow;
        }
        /* 子代用 > 表示,后代用空格表示 */
        /* 伪类,控制链接的属性 */
        
        a.link {
            /* 未点过的状态,a标签*/
            color: teal;
            /* 下划线清除 */
            text-decoration: none;
        }
        
        a.visited {
            /* 已经访问过的状态,a标签*/
            color: tomato;
        }
        
        a:hover {
            /* 移入鼠标移动到目标时的状态,a可以换成各个标签不单单局限与a标签*/
            color: violet;
            /* 加入下划线 */
            text-decoration: underline;
            font-size: 10px;
        }
        
        a:active {
            /* 按住不动,同上*/
            color: yellow;
        }
    </style>
</head>

<body>
    <!--行内样式,优点.灵活,写哪设置哪优先级高.缺点是没办法重用,仍与内容混淆-->
    <p style="color: red;font-size:50px;">我是段落</p>
    <div>
        俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样俺也一样
    </div>
    <span>1111</span>
    <h1>标题</h1>
    <h2>呵呵</h2>
    <p class="a1">222</p>
    <p class="a1 a2">333</p>
    <a href="">999999</a>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
    action:数据要提交的对象或目的地
    matcod:提交数据的方式,get/post
        get:请求方式,明文传输,不安全,传递数据量少,效率高
        post:不是明文传输,相对安全,传递数据量大,效率低
            向服务端索要数据使用get,发送数据使用post
-->
    <form action="http://www.baidu.com" method="GET">
        <!--
            name和value用于数据提交的时候传递数据
                name = value
            name:就是定义的名字,比如我们写的username,服务端就能用username接收数据
            value:就是框中数据,用户输入的最终会赋值给value属性
            type:定义输入框的类型
                text:普通输入域
                password:密码输入域
            radio:单选,多个radio,name属性必须一致
                checked = "checked"单选框的默认选项
            checkedbox:复选框
                checked = "checked",与单选一致
            file 选择文件,比如文件上传
            button:普通按钮,没有提交功能
            submit:提交按钮,会执行action提交数据
            reset:重置按钮
            image:图片代替按钮
        -->
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="" value="">
        <input type="button" name="" value="">
        <button>提交</button>
    </form>
</body>

</html>