前端学习笔记_css(1)

如何理解css呢?

css是层叠样式表(Cascading Style Sheet)。

如何使用?

  • 行内样式:
  <div style="color:red">hello world</div>
  • 嵌入样式:
  <style>
        *{margin: 0;border: 0;}
        body,html{height:100%;}
  </style>
  • 外联样式
  <link rel="stylesheet" href="text.css">

css基础语法

选择器{属性:值;属性:值}

 p{font-size:15px;color:red;}

css常用选择器

ID选择器(#)
类选择器( . )
标签名选择器( p{} )
群组选择器(h1,div,p{})
后代选择器(div p{})

选择器的优先级

!important
行内:1000
ID:100
class,伪类,属性:10
元素:1
* : 0

css3新增的选择器

  • 同级元素通用选择器:
    E ~ F

  • 属性选择器:
    E[att=" val "]
    E[att^=" val "]
    E[att$=" val "]
    E[att*=" val "]

  • 与用户界面相关的伪类
    E:enabled
    E:enabled
    E:checked
    E:selection

  • 结构性伪类
    E:root
    E:nth-child(n)
    E:nth-last-child(n)
    E:last-child
    E:nth-of-type(n)
    E:nth-last-of-type(n)
    E:first-of-type
    E:last-of-type
    E:only-child
    E:only-of-type
    E:empty
    E:not(s)

ie的条件测试

<!--[if lte ie 9]>
    <style>
        body{
            background:deeppink;
        }
    </style>
<![endif]-->

hack

div{
    color: deeppink;  
    *color: blue;  /* ie6 7 */
    _color: red;   /* ie6 */
}

@media screen and (-webkit-min-device-pixel-ratio:0){    //争对chrome
    div{
        color: lime;
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择器 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一、元素选择符 通配选择符 (*):选择所有...
    云外之境阅读 1,914评论 0 0
  • 插入样式的三种方法 内联样式表(行内) 内部样式表(style中) 外部样式表创建一个外部样式表在head中使用l...
    Zd_silent阅读 269评论 0 0
  • 基本选择器 *{} 通配符选择器,适用任何元素h1 标签选择器,选择h1标签内元素....
    字母31阅读 646评论 0 0
  • 基本选择器 * 通用选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签的元素 .class class选择器...
    疯狂的潜水员阅读 618评论 0 2
  • 文 / 典典的蟹妈 前情提要:花儿牵住牛郎衣 又是一年七夕节。 今年不同于往年,织女由于上班时间干私活,偷用王母的...
    典典的蟹妈阅读 641评论 4 10