CSS(Cascading Style Sheets)层叠样式表
通过仅仅编辑一个简单的CSS文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观
-
使用CSS
- 在HTML网页中,加入一个style标签,在这个style标签里写CSS代码
- 直接把style里面的代码放到一个单独的文件中,通过Link标签去引入
- 直接在HTML开始标签的style属性里面去写CSS代码
-
书写规则
选择器{ 属性名称:属性值 ...... }
-
选择器
- id选择器:
#name(id)
唯一的元素或者出现次数很少 - class选择器:
.name(class)
修饰同一类具有相同样式的元素 - 标签选择器:
标签名
选中所有同名标签 - 相邻选择器:选择某个元素后面相邻的元素(用
+
) - 多元素选择器:合并各个选择器之间相同的部分,选择器用
,
隔开 - 后代选择器:选中某标签后代所有指定标签,两个选择器间用空格隔开
- 子元素选择器:选择子元素中符合条件的元素,两个选择器用
>
隔开 - 属性选择器:选择具有某属性的标签.
标签名[属性名]
^
表示以某值开头的元素,$
表示以某值结束的元素.标签名[属性名^=xxx]
- id选择器:
-
伪元素:用来添加一些选择器的特殊效果。伪元素可以创建一些文档语言无法创建的虚拟元素。比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter、::first-line)。同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after。
:first-line
向文本的首行设置特殊样式:first-letter
向文本的首字母设置特殊样式:before
在元素的内容前面插入新内容:after
在元素的内容之后插入新内容:link
选择所有未访问链接:visited
选择所有访问过的链接:active
选择正在活动的链接:hover
把鼠标放在链接上的状态:focus
选择元素输入后具有焦点(如给input设置点击出现红色背景)
-
伪类:用来添加一些选择器的特殊效果。伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种:- 格式化DOM树以外的信息。比如: <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
- 不能被常规CSS选择器获取到的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。
:checked
选择所有选中的表单元素:disabled
选择所有禁用的表单元素:empty
选择所有没有子元素的P元素:enabled
选择所有启用的表单元素:invalid
选择所有无效的元素:valid
选择所有有效值的属性
-
overflow
控制内容溢出元素框时在对应的元素区间内添加滚动条visible
内容会被修剪,会呈现在元素框之外hidden
内容会被修剪,并且其余内容是不可见的scroll
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容auto
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容inherit
规定应该从父元素继承overflow的值
-
margin
外边距- margin有默认值
- 如果设置了上下两个盒子的margin,距离以大的为准
- 盒子居中:
margin:auto
- myibn简写:
一个参数:上下左右
两个参数:上下+左右
三个参数:上+左右+下
四个参数:上+右+下+左
-
padding
会扩大盒子的大小,所以padding增加多少相应盒子的高度就要减少多少 -
display
可以表示块级元素和行级元素 -
设置最小宽度:如果缩放到最小宽度,会出现滚动条,大于最小宽度会撑满整个窗口
-
ul
进行CSS设置时每个li
长度为最长的长度,如果没有内容,则默认为1个的大小 -
清除浮动一般形式:
.clearfix{ *zoom:1;} .clearfix:after{ content:".";display:block;height:0;visibility:hidden;clear:both;}
其中的
visibility:hidden
和display:none
有区别:任然占据空间只是看不到
整段代码相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both
来达到清除浮动的效果 -
常见元素:
-
inline:a,span,br,i,em,strong,label,q,var,cite,code
-
inline-block:img,input
-
block:p,div,p,h1…h6,ol,ul,dl,table,address,blockquote,form
-
-
cursor:pointer
移动鼠标上去变成手的状态 -
letter-spacing
字间距 -
line-height
行间距