CSS - 随笔分类 - 鸿钧老祖

css笔记19：浮动的案例

摘要：案例一：1. 首先是01.html文件：无标题文档 1div 2div 3div 4div 5div 6div2. 然后01.css文件：@charset "utf-8";/* CSS Document */.div1 { width:800px; height:800px;... 阅读全文

posted @ 2015-07-07 09:37 鸿钧老祖阅读(224) 评论(0) 推荐(0) 编辑

css笔记18：盒子模型案例分析示范

摘要：阅读全文

posted @ 2015-07-06 21:13 鸿钧老祖阅读(179) 评论(0) 推荐(0) 编辑

css笔记17：盒子模型加强版的案例

摘要：1.先看看经典案例效果图，导出思路：分析：思路基本结构 ………… 2.案例演示：（1）box2.html盒子模型加强（2）box2.css@charset "utf-8";/* CSS Document */.div1 { width:500px; height:600... 阅读全文

posted @ 2015-07-06 20:59 鸿钧老祖阅读(189) 评论(0) 推荐(0) 编辑

css笔记16：盒子模型的入门案例

摘要：1.案例一：效果图如下：（1）box1.html盒子模型经典案例 2.box1.css@charset "utf-8";/* CSS Document */body { border: 1px solid red; /*1px 表示边框的宽度 solid 表示实线 red 表示颜色，... 阅读全文

posted @ 2015-07-06 19:35 鸿钧老祖阅读(182) 评论(0) 推荐(0) 编辑

css笔记15：盒子模型

摘要：1.流流：html元素在网页中显示的顺序标准流：在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示。非标准流：在html之中，当某个元素脱离了标准流，那么它处于非标准流2.盒子概念要弄清盒子模型这个概念，就必须先明白下面这个几个概念：在网页设计中常听的属性名：内容（co... 阅读全文

posted @ 2015-07-06 18:37 鸿钧老祖阅读(161) 评论(0) 推荐(0) 编辑

css笔记14：css文件之间可以相互引用

摘要：css文件之间相互引用是通过@import指令完成的格式： @import url（"被引用的css文件"）;顺便说一句，如果希望在html或者php文件中引用某个xxx.css也是可以的在阅读全文

posted @ 2015-07-06 16:49 鸿钧老祖阅读(658) 评论(0) 推荐(0) 编辑

css笔记13：display用法

摘要：1.代码演示：element.html如下：display span1 span2 div1 div2同时element.css文件，如下：@charset "utf-8";/* CSS Document */.s1 { background-color:pin... 阅读全文

posted @ 2015-07-06 16:36 鸿钧老祖阅读(175) 评论(0) 推荐(0) 编辑

css笔记12：块元素和行内元素

摘要：1.概念：行内元素：又叫内联元素，内联元素只能容纳文本或者其他内联元素，常见的内联元素有块元素：块元素一般都是从新行开始，可容纳文本，其他内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。常见的块元素2.代码演示1：（1）exam.html块元素和行内元素使用方法--> ... 阅读全文

posted @ 2015-07-06 15:48 鸿钧老祖阅读(213) 评论(0) 推荐(0) 编辑

css笔记11：选择器练习

摘要：1.（1）exam1.css文件：.s1 { font-size: 50px; color: blue;}.s2 { backgoround:gray; font-style: italic; color: red;}.s3 { background-color:... 阅读全文

posted @ 2015-07-06 12:58 鸿钧老祖阅读(212) 评论(0) 推荐(0) 编辑

css笔记10：多个id选择器/类选择器包含相同部分问题的探讨

摘要：有些时候，我们可以将多个class选择器或者id选择器，html选择器的共同部分提取出来，写在一起，这样的好处是是可以简化css文件1.首先我们先看一段代码.css,如下：@charset "utf-8";/* CSS Document *//*招生广告*/.ad_stu { width: 1... 阅读全文

posted @ 2015-07-06 12:43 鸿钧老祖阅读(773) 评论(0) 推荐(0) 编辑

css笔记09：选择器优先级

摘要：1.（1）选择器你好，北京！新闻1 新闻2 新闻3 新闻4 新闻5 这是一则非常重要的新闻 goto sohu goto sina(2).my.css文件如下：@charset "utf-8";/* CSS Document *//*html的选择器*/body ... 阅读全文

posted @ 2015-07-06 12:18 鸿钧老祖阅读(175) 评论(0) 推荐(0) 编辑

css笔记08：id选择器之父子选择器

摘要：1.父子选择器（1）01.html选择器你好，北京！新闻1 新闻2 新闻3 新闻4 新闻5 这是一则非常重要的新闻这是一则非常重要的新闻 goto sohu goto sina（2）my.css@charset "utf-8";/* CSS Doc... 阅读全文

posted @ 2015-07-06 11:04 鸿钧老祖阅读(769) 评论(0) 推荐(0) 编辑

css笔记07：通配符选择器

摘要：通配符选择器： 1 * { 2 margin：10px ;//默认四个位置参数全为零 3 4 margin-top：10px;//分别设置四个参数 5 margin-left：10px; 6 margin-right：0px; ... 阅读全文

posted @ 2015-07-06 10:21 鸿钧老祖阅读(208) 评论(0) 推荐(0) 编辑

css笔记06：层叠样式选择器

摘要：1.(1)HTML文件 1 2 3 4 5 选择器 6 7 8 9 10 Specificity is determined by now specific the selector is.11 A specific selector wins12 over a ... 阅读全文

posted @ 2015-06-30 11:01 鸿钧老祖阅读(181) 评论(0) 推荐(0) 编辑

css笔记05：表单

摘要：1. 1 2 3 4 22 23 24 25 26 27 28 29 30 31 确认提交32 33 34 35 36 效果图：2. 1 2 Contact Form 3 Please fill all the text... 阅读全文

posted @ 2015-06-30 08:26 鸿钧老祖阅读(197) 评论(0) 推荐(0) 编辑

css笔记04：属性选择器

摘要：1.属性选择器：带有 title 属性的所有元素设置样式： 1 2 3 4 10 11 12 13 可以应用样式：14 Hello world15 W3School16 17 18 19 无法应用样式：20 Hello world21 W3School22 23 2.属性和值选择器：下面的例子... 阅读全文

posted @ 2015-06-30 08:17 鸿钧老祖阅读(190) 评论(0) 推荐(0) 编辑

css笔记03：伪类first-child

摘要：1.匹配第一个元素在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：some textsome text2.匹配所有元素中的第一个元素some text. some text.some text. some text.3.匹配所有作为第一个子元素的元素中的所有元素... 阅读全文

posted @ 2015-06-29 20:47 鸿钧老祖阅读(177) 评论(0) 推荐(0) 编辑

css笔记02：选择器（标签式和类）

摘要：body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: 12px sans-serif;}这里body就是选择器，这里将margin... 阅读全文

posted @ 2015-06-29 18:22 鸿钧老祖阅读(180) 评论(0) 推荐(0) 编辑

css笔记01：CSS例子

摘要：body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: 12px sans-serif;}（1）margin和padding的区别用... 阅读全文

posted @ 2015-06-29 18:08 鸿钧老祖阅读(171) 评论(0) 推荐(0) 编辑

随笔分类 - CSS