css学习

标签：引用   webkit   red   提高效率   目的   引擎   ble   css   link   

块级元素：

　　基本：标题标签h1-h6：表示一段文字的主题

　　　　　段落标签p：表示一段文字的内容

　　　　　水平线标签hr：表示一条水平线

　　常用于布局：有序列表：ol-li表示多个并列的列表项，他们之间有明显的先后顺序。

　　　　　　　　无序列表：ul-li表示多个并列的列表项，他们之间没有明显的先后顺序。

　　　　　　　　自定义列表：dl-dt-dd表示描述某个术语或产品的定义。

　　　　　　　　表格：table表示用于描述一个表格，使用规整的数据显示

　　　　　　　　表单：form表示用于描述需要用户输入的页面内容。

　　　　块级元素：div、ul、ol 、li、p、form、h1-h6

行内元素：

图像标签img表示用于在网页中显示图片

范围标签span表示用于标识行内的某个范围

换行标签br表示强制换行显示

输入框标签：input

多行文本域标签：textarea

　　行内元素：a、b、span、i、em、strong、input

块级元素与行内元素的区别：

　　　　　　　　　　　　块级：独占一行，可设置宽高；宽高与内容无关

　　　　　　　　　　　　行内：不能独占一行，不能设置宽高；宽高与内容有关

　　　　　　行内元素不能嵌套块级元素

引用CSS

使用外部样式表（独立CSS文件  ）----eg：

　　特点：实现内容结构和表现形式分离，方便复用和维护

　　使HTML代码更加纯净，有利于程序员和搜索引擎的阅读

　　是开发页面的常规做法

使用内部样式表：（在head中加style标签，在style里写css代码）

　　特点：在某些时候可以提高效率

　　　　　多个页面难以共享样式，不利于程序员和搜索引擎阅读

　　　　     在某些对效率要求苛刻或测试的场景下使用

使用行内样式表：（写在开始标签上）

　　特点：没有了样式表文件，在某些时候可以提高效率

　　　　　多个页面难以共享样式，不利于程序员和搜索引擎阅读

　　　　   在某些对效率要求苛刻或测试的场景下使用

　　　　javascript操作的是行内样

　　　　　　在测试场景下使用

CSS术语：

　　CSS注释：书写方式：/*注释内容*/

　　　　　　　功能：用于描述代码功能

　　CSS规则;由一个一个的规则组成

　　　　　　 每个规则指定了对哪些元素应用什么样式

　　　　h1{color:red;text-align:center;}

选择器：决定样式规则适用于哪些元素

　　元素选择器： 标记名{*声明块*} 所有与该标记名匹配的元素，都将应用声明块中的规则

　　类选择器：.类名{*声明块*} 所有class属性为指定类名的元素，都将应用于声明块中的规则

　　ID选择器：#id{*声明块*} 属性id为指定元素，都将应用于声明块中的规则

　　组合（并集）选择器：在CSS中可以将重复的相同的内容写在一个代码中，目的是为了使代码更加简洁明了

　　伪类选择器：元素名称：伪类名称

　　　　　顺序：a:ink（未访问）

　　　　　　　　a:visited（已访问）

　　　　　　　　a:hover（鼠标悬停）

　　　　　　　　a:active（点击时）

后代选择器：父级元素名称+空格+子级元素名称{声明块}

　　　　　　eg:  div p{color:red;}

　　　　　　　　div span{color:red;}

子级选择器：父级元素名称+">"+子级元素名称{声明块}

　　　　　　eg: div>p{color:red}

属性选择器：

　　input type="text"

格式一：元素名称[属性名称+属性值]{声明块}

　　input [type="text"]{color:red;}设置input属性值为text的样式

　　input::-webkit-input-placeholder{color:...}设置placeholder提示信息的样式

选择以属性值开始的标签：元素名称[属性名称+"^="+属性值]{声明块}

　　input [name^="si"]{color:...}

选择以属性值结束的标签：元素名称[属性名称+"$="+属性值]{声明块}

　　input [name$="chuan"]{color:..}

选择包含属性值的标签：元素名称[元素名称+"*="+属性值]{声明块}

　　input [name*="chuan"]{color:..}

伪元素选择器：

　　：before      eg:em:before{content:"china"} 表示在em之前添加"china"

　　：after      eg:em:after{content:"china"} 表示在em之后添加"china"

 同级选择器：兄弟元素1"+"兄弟元素2

eg:    h1+p   表示选择h1后的同级p元素

父级元素下只存在一个子级时生效： .元素名称 em:only-of-type{color:...}/only-child{color:...}

选择父级元素中第一个/最后一个p:   .元素名称 p:first-child{color:...}/last-child{color:...}

倒序选中相应元素：  .元素名称 p:nth-last-child(){color:...}

css学习

标签：引用   webkit   red   提高效率   目的   引擎   ble   css   link   

原文地址：http://www.cnblogs.com/yuqiuju/p/7712467.html