【石家庄校区】CSS笔记整理

CSS：
CSS的概述：层叠样式表.

​    修饰HTML的页面.使页面与样式分离.

CSS的语法：

​     选择器{属性名:属性值;属性名:属性值;...}

CSS的引入方式：

• 行内样式：在html元素上使用style属性设置
  
  

​     内部样式：在html中使用<style></style>进行设置

​     外部样式：定义一个css文件,在html中引入该文件.<linkhref=”” type=”” rel=””/>

• 元素选择器:
  

div{

​    border:1pxsolid blue;

​    width:40px;

​    height:45px;

}

• ID选择器：
• #d1{
  ​    border:2pxsolid red;
  }
• 类选择器：
• .divClass{
  ​    border:2pxsolid yellow;
  }         
• 后代选择器：
• div span 查找的是所有div中的所有的span元素.
  h1 strong{
     color:red;
  }
• 子元素选择器：
• div > span找这个div中的第一层级的span元素.
  h1 > strong{
     color:red;
  }
  
  

CSS的样式：背景[td]

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

列表[td]

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

文本[td]

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-align	对齐元素中文本的首行
text-decoration	向文本中添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-shadow	控制元素中的字母
unicode-bidi	设置文本方向
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

字体[td]

属性	描述
font	简写属性.把所有针对字体的属性设置在一个声明中.
font-family	设置字体系列
font-size	设置字体的尺寸
font-size-adjust	当首选字体不可用是,对替换字体进行智能缩放
font-stretch	对字体进行水平拉伸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

CSS的盒子模型：

​    * 内边距：padding

​    * 边框：border

​    * 外边距：margin

* CSS的悬浮和定位：

​    * 悬浮：float属性设置悬浮.

​    * 清除悬浮：clear属性清除.

​    * 定位：position属性设置定位.

​        * 使用left和top属性控制位置.

​    * display属性：控制元素的显示方式：

​        *block--显示的, none--隐藏的,inline--显示到一行.

css的显示和隐藏的属性

display

​        block:显示元素

​        none：隐藏元素

float属性的取值：

left 元素向左浮动

right 元素向右浮动

none 默认值。元素不浮动，并会显示在其在文本中出现的位置

inherit 规定应该从父元素继承 float属性的值。

清除浮动效果：使用clear属性进行清除：

left  在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左右两侧均不允许浮动元素

none 默认值。允许浮动元素出现在两侧。

inherit  规定应该从父元素继承 clear 属性的值。

【石家庄校区】CSS笔记整理

CSS：
CSS的概述：层叠样式表.

​    修饰HTML的页面.使页面与样式分离.

CSS的语法：

​     选择器{属性名:属性值;属性名:属性值;...}

CSS的引入方式：

• 行内样式：在html元素上使用style属性设置
  
  

​     内部样式：在html中使用<style></style>进行设置

​     外部样式：定义一个css文件,在html中引入该文件.<linkhref=”” type=”” rel=””/>

• 元素选择器:
  

div{

​    border:1pxsolid blue;

​    width:40px;

​    height:45px;

}

• ID选择器：
• #d1{
  ​    border:2pxsolid red;
  }
• 类选择器：
• .divClass{
  ​    border:2pxsolid yellow;
  }         
• 后代选择器：
• div span 查找的是所有div中的所有的span元素.
  h1 strong{
     color:red;
  }
• 子元素选择器：
• div > span找这个div中的第一层级的span元素.
  h1 > strong{
     color:red;
  }
  
  

CSS的样式：背景[td]

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

列表[td]

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

文本[td]

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-align	对齐元素中文本的首行
text-decoration	向文本中添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-shadow	控制元素中的字母
unicode-bidi	设置文本方向
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

字体[td]

属性	描述
font	简写属性.把所有针对字体的属性设置在一个声明中.
font-family	设置字体系列
font-size	设置字体的尺寸
font-size-adjust	当首选字体不可用是,对替换字体进行智能缩放
font-stretch	对字体进行水平拉伸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细

CSS的盒子模型：

​    * 内边距：padding

​    * 边框：border

​    * 外边距：margin

* CSS的悬浮和定位：

​    * 悬浮：float属性设置悬浮.

​    * 清除悬浮：clear属性清除.

​    * 定位：position属性设置定位.

​        * 使用left和top属性控制位置.

​    * display属性：控制元素的显示方式：

​        *block--显示的, none--隐藏的,inline--显示到一行.

css的显示和隐藏的属性

display

​        block:显示元素

​        none：隐藏元素

float属性的取值：

left 元素向左浮动

right 元素向右浮动

none 默认值。元素不浮动，并会显示在其在文本中出现的位置

inherit 规定应该从父元素继承 float属性的值。

清除浮动效果：使用clear属性进行清除：

left  在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左右两侧均不允许浮动元素

none 默认值。允许浮动元素出现在两侧。

inherit  规定应该从父元素继承 clear 属性的值。