前端css+html+布局笔记

所需积分/C币:43 2017-09-14 20:03:59 1.44MB XMIND
49
收藏 收藏
举报

详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性中 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入 将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 基本语法 选择器 通过选择器可以选中页面中的一组元素,然后为其设置样式 元素选择器 根据标签名,选中页面中的指定元素 语法:标签名{ } 例子: div{} p{} h1{} id选择器 根据元素的id属性值选中一个唯一的元素 语法:#id {} 例子: #box1{} #hello{} 类选择器 根据元素的class属性值,选中一组元素 语法:.class{} 例子: .hello{} .box{} 通配选择器 选中页面中的所有元素 语法:*{} 通配选择器的性能比较差,尽量避免使用 并集选择器 可以同时选中符合多个选择器的元素 语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选中满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} 后代元素选择器 选中指定元素的指定后代元素 语法:祖先元素 后代元素{} 例子: div span {} div p{} 子元素选择器 选中指定元素的指定子元素 语法:父元素 > 子元素 {} 例子: div > span {} div > p{} 声明块 声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式,实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 color:red; font-size:20px; 元素之间的关系 父元素 直接包含子元素的的元素叫做父元素 子元素 直接被父元素包含的元素叫做子元素 祖先元素 直接或间接包含后代元素的元素叫做祖先元素,父元素也是祖先元素 后代元素 直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素 兄弟元素 拥有相同父元素的元素叫做兄弟元素 块元素和内联元素 块元素 块元素会独占页面中的一行,无论他的内容的多少 一般使用块元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小,不会独占一行 内联元素也叫行内元素(inline) 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用块元素去包裹内联元素,而不会使用内联去包裹块元素 a元素可以包含任意元素,除了a本身 p元素不能包含任何块元素 伪类和伪元素

...展开详情
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • GitHub

  • 签到新秀

  • 分享精英

关注 私信
上传资源赚钱or赚积分
最新推荐
前端css+html+布局笔记 43积分/C币 立即下载
1/0