CSS笔记-狂神

1、什么是CSS

如何学习

  • CSS是什么
  • CSS怎么用(快速入门)
  • CSS选择器(重点+难点)
  • 美化网页(文字,阴影,超链接,列表,渐变…)
  • 盒子模型
  • 浮动
  • 定位
  • 网页动画(特效效果)

1.1、什么是CSS

Cascading Style Sheet层叠样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动

1.2、发展史

CSS1.0
CSS2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
CSS2.1:浮动,定位
CSS3.0:圆角、阴影、动画…浏览器兼容性~

1.3、快速入门


"en">

    "UTF-8">
    Title
    
    



    

CSS测试

建议使用这种规范
CSS笔记-狂神_第1张图片
CSS的优势:

1、内容和表现分离;
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录!

1.4、CSS的3种导入方式




    
    Title

    
    

    
    "stylesheet" href="css/style.css" />





"color: red">这是标签

拓展:外部样式两种方法

  • 链接式

html


    "stylesheet" href="css/style.css" />
  • 导入式

@import是CSS2.1特有的!


    

2、选择器

作用:选择页面上的某一个或者某一类元素

2.1、基本选择器

1、标签选择器:选择一类标签 标签{}




    
    Title
    


标签选择器

2、类 选择器class:选择所有class一致的标签,跨标签,格式:.类名{}


"en">

    "UTF-8">
    Title

    


"demo1">类选择器:demo1

"demo2">类选择器:demo2

"demo3">类选择器:demo3

3、id 选择器:全局唯一,格式:#id名{}


"en">

    "UTF-8">
    Title
    



"demo1">id选择器:demo1

"demo2" id = "demo2">id选择器:demo2

"demo2">id选择器:demo3

id选择器:demo4

id选择器:demo5

优先级:id > class > 标签

2.2、层次选择器

1.后代选择器:在某个元素的后面

/*后代选择器*/

CSS笔记-狂神_第2张图片
2.子选择器,一代

/*子选择器*/

CSS笔记-狂神_第3张图片
3.相邻的兄弟选择器 同辈

/*相邻兄弟选择器:只有一个,相邻(向下)*/



	

"active">p1

p2

CSS笔记-狂神_第4张图片
4.通用选择器



	

"active">p1

p2

CSS笔记-狂神_第5张图片

html


"en">

    "UTF-8">
    Title
    


p0

"active">p1

p2

p3

  • p4

  • p5

  • p6

p7

p8

2.3、结构伪类选择器

伪类



"en">

    "UTF-8">
    Title

    
    


    
    

p1

p2

p3

  • li1
  • li2
  • li3
"">链接标签

2.4、属性选择器(常用)

id + class结合




    
    Title
    



"demo"> "http://www.baidu.com" class="links item first" id="first">1 "/adad/faf" class="links item2 first2" >2 "qwe123" class="links item3 first3" >3 "eweqe" class="links item4 first4" >4 "rrrrr" class="links item5 first5" >5 "ttt" class="links item6 first6" >6 "yyy" class="links item7 first7" >7

在这里插入图片描述

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

你可能感兴趣的:(前端,css)