4css

版权声明:本BLOG上原创文章未经本人许可,不得用于商业用途及传统媒体。网络媒体转载请注明出处,否则属于侵权行为。 https://blog.csdn.net/leishao_csdn/article/details/73718880

css

复习

1. 什么是css?

层叠样式表:层叠样式只会被覆盖,不会被替代。

2. css的使用方式

  • style属性:<h1 style="css属性"></h1>
  • style标签:head标签里面
  • link:<link rel="stylesheet" herf="style.css">

3.基础选择器

html选择器

通过html标签名来选择元素

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

id选择器

  1. 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。大小写敏感,id的名字中可以有数字字母下划线,但是要以字母开头。(驼峰命名法分为小驼峰命名和大驼峰命名:testheader小驼峰;TestHeader大驼峰;test-header test_header)
  2. id名不能够重复

class 选择器

  1. 任何的标签都可以使用class属性(class属性也是一个全局属性)
  2. class属性名可以重复使用
  3. 一个class属性中,可以有多个class属性值


综合选择器

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

继承与层叠

1. 继承

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

2. 层叠

层叠解决的是css冲突的问题。
!important 能够把“单独属性”的权重变为无限大。(尽量少用)

块级元素与行内元素

div 块级元素
span 行内元素

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

  1. 行内元素不能够设置宽度和高度,行内元素的高度与宽度是标签内容的高度和宽度,块级元素可以设置高度与宽度。
  2. 块级元素会独占一行,而行内元素却不能够独占一行,只能和其他的额行内元素共用一行。
  3. 如果块级元素 不设置宽度,那么块级元素会自动的占满父元素的全部宽度。

块级元素和行内元素之间的转换:
display: inline block inline-block

猜你喜欢

转载自blog.csdn.net/leishao_csdn/article/details/73718880
css