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="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伪类
用于超链接的美化。