css简略知识点1

选择器:基础选择器，复合选择器

基础选择器:标签选择器，类选择器，id选择器，通配符选择器

标签选择器:

标签名属性1：{

属性值1;属性2：属性值2；属性3：属性值3;

 }

类选择器:

.类名{

属性1：属性值1；

...

}

结构需要用class属性来调用class类的意思

<div class = “red”>变红色</div>

id选择器:

#id名{

属性1：属性值1；

}

与类选择器的区别:只能调用一次，别人切勿使用。

例子:类选择器相当于身份证里的名字

id选择器相当于身份证号码

通配符选择器:

使用*定义，它表示选取页面中所有元素（标签）

*{

属性1：属性值1；

...

}

基础选择器总结:

字体粗细:font-weight

400为正常，700为变粗

font-size:normal；默认值，浏览器会显示标准的字体样式，可以将斜体em，i改为不倾斜字体。

字体复合属性:
 

font：font-style font-weight font-size/line-height font-family；

注意:不能更换顺序，空格隔开，不需要的属性可以省略，但必须保留font-size和font-family属性，否则font属性不起作用。

装饰文本:text-decoration:

none 默认。没有装饰线（最常用）

underline 下划线。链接a自带下划线（常用）

overline 上滑线（几乎不用）

line-through 删除线（不常用）

文本缩进:text-indent —— 段落首行缩进（2em二个字的距离）

行间距:line-height



css的引入方式:

内部样式表

行内样式表

外部样式表:



css复合选择器

包括:后代选择器，子选择器，并集选择器，伪类选择器等等

后代选择器:



子元素选择器:



并集选择器:



伪类选择器包括链接伪类，结构伪类等

链接伪类:

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

注意:为了确保生效，请按照LVHA的顺序声明；a链接在浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式

:focus 伪类选择器:

用于选取获得焦点的表单元素，焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要是针对于表单元素来说。

CSS的元素显示模式:

元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>

html元素分为块元素和行内元素二种类型

常见的块元素<h1>~<h6> <p> <div> <ul> <ol> <li>

块元素特点: 

1.比较霸道，自己独占一行。

2.高度，宽度，外边距以及内边距都可以控制

3.宽度默认是容器（父级宽度）的100%

4.是一个容器及盒子，里面可以放行内或者块级元素

注意:文字类的元素内不能使用块级元素

<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

常见的行内元素有<a>，<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等，span最典型，有的地方也称内联元素

行内元素的特点:

1.相邻行内元素在一行上，一行可以显示多个

2.高，宽直接设置是无效的

3.默认宽度就是它本身内容的宽度

4.行内元素只能容纳文本或者其他行内元素

注意:链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素:在行内块元素中有几个特殊的标签:

<img/> <input> <td> 它们同时具有块元素和行内元素的特点

行内块元素的特点:

1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个

2.默认宽度就是它本身内容的宽度

3.高度，行高，外边距以及内边距都可以控制

css的元素显示模式

块级元素和行内元素的互转:

转化为块级元素:display:block；

转换为行内元素:diaplay:inline