关于CSS3的学习

发布时间 2023-11-28 09:29:36作者: 数星观月

CSS的普通选择器:标签选择器、id选择器、类选择器、通用选择器(*)、分组选择器(将具有相同样式的元素放在一起,之间用","分隔)。注:类名和id名不能以数字开头。

 

rgba是rgb颜色的扩展,前三个值为三原色和rgb一致,第四个值是设置透明度的,1为完全不透明,0是完全透明为白色。hex颜色是用十六进制来表示颜色。hsl是使用色相、饱和度和明度来指定颜色,hsla再加一个透明度。

 

opacity属性可以设置元素的透明度,值从0到1。需要注意的是这个值会被子元素继承,所以要小心使用。

 

CSS背景属性简写(简写只是罗列了几条关于背景最常用的几个属性值),顺序background:background-color background-image background-repeat background-attachment background-position

 

CSS边框属性简写,顺序border:border-width border-style(必需) border-color。这是设置四条边框的属性,还可以单独设置每一条边框比如border-top等。简写中的每一个属性都可以设置四个值,分别为上右下左顺时针方向。

input输入框默认有实线边框,我们也可以使用border属性来定制我们好看的输入框,也可以定制按钮。

border-radius可以调节圆角边框,如果设置成一个正方形边长的一半,那么就会变成一个圆

 

CSS外边距合并,在垂直方向上,如果有两个margin接触到一起,那么就会合并成一个较大的那个margin。元素自身没有内容,且设置了上下margin那么也会发生合并。

 

CSS中的普通盒子的宽高指的是内容区的宽高,如果加内边距和边框的话就会加在盒子外面,这样排版就会很难受。因此我们可以设置盒子的属性box-sizing:border-box,这样盒子就是一个特殊盒子,外边距和边框会加在盒子里面。

 

CSS中表格因为table和td都设置了边框所以出现了双层边框,我们可以设置table的border-collapse: collapse;来将双边框合并为单边框。

tr后面加上:hover选择器,然后设置背景颜色,这样可以实现鼠标悬停时高亮。

tr后面加上:nth-child()选择器,通过填入参数even(或2n)、odd(或2n+1),然后设置背景颜色,这样可以实现斑马纹表格效果。

 

CSS的display设置元素的呈现方式,元素有默认的呈现方式,但我们可以修改。比如无序列表ul中的li是一个块级元素,但是我们可以li{display:inline},这样就让li水平处在一行内。

CSS的display属性值为none,那么就没有创建这个dom元素,visibility属性值为hidden则是创建了dom元素但看不见。

注意块级元素可以包裹行内元素,但是行内元素不能包裹块级元素。比如要用ul做一个水平导航栏,li可以使用display:inline或float:left的方式使其水平排列,但是我们的水平栏需要一个合适的高,因此li里面包裹的a标签就需要设置为display:block,然后设置内边距、外边距。这里设置li为行内元素就出现问题了,只能让其浮动。

 

CSS定位position,默认值为static,根据页面的正常流定位;relative相对于元素原本的位置进行定位;fixed相对于窗口进行定位;absolute相对于已定位的父元素进行定位,没有定位父元素则相对窗口进行定位;sticky相对于用户滚动位置进行定位,大致相当于relative和fixed切换。top、bottom、left 和 right 属性定位了才生效(static除外,static定位后不生效)

 

清除浮动可以在浮动元素的盒子外面加上一个::after伪类,设置clear:both。

 

div没有设置宽高默认是弹性盒子,会被里面的元素撑开。

 

ul是有默认的margin和padding的,我们一般使用可以将其清除。去除掉无序列表前面的符号使用list-style-type:none。

 

display: inline-block与`display: inline` 相比,主要区别在于 `display: inline-block` 允许在元素上设置宽度和高度。

 

伪类用来定义元素的特殊状态,伪类语法如下。

*selector*:*pseudo-class* {
*property*: *value*;
}

 

`a:hover` 必须在 CSS 定义中的 `a:link` 和 `a:visited` 之后,才能生效!`a:active` 必须在 CSS 定义中的 `a:hover` 之后才能生效!伪类名称对大小写不敏感。