学习笔记：CSS

行内样式：<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>

内部样式：

 

外部样式

 

格式：

 选择器：

id 选择器：

可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

id 选择器在当前页面只能出现一次

class 选择器：

用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

元素/标签选择器： 

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

CSS常用样式：

color：字体颜色

1、颜色的单词 red blue...

2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)

rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的 例如：#FF0000

width height 宽和高

只有块状元素可以设置宽高，行级元素设置不生效。值为像素px或百分比

background：背景样式

 

 文本样式：

 列表样式：

边框样式：

 

调试工具：F12

 盒子模型：

 

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

margin：0 auto;        //上下0 左右自动 

line-height： 属性设置行间的距离（行高）。

 

 如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing 属性

 

 float属性：浮动

左浮动 float:lift，右浮动 float:right

清除浮动:clear:lift  clear:right

 overflow属性：元素溢出的显示方式

 Display(显示) 与 Visibility（可见性）

 display：none        元素去掉了

visibility：hidden        元素透明了 

display:block -- 显示为块级元素

display:inline -- 显示为行级元素

display:inline-block -- 显示为行级块元素，表现为同行显示并可修改宽高内外边距等属性

复合选择器：

 * 全部        ，并集        没符号 交集        空格 后代        > 子元素

交集：同级        后代：不同级，可以隔代        子元素：不能隔代

伪类选择器：

a:hover{      } 

a:link /* 未访问的链接 */

a:visited /* 已访问的链接 */

a:hover /* 鼠标移动到链接上 */                常用

a:active /* 选定的链接 */