JavaWeb之Js和Css

最新推荐文章于 2023-09-25 16:54:28 发布

我是星星我会发光i

最新推荐文章于 2023-09-25 16:54:28 发布

阅读量1w

点赞数

分类专栏： JavaWeb系列文章标签： JavaWeb之js和Css

我是星星我会发光

本文链接：https://blog.csdn.net/weixin_43233971/article/details/100127907

版权

JavaWeb系列专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css:
   层叠样式表
   作用:
       渲染页面
       提供工作效率,将html和样式分离
   和html的整合

  方式1:内联样式表
            通过标签的style属性  <xxx style="..."/>
        方式2:内部样式表
            通过head的子标签Style子标签
                <style type="text/css">
                    选择器{
                        属性:值;
                        属性1:值1;
                    }
                </style>
        方式3:外部样式表
            有一个独立css文件.后缀名:.css
            在html中通过link标签导入

   选择器:
       id选择器
            html元素有id属性且有值   <xx id="d1">
            css中通过 # 导入   #d1{...}
        类选择器
            html元素有class属性且有值 <xx class="c1">
            css中通过 . 导入    .c1{...}
        元素选择器
            css中通过标签名即可 xx{...}
        属性选择器
            html元素有一个属性且有值 <xx att="val1">
            css中通过元素名[属性="值"]使用   xx[att="val1"]{...}
        后代选择器
            选择器后代选择器
        锚伪类
在支持 css 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示链接不同状态的伪类就是锚伪类。


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>test</title>
            <style>
                body {color: grey;}
                a {color: red;}
                a:link {color: green;} /* 未访问的链接 */
                a:visited {color: blue;} /* 已访问的链接 */
                a:hover {color:orange;} /* 鼠标移动到链接上 */
                a:active {color: yellow;} /* 选定的链接 */
            </style>
        </head>
        <body>
            <a href="http://www.baidu.com">test</a>
        </body>
        </html>

这几个伪类必须按照一定的顺序(l-v-h-a)，a:hover必须被置于a:link和a:visited之后，才是有效的；a:active必须被置于a:hover之后，才是有效的。

最后再强调一遍，书写顺序很重要：a:link - a:visited - a:hover - a:actived。

字体文本背景列表分类(

clear display:none block inline

)

   框模型:
       一个元素外边有内边距边框外边距
       顺序:上右下左
js
   javascript 脚本语言解释性基于对象事件驱动函数
   js的组成:
       ECMAScript(语法)
       BOM(浏览器对象模型)
       DOM(文档对象模型)
   html和js的整合

方式1:内部编写js

  <script type="text/javascript">js代码</script>

方式2:
           外部有一个独立的js文件后缀名:.js
           在html中通过script的src属性导入

 <script src="js的路径"></script>

       注意:
           一旦使用了src属性,那么script标签体中的js代码将不再执行了.
   变量:
       var 变量名=初始化值;
   数据类型:
       原始类型(5种)

 Undefined
 Null
 String 用引号引起来的内容
 Number
 Boolean

通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.
               typeof 变量|值
       引用类型
   运算符:
       关系运算符:
           两边值都是字符串,比较ascii码
           两边都是数字,和java一样
           一边是数字,一遍是字符串形式的数字, 可以比较
           一边是数字,一遍是普通字符串可以比较值永远是false
       等性运算符
           "66"==66 true
           "666"===666 false
   js的语句
       if while for 和java一样

 获取元素:
        var obj=document.getElementById("id值");
    获取元素的value属性
        var val=document.getElementById("id值").value;
    设置元素的value属性    
        document.getElementById("id值").value="sdfsdf";
    获取元素的标签体 
        var ht=document.getElementById("id值").innerHTML;
    设置元素的标签体
        document.getElementById("id值").innerHTML="ssss";

定义函数:

        方式1:
        function 函数名(参数列表){函数体}
        方式2:
            var 函数名=function(参数列表){函数体}
        注意:
            函数声明的时候不用声明返回值类型
            参数列表上不要写参数类型
            通过return结束方法和将值返回

   事件:

        onclick 单击
        onsubmit 表单提交
        onload  页面加载成功或者元素加载成功

事件和函数绑定

        方式1:通过元素的事件属性
            <xxx onxxx="函数名(参数列表)">
        方式2:派发事件
            document.getElementById("id值").onxxx=function(){...};
            document.getElementById("id值").onxxx=函数名;

我是星星我会发光i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之Js和Css

css: 层叠样式表作用: 渲染页面提供工作效率,将html和样式分离和html的整合方式1:内联样式表通过标签的style属性 <xxx style="..."/> 方式2:内部样式表通过head的子标签Style子标签 ...
复制链接

扫一扫