A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小蜀哥哥 于 2018-3-1 15:18 编辑

大家好,今天咱们来学习第二节的课程内容,内容呢比较少,主要是学习CSS,CSS里面的知识咱们大多数在以后开发中用的比较少,但是有些知识点还是需要掌握的,那话不多说,咱们就一起来看看吧。

1.html的框架标签
        <frameset rows=”15%, *”>
                <frame src=”top.html” name=”top”/>
                <frameset cols=”15%, *”>
                        <frame src=”left.html” name=”left”>
                        <frame src=”right.html” name=”right”>
                </frameset>
        </frameset>

2.div标签和span标签
        div和span这两个标签都是块级标签

        他们两个标签的区别是什么呢?
                div后面带换行
                span后面不带换行

3.style属性
        比如:
                <div style=”color:red; background:green; width:300px;”>第一个div</div>
                <div style=”color:green; background:red; width:400px;”>第二个div</div>
                这里面要注意一下,咱们写的style属性里的值是需要加像素的,而不写在style属性里的值是不需要加像素单位的。

        字体:
                color 字体颜色
                <div style=”color:red”>第一个div</div>
                <div style=”color:green”>第二个div<div>
                font 字体大小,样式等
                <div style=”color:red; font:10px”>第一个div</div>
                <div style=”color:green; font:10px”>第二个div</div>

        文本:
                text-align 文本对齐方式
                <div style=”text-align:center”>第一个div</div>
                text-decoration 文本装饰,比如下划线,删除线等

        背景:
                background 背景颜色,图片等

        尺寸:
                width 宽度
                height 高度

        定位:
                position 定位方式
                left x轴坐标
                top y轴坐标
                z-index z轴坐标
                记住一个口诀:子绝父相

        边框:
                border 边框

        布局:
                display 显示与隐藏

        外补丁:
                margin-top 上
                margin-right 右
                margin-bottom 下
                margin-left 左

4.什么是css
        级联样式表,一种用来控制html样式的语言

5.css的好处是什么
        将样式代码和html代码分离,简单灵活

6.css的定义格式
        第一种:
                上面的style属性的写法,也算是一种css定义写法
                缺点:比如每一个div里面都要写一个style属性,如果一个页面里面有n多个div标签,而且这些div的样式值是一样的,重复性太大,还麻烦,并且修改样式也麻烦,维护起来也不方便。如果针对每一个不同的标签样式不一样,可以使用它。

        第二种:
                使用style标签,写在head标签内
                <style type=”text/css”>
                        选择器 {
                                属性名:属性值;
                                属性名:属性值;
                                … …
                        }
                </style>
                如果针对每一个不同的页面样式不一样,可以使用它

        第三种:
                使用import来引入css文件
                <style type=”text/css”>
                        @import url(theme.css);
                </style>
                已经不推荐使用

        第四种:
                使用link标签来引入css文件
                <link rel=”stylesheet” type=”text/css” href=”theme.css”>
                推荐使用,如果不同的html文件里面的div都使用相同的属性值的话,有一个css文件可以供他们所有html引用,简单方便

7.css的选择器
        常用的几种选择器:
        元素选择器(类型选择器):
                标签名 {
                }

        id选择器:
                #id名 {
                }

        类选择器:
                .class名 {
                }

        属性选择器:
                input[属性名] {
                }

                input[属性名=属性值] {
                }

        后代选择器(包含选择器):
                body p {
                }

        子元素选择器:
                body > p {
                }

        组合选择器:
                标签名,#id名,.类名 {
                }

        伪类选择器:
                a:link 超链接未点击状态
                a:hover 游标移到超链接上的状态(未点击)
                a:active 点击超链接时的状态
                a:visited 被访问后的状态

8.css的浮动
        css浮动很难,我们只是使用很肤浅的浮动只是,大家不要往深里搞,会死人的
        向左浮动:
                float:left;
        清除浮动:
                清除左悬浮:
                clear:left;
                清除右悬浮:
                clear: right;
                清除左边和右边悬浮:
                clear: both;

以上就是css的简单的知识点,大家只需要熟悉这些知识点就行,因为比较简单也并不是那么重要,所以也没有代码或者图片演示,但是大家自己在学习css的时候,还是要自己敲一边练练手,看看样式的演示效果就可以了。下次咱们再见吧。

3 个回复

倒序浏览
棒棒的哦~
赞赞赞~
回复 使用道具 举报
回复 使用道具 举报
java入门跟我来第二篇,导师辛苦咯  
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马