首页 > Web开发 > 详细

css学习

时间:2017-10-23 00:19:51      阅读:271      评论:0      收藏:0      [点我收藏+]

块级元素:

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

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

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

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

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

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

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

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

    块级元素:divulol lipformh1-h6

行内元素:

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

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

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

输入框标签:input

多行文本域标签:textarea

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

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

            块级:独占一行,可设置宽高;宽高与内容无关

            行内:不能独占一行,不能设置宽高;宽高与内容有关

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

 

 

引用CSS

使用外部样式表(独立CSS文件  <link>)----eg:<link rel="stylesheet" href="main.css">

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

  使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学习

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!