一、Css基础

样式表分类：外部、内部、行内样式

二、内部样式表

（一）创建内部样式表

  1. <head>
  2.     <title>css内部样式表</title>
  3.     <style type="text/css">
  4.      p{
  5.       background-color: red;
  6.       font-size: 20px;
  7.           }
  8.     </style>
  9. </head>
  1. P是内部样式表的选择器，对应着下面的

    标签

  2. background-color: red;

    1.      属性              ：属性值；

  3. 属性后面是”：”，属性值后面是”；”。

  4. 内部样式需写在中

    （二）什么是选择器：

    1、用来选择（找到）需要添加的样式的位置

    2、属性 ：属性值；
    3、常用选择器：标签选择器（如上代码块）、
    类选择器（如下代码块）、id选择器。。。。
    1. <head>
    2.  <title>css内部样式表</title>
    3.  <style type="text/css">
    4.   .p{
    5.      background-color: red;
    6.      font-size: 20px;
    7.         }
    8.  </style>
    9. </head>
    10. <body>
    11. <p class="p">iuhslghuisherjghliu</p>
    12. <!--用class来为类选择器作标记，作用是准确定位目标-->
    13. </body>

（三）背景样式 background

1、background-color 颜色值 颜色作为背景颜色
2、background-image：../../…jpg; 图片位置 图片作为背景图片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4、background-attachment scroll fixed 背景是否随着滚动条滚动
Fixed 文字滚动，背景图片不随着滚动
scroll 背景图片随着文字一起滚动
5、background-position 背景图像的起始位置
6、background 背景样式的值是复合了属性值的组合 1 2 3 4 5
background: red 1.png repeat fixed position=”top left”;

background-position属性列表

意义：背景图像的起始位置
1、top left ,top center ,top right ,center left,center center,center right,bottom left,bottom center,bottom right
如果只定义了一个值，那么第二个值将是center
2、x% y% 第一个值是水平 第二个值是垂直
默认值 0% 0%
左上角：0% 0% 右下角：100% 100%
左下角：0% 100% 右上角：100% 0%
如果规定了一个值另一个值就默认是50%

3、apx bpx
左上角：0px 0px 右下角
如果规定了一个值另一个值就是50%

三、外部样式表

（一）创建并使用外部样式表

外部样式：外部样式就是新建一个文档，里面全写css，然后通过 插入到html代码中
作用：使得网页的表示层和结构层能够进行彻底分离

例子：

  1. <head>
  2.     <title></title>
  3.     <link rel="stylesheet" type="text/css" href="....">
  4. </head>

1、link 用于定义文档和外部资源的关系
2、rel=”stylesheet” relationship 关系
3、type=”text/css” 定义css样式文件的类型
4、href=”index.css” 引用的具体文件

（二）颜色表示

1、lightgreen lightpink 英文单词
2、#000000 红绿蓝 #ff0000 #00ff00 #0000ff
3、rgb(255,0,0) 红绿蓝 rgb(0,255,0) rgb(0,0,255)

文本样式讲解
文本样式：对齐方式，文本修饰，文本转换，文本缩进
作用：美化 修饰页面的文字部分下相关内容

（三）文本样式的属性：

Color 表示颜色的内容 设置文本颜色
Direction ltr rtl 文本的方向/书写的方向
Letter-spacing npx(注意：n可以是负数) 字符间距
Line-height npx 行高（行间距）
Text-align left,right ,center, justify（两端对齐）

Direction：ltr ； rtl 和 Text-align的关系
1、如果是字母和汉字的话，两者的效果是一摸一样的
2、前者会改变阿拉伯数字的顺序，后者不会
3、Direction ： ltr ； rtl 改变的不是顺序，而是书写的顺序，从右往左写的

（四）text-文本修饰：

1、text-decoration none,underline,overline,line-through 文本的修饰：下划线
2、text-shadow h-shadow v-shadow blur color 文本设置阴影
3、text-transform ：none（无变化）；capitalize（首字母大写）；
改变字母大小写 uppercase（全部大写）；lowercase（全部小写）
4、text-indent：首行缩进；n px,n em（em表示字符单位）

文本样式小结：
1、用于对间距，位置，对齐方式等设置
2、用于对文本进行修饰：阴影、下划线等

（五）font系列字体样式：

1、font-family （设置字体）：隶书、宋体、楷体等字体
2、font-style normal italic oblique 规定斜体的文本
3、font-weight（文本加粗）：normal（不变）、bold（加粗） 100-900
4、font-size npx 字体大小

（六）列表样式

1、list-style-type none,disc,circle,square,decimal…. 设置列表项目的外观
2、list-style-position inside,outside 列表符号的位置
3、list-style-image url,none 把图片设置为列表项目的标记
4、list-style 同前面三个 简写属性，涵盖以上三个列表样式属性

list-style-type

列表样式小结
列表使用频率很高，经常用于菜单，规律性展示等的引用场景。