css基础知识

前言:最近需要对刚入门的同学培训,于是整理一下css基础知识

1.css

  • CSS 指层叠样式表(Cascading Style Sheets)
  • CSS 同时控制整个站点的样式和布局。
  • CSS 可以帮助我们实行表现与结构分离的开发模式。

2.语法

  • css 样式由选择符和声明组成,而声明又由属性和值组成

[图片上传失败...(image-d2f1a3-1525313132125)]

注意:

  • 最后一条声明可以没有分号,建议加上分号。
  • 推荐写法格式如下:
/*这是注释*/
p{
   font-size:12px;
   color:red;
}

3.css样式使用

  • 插入css代码形式有

    • 内联式
    • 嵌入式
    • 外部样式表
  • 内联式:把css代码直接写在现有的HTML标签中

这里文字是红色。

  • 嵌入式:css样式代码写在标签之间

  • 外联样式表:css代码写一个单独的外部文件中,使用标签将css样式文件链接到HTML文件内

注意:

  • 标签位置一般写在标签之内。
  • 三种样式的优先级:内联式 > 嵌入式 > 外部式(就近原则:离被设置元素越近优先级别越高)

4.选择器

  • 常用选择器

    • id选择器 #id{}
    • 类选择器 .id{}
    • 元素选择器 body{}
    • 后代选择器 div p{}
    • 子选择器 div>p{}
    • 属性选择器 input[type="text"] {}
    • 伪类选择器 a:hover {}
    • 通用选择器 *{}
    • ...
  • 选择器优先级

    CSS三大特性—— 继承、 优先级和层叠

    • 继承:即子类元素继承父类的样式
    • 优先级:是指不同类别样式的权重比较;
    • 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。
  1. 继承:即子类元素继承父类的样式

我是爸爸我是儿子

  1. 优先级:是指不同类别样式的权重比较
h1{
    color:blue
}

.red{
    color:red
}

哈哈哈hh

  • 权值:
    • 内联样式:1000
    • id选择器:100
    • 类和伪类选择器:10
    • 元素选择器:1
    • 通用选择器:0
    • 继承的样式:无

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

p{color:red;} /*权值为1*/
p span{color:green;}/*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
  1. 层叠:在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}

哈哈哈

//green

权值相同,后面的样式会覆盖前面的样式。

  1. !important:特殊的情况需要为某些样式设置具有最高权值,分号的前面
    写上!important
p{color:red!important;}
p{color:green;}

哈哈哈

//red

!important具有最高权值

5.css盒子模型

元素分类

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

  • 常用的块状元素有:

...

      、、
      1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
      2. 元素的高度、宽度、行高以及顶和底边距都可设置
      • 常用的内联元素有

      1. 和其他元素都在一行上
      2. 元素的高度、宽度及顶部和底部边距不可设置
      • 常用的内联块状元素有(同时具备内联元素、块状元素的特点):
      
      

      盒子模型

      css3新增属性:box-sizing

      • box-sizing:content-box;表示标准的盒子模型,
      • box-sizing:border-box表示IE盒子模型。
      • 默认的情况下是标准盒子模型。

      应用:当你想要设置宽高后,改变border,padding不会改变盒子宽高即可设置box-sizing:border-box

      你可能感兴趣的:(css基础知识)