CSS笔记

CSS

CSS介绍

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

CSS的使用方式

1. 在标签中使用“style”属性,如下：style属性 ---> <h1 style="css属性"></h1>

   <h1 style="color:red;">hellow,world!</h1>

2. 在head标签里面使用style标签，如下：

   <style> p { color: blue;} </style>

3. 链接外部css文件，如下:<link rel="stylesheet" href="style.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 行内元素

通配符*

选择网页中的所有标签*，如下： <style> * { color: red; } </style>

综合选择器

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伪类

用于超链接的美化。