码迷,mamicode.com
首页 > Web开发 > 详细

笔记4,初识CSS

时间:2017-11-04 23:42:31      阅读:364      评论:0      收藏:0      [点我收藏+]

标签:通过   式表   通用   head   ast   引用   指定   笔记   结构   

1、CSS(层叠样式表)

2、CSS语法  选择器{属性名1:属性值1  属性名2:属性值2}

3、引用CSS的三种方式

第一种:行内样式  例:<a style="color:red;">内部样式</a>

第二种:内部样式  在head标签中,写入style标签  

例:<head>

  ....

  <style type="text/css">

  h1{......}

  </style>

  </head>

第三种:外部样式

使用步骤:1、创建一个以.css为后缀的文件(CSS文件)

2、在html中通过link引入css文件<link rel="stylesheet" href="css文件路径">

四、基本选择器

1、标签选择器  标签名{}  2、类选择器  .css属性值{}  3、id选择器  #id属性值{}

五、层次选择器

1、后代选择器  父元素 子元素{}  2、子选择器  父元素>子元素{}

3、相邻兄弟选择器  本元素+相邻兄弟元素{}  4、通用兄弟选择器  本元素~兄弟元素{}

六、结构伪类选择器

E F:first-child {} //第一个子元素 

E F:last-child {} //最后一个子元素

E F:nth-child(?){} // ?表示第几个子元素,还可以使odd为奇数,even为偶数

E F:first-of-type {} //指定类型的第一个元素  

E F:last-of-type {} //指定类型的最后一个元素

E F:nth-of-type(?) {} // ?表示指定类型的第几个子元素

注意:E F:nth-child(n)在父级里从一个元素开始查找,不分类型

   E F:nth-of-type(n)在父级里先看类型,再看位置

七、属性选择器

 

作业:每一章的第一个和最后一个联系写在本子上(周上课) 

每周六晚之前,把本章结束的练习的电子文件发过来。(博客地址)

11.6检查笔记

 

笔记4,初识CSS

标签:通过   式表   通用   head   ast   引用   指定   笔记   结构   

原文地址:http://www.cnblogs.com/NIMO-BABY/p/7760023.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!