CSS基础知识01

时间:2021-10-02 15:54:48

一、CSS基础知识介绍

1.css是cascading style sheet层叠式样式表的简写

2.css小用法

加粗:font-weight:bold;             正常用:normal;

斜体:font-style:italic;               正常用:normal;

下划线:text-decoration:underline;        正常用:none;

加粗快捷键:fwb+tab

不加粗快捷键:fwn+tab

斜体快捷键:fsi+tab

不斜体快捷键:fsn+tab

下划线快捷键:tdu+tab

没有下划线快捷键:tdn+tab

3.class类

1)class可以重复,同一个页面能有多个标签同时属于某一个类。

2)同一个标签可以同时携带多个类,用空格隔开。

注意:在页面中尽量用class,id是js用的,js要通过id属性得到标签。

二、CSS的高级选择器

1.交集选择器

交集选择器可以连续交,例如:

html:

<h3 class="spacial zhangyao">

<h3 class="spacial">

css:

h3.spacial.zhangyao {    }

选择的元素同时满足两个条件:必须是h3标签,然后必须是special标签,交集选择器没有空格。

2.通配符*

*就表示所有元素,效率不高,尽量不要使用。

3.css的继承性和层叠性

可继承的属性:

color、text-开头的、line-开头的、font-开头的

这些关于文字样式的都能够继承;所有关于盒子的、定位的、布局的属性都不能继承。

层叠性

4.权重问题大总结

1)先看有没有选中的,如果选中了,那么就以(id数、类数、表签数)来计权重。谁大听谁的,如果都一样,挺后写的为准。

2)如果没有选中,那么权重是0。如果大家都是0,就近原则。

5.important属性

k:v!important;  来给一个属性提高权重,无穷大。

强调3点:

1)!important 提升的是一个属性,而不是一个选择器;

2)!important 无法提升继承的权重,该是0还是0;

3)!important 不影响就近原则。

三、盒模型

1.盒子中的区域

一个盒子中主要的属性就5个:width、height、padding、border、margin

2.padding

padding区域有背景颜色,也就是说,background-color讲填充所有border以内的区域。

注:以下写法错误:不能把小属性写在大属性前面

padding-left:30px;                       padding:20px;

padding:20px;错误                     padding-left:30px;正确

3.一些元素默认带有padding(如ul)

因此,我们为了做站方便控制,总喜欢清除这个默认的padding

*{ margin:0;

padding:0;}

但是,*的效率不高,所以我们选择使用并集选择器。如:

h1,h2,h3······dl { margin:0;padding:0;}

4.border-->是一个大综合属性

比较稳定的就几个:solid、dashed、dotted

border属性能够被拆开,有两大拆开方式:

1)按3要素来拆:

border-width:10px 20px 10px 30px;

border-style:solid dashed dotted    ;

border-color:red  green blue yellow;

2)按方向来拆:

border-top:10px solid red;

border-right:10px solid red;

border-bottom:10px solid red;

border-left:10px solid red;

按方向拆还能再拆一层:

border-top-width:10px;

border-top-style:solid;

border-top-color:red;

某一条边没有:border-left:none;

也可以调整左边边距宽度为0  border-left-width:0;