学习笔记：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 /* 选定的链接 */