CSS笔记

2021-07-13 20:07

阅读:601

CSS

CSS介绍

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。————百度百科

CSS的使用方式

  1. 在标签中使用“style”属性,如下:style属性 --->

    hellow,world!

  2. 在head标签里面使用style标签,如下:

  3. 链接外部css文件,如下:

css基础选择器

  1. html选择器:
    通过html标签名来选择元素:

    • 所有的html标签都可以当做选择器
    • 无论标签藏多深都会被选中
    • 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。 如下:

    p { color: red; }

  2. id选择器:
    直接选中对应的id:

    • 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。
    • id命名不能随意的命名。id大小写敏感 ,id的名字中可以有数字字母下划线,但是要以字母开头。
    • 但是id名不能够重复

    如下:

    #d1 { color: green; }

  3. class选择器:
    直接选择对应的所有class。

    • 任何的标签都可以使用class属性(class属性也是一个全局属性)
    • class属性名可以重复使用
    • 一个class属性中,可以有多个class属性值。 如下:

    .e1 { color: blue; }

块级元素与行内元素的区别

  1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。

  2. 块级元素会独占一行。而行内元素却部能够独占一行,只能和其他的行内元素共用一行。

  3. 如果块级元素不设置宽度,那么块级元素会自动的沾满父元素的全部宽度。

块级元素和行内元素之间的转换

display: inline; /把块级元素变成了行内元素/

display: block;/将行内元素变成块级元素/

display: inline-block; /行内块元素/

div标签与span标签

  1. 二者都是无意义标签
  2. div 切割 span 跨度
  3. div 块内元素 span 行内元素

通配符*

选择网页中的所有标签*,如下: 

综合选择器

  1. 后代选择器 div p
  2. 交集选择器 h3.test
  3. 并集选择器 div,p
  4. 子(直系儿子)元素选择器 div>p
  5. 序列选择器 ul li:first-child ul li:last-child
  6. 相邻兄弟选择器 div + p
  7. 普通兄弟选择器 div~p

css的继承性和层叠性

  1. 继承:父元素的某些css属性会被子元素无条件的继承过去。关于文字的css属性都可以进行继承:

    color text- line- font-

  2. 层叠 :层叠指的是样式不会被替代只会被覆盖。层叠解决的是css冲突的问题。

权重问题比较

第一步:比较id数量,谁的数量大听谁的 第二步:若id数量相同,则比较class数量,谁的数量大听谁的 第三步:若class数量相同,则比较html数量,谁的数量大听谁的

权重问题总结

第一步:比较有没有被选中 第二步:若都选中了则比较权重,权重不同则谁大听谁的,权重相同则谁写在后面听谁的。 第三步:若都没选中则按照就近原则,谁描述的近听谁的。 第四步,若一样近则比较权重,谁权重大听谁的。,权重相同谁在后面听谁的。

!important 以及需要注意的点

能够把"单独属性"的权重变为无限大。应注意尽量少用,否则就破坏了权重比较规则。

css基础尺寸属性

width,height,line-height,max-width,max-height,min-width,min-height

css伪类

用于超链接的美化。


评论


亲,登录后才可以留言!