CSS基础知识01

标签：col   pac   介绍   高级   一个   元素   属性   综合   常用   

一、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;

CSS基础知识01

标签：col   pac   介绍   高级   一个   元素   属性   综合   常用   

原文地址：https://www.cnblogs.com/zlinger/p/9023837.html