CSS基础整理

CSS基础整理

一、CSS概述
　层叠样式表
　作用：修饰html的标签
　主要学习内容：
　(1)CSS(选择器)的写法：css是如何控制html标签的样式
　(2)CSS的属性和属性的取值

二、选择器
　1、类选择器
　　格式：. + 类名 + {样式表}
　　要求：对应html的标签中　必须有class属性
　　例：

html标签      <div class = "cls">  </div>
CSS类选择器 .cls{样式表}

　　注：类选择器：一类的标签元素
　
　2、ID选择器
　　要求：html标签中必须有id属性
　　CSS格式：# + id名称{样式表}
　　注：id是唯一标识，一个元素
　
　3、元素选择器
　　CSS格式：元素名{ }
　　例：

    <p>  </p>
    CSS样式：   p {样式表}

　4、属性选择器
　　特殊的元素选择器
　　CSS格式：元素选择器 [ 属性名 = ” ” ]
　
　5、后代选择器
　　CSS格式：选择器 后代选择器

　另：伪类
　CSS 伪类用于向某些选择器添加特殊的效果。
　例：

锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

三、CSS中常用的属性
　1、背景

   background-color  ：设置背景色
   background-image  ：设置背景图像
     例：url(abc.gif)

　2、文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进

   color  ：设置文本颜色
   line-height  ：设置行高
   text-align  ：对齐元素中的文本
       left：把文本排列到左边
       right：把文本排列到
       center：把文本排列到中间
   text-decoration  ：向文本添加修饰
       none：默认  定义标准的文本
       underline：定义文本下的一条线

　3、设置字体的大小、字体风格(如斜体)和字体变形(如小型大写字母)

   font-family  ：设置字体系列
   font-size  ：设置字体的尺寸
   font-style  ：设置字体风格

　4、列表

   list-style-type  ：标记的样式
       none：无标记
       disc：默认 实心圆
       circle：标记是空心圆
   list-style-image ：将图像设置为列表项的标志
       例：url("abc.gif");   注意是否有引号

　5、分类
　　float：定义元素在哪个方向浮动
　　　　left：元素向左浮动
　　　　right：元素向右浮动
　　　　none：默认值。元素不浮动，并会显示在其在文本中出现的位置
　　　　inherit：规定应该从父元素继承float属性的值
　　clear：设置一个元素的侧面是否允许其他的浮动元素
　　　　left：在左侧不允许浮动元素
　　　　right：在右侧不允许浮动元素
　　　　both：在左右两侧均不允许浮动元素
　　　　none：默认值。允许浮动元素出现在两侧
　　　　inherit：规定应该从父元素继承clear属性的值
　　display：设置是否及如何显示元素
　　　　none：此元素不会被显示
　　　　block：此元素将显示为块级元素，此元素前后会带有换行符。相当于 div
　　　　inline：默认。此元素会被显示为内联元素，元素前后没有换行符。相当有 span
　　position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
　　　　absolute：生成绝对定位的元素，相对于页面
　　　　fixed：生成固定定位的元素，相对于浏览器窗口进行定位。
　　　　relative：生成相对定位的元素，相对于该元素的当前位置
　　　　　　元素的位置通过 left，top，right 以及 bottom 属性进行规定
　　visibility：设置元素是否可见或不可见
　　　　visible：默认值。元素是可见的
　　　　hidden：元素是不可见的

6、尺寸
　　height：设置元素的高度
　　width：设置元素的宽度

7、CSS框模型(Box Model)盒子模型
　　一个元素外面有 padding border margin
　　padding：内边距　　元素到边框的距离
　　border：边框
　　margin：外边距　　元素之间的距离
　　内边距或者外边距若设置大小的时候，四个值：
　　　　　　padding-top：10px；上
　　　　　　padding-left：10px；左
　　　　　　padding-right：10px；右
　　　　　　padding-bottom：10px；下
　　border：设置颜色 边框的风格
　　　　例：border：1px　solid　red；
　　　　　　设置边框的宽度为1px　实线　红色
　　　　dashed：虚线
　　　　double：双实线