css基础与书写规范

2018年4月23日16:28:40 发表评论 249 阅读

笔记

css语法

选择符{属性:属性值}

  1. 通配选择器,写法是“*”,含义就是所有元素,举例:*{font-size:12px;}
  2. 类型选择器,以文档语言对象类型作为选择器,就是使用结构中的元素名称作为选择器,例如:div,p等。说明:所有页面中的元素都可以作为类型选择器。
  3. 包含选择器,写法:选择器1 选择器2,选择器1和选择器2之间用空格分隔,表示所有被选择器1包含的选择器2。举例:div p{font-size:12px;},效果:在所有被div元素包含的p元素中,字体大小都是12px。
  4. ID选择器,语法格式是“#”,加上自定义的ID名称,举例:#你的ID名字{font-size:12px;}
  5. 类选择器,语法格式是“.”,加上自定义的类的名字,举例:.你的类名字{font-size:12px;}
  6. 选择器分组,当多个选择器应用了相同的样式时,可以将选择符用英文逗号分隔的方式合并为一组。写法:选择器1,选择器2,选择器3   ,举例:.name,div,p{font-size:12px;},效果:在类名为name的元素,div和p元素中,文本的字体大小都是12px。

伪类和伪元素

伪类和伪元素也是一种选择器,在页面元素中用来定义超出结构所能标识的样式,伪类是能被支持css的浏览器自动识别的特殊器。伪类写法:选择符 伪类{属性:属性值},举例:a:hover{font-size:12px;},效果:当鼠标指针悬停在有链接的文本上时,文本字体大小为12px。

伪类一般以“:”开头,与类不同的是,伪类和伪元素在css中是指定的,不能随意命名和定义。

继承性

如果某个属性具有继承性,则属性作用在父元素的同时,也会作用于其包含的子元素,举例:

  1. <style>
  2.  div{color:red;}
  3.  </style>
  4. <div>
  5. <p> 苹果</p>
  6. <p>香蕉</p>
  7. <span>西瓜</span>
  8. </div>

效果:苹果 香蕉 西瓜字体的颜色都是红色

注意:不是所有属性都具有继承性

层叠性

浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉,权重高的覆盖权重低的,如果权重高的选择器出现在父元素中,元素会使用最近定义的样式,最近最优先原则。

css命名参考

一个好的命名规则,可以避免重复命名,当某个效果不能正常显示时,寻找相应的css代码就比较方便。

  1. 长名称或词组可以使用中横线来为选择器命名。
  2. 不要随意使用Id,id在JS是唯一的,不能多次使用,而使用类选择器却可以重复使用,所以id应该按需使用,而不能滥用。

块元素和内联元素

有些css只适用于块元素,有些只适用于内联元素。

  1. 块元素,类似于div,p,h1-h6这样的元素,特点是每个块元素都从新的一行开始,可以包含其他的块元素和内联元素。
  2. 内联元素,类似于a,b,span,img这样的元素,特点是和其他元素都在一行上,不可以设置宽高。

css的调用

css调用有3种方法:

  1. 元素中直接使用,写法:<元素名称 style:"属性:属性值"></元素名称>,直接使用样式的语法结构和独立样式表中完全相同。举例:<div style="width:100px; height:100px;">我是在元素中直接使用样式的例子</div>
  2. 从页面头部引用,将css写在页面的head中,然后页面中调用,举例:
    1. <style>
    2.  div{color:red;}
    3.  </style>
    4. <div>
    5. <p> 苹果</p>
    6. <p>香蕉</p>
    7. <span>西瓜</span>
    8. </div>

  3. 采用链接的形式调用。①使用link元素,举例:<link rel="stylesheet" href="你的css路径" type="text/css">  ②使用@import,举例:<style type="text/css"> @import url(你的css文件路径);</style>  这两种方法的区别在于,@import先加载html,后加载css,因此@import引起的css解析延迟会增加页面的留白期,用户体验不好。而link是在页面载入时同时加载。

样式的优先级

元素中直接使用>页面头部引用>链接形式调用

行内样式>ID选择器>伪类>类选择器>类型选择器>通配符

选择器的优先级

ID选择器>类选择器>类型选择器>通配选择器

 

weinxin
来找我玩~
这是我的微信扫一扫~
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛