首页 > 代码库 > CSS笔记
CSS笔记
CSS
CSS介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。————百度百科
CSS的使用方式
-
在标签中使用“style”属性,如下：
style属性 ---> <h1 style="css属性"></h1><h1 style="color:red;">hellow,world!</h1> -
在head标签里面使用style标签，如下：
<style> p { color: blue;} </style> -
链接外部css文件，如下:
<link rel="stylesheet" href="http://www.mamicode.com/style.css">
css基础选择器
-
html选择器:
通过html标签名来选择元素：- 所有的html标签都可以当做选择器
- 无论标签藏多深都会被选中
- 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。 如下：
p { color: red; } -
id选择器:
直接选中对应的id:- 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。
- id命名不能随意的命名。id大小写敏感 ，id的名字中可以有数字字母下划线，但是要以字母开头。
- 但是id名不能够重复
如下：
#d1 { color: green; } -
class选择器：
直接选择对应的所有class。- 任何的标签都可以使用class属性(class属性也是一个全局属性)
- class属性名可以重复使用
- 一个class属性中，可以有多个class属性值。 如下：
.e1 { color: blue; }
块级元素与行内元素的区别
-
行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
-
块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
-
如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。
块级元素和行内元素之间的转换
display: inline; /把块级元素变成了行内元素/
display: block;/将行内元素变成块级元素/
display: inline-block; /行内块元素/
div标签与span标签
- 二者都是无意义标签
- div 切割 span 跨度
- div 块内元素 span 行内元素
通配符*
选择网页中的所有标签*，如下： <style> * { color: red; } </style>
综合选择器
- 后代选择器 div p
- 交集选择器 h3.test
- 并集选择器 div,p
- 子（直系儿子）元素选择器 div>p
- 序列选择器 ul li:first-child ul li:last-child
- 相邻兄弟选择器 div + p
- 普通兄弟选择器 div~p
css的继承性和层叠性
-
继承：父元素的某些css属性会被子元素无条件的继承过去。关于文字的css属性都可以进行继承：
color text- line- font- -
层叠 :层叠指的是样式不会被替代只会被覆盖。层叠解决的是css冲突的问题。
权重问题比较
第一步：比较id数量，谁的数量大听谁的 第二步：若id数量相同，则比较class数量，谁的数量大听谁的 第三步：若class数量相同，则比较html数量，谁的数量大听谁的
权重问题总结
第一步：比较有没有被选中 第二步：若都选中了则比较权重，权重不同则谁大听谁的，权重相同则谁写在后面听谁的。 第三步：若都没选中则按照就近原则，谁描述的近听谁的。 第四步，若一样近则比较权重，谁权重大听谁的。，权重相同谁在后面听谁的。
!important 以及需要注意的点
能够把"单独属性"的权重变为无限大。应注意尽量少用，否则就破坏了权重比较规则。
css基础尺寸属性
width，height，line-height，max-width，max-height，min-width，min-height
css伪类
用于超链接的美化。
CSS笔记