CSS入门

什么是 CSS

CSS（cascading Style Sheet 的缩写），可译为层叠样式表，用来进行网页风格修饰，控制页面的外观。

WEB 标准构成

  • HTML:结构，搭建页面的内容结构。
  • CSS:样式，用来进行网页风格修饰，控制页面的外观。
  • JS:行为，用来给HTML网页增加动态功能。

CSS 特点

  • 页面内容与表现形式分离
  • 可很好的控制页面的布局
  • 提高网页加载速度
  • 降低服务器的成本
  • 呈现一致的效果

CSS 的引入方式

标签内引入

是把样式编写在标签内的style属性中

特点

  • 优先级最高
  • 冗余代码多，代码量大
  • 不易改版与维护

头部style标签引入

是在head标签内加入style标签，在style标签内编写样式。

特点

  • 不需要额外请求，速度快
  • 不易改版与维护

link标签外部引入

在head部分加入link标签，通过外部css文件地址引入

特点

  • 一个CSS文件可控制多个页面
  • 易改版、便于维护
  • 减少代码量、代码简洁规范易于分工协作
  • 有效利用缓存机制
  • 需要额外请求

import样式外部引入

在样式中通过@import “地址” 引入外部CSS文件

特点

  • 不常用
  • 会在网页加载完后再加载CSS文件
  • 会出现闪烁问题

CSS 选择器

标签名选择器

直接通过标签名来选择

特点

  • 优先级权重:1

    例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style type="text/css">	
    /*根据类标签名选择元素*/
    div{
    /*设置字体颜色为红色*/
    color: red;
    }
    </style>
    <!--div字体变为红色-->
    <div>这是DIV</div>

    类选择器

在标签内加载class属性，根据属性值前加“ . ”来选择

特点

  • 优先级权重:10
  • 可以有相同的类名
  • 类选择器用的较多

例子

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">	
/*根据类名选择元素*/
.test{
/*设置字体颜色为红色*/
color: red;
}
</style>
<!--字体变为红色-->
<div class="test">这是DIV1</div>
<!--字体变为红色-->
<div class="test">这是DIV2</div>

ID选择器

在标签内加载id属性，根据属性值前加“ # ”来选择

特点

  • 优先级权重:100
  • 选择器里的优先级最高
  • 页面中不要有同名的 ID

例子

1
2
3
4
5
6
7
8
9
<style type="text/css">	
/*根据ID名选择元素*/
#test{
/*设置字体颜色为红色*/
color: red;
}
</style>
<!--div字体变为红色-->
<div id="test">这是DIV</div>

后代选择器

后代选择器可以选择作为某元素后代的元素，通过空格获取后代元素

特点

  • 优先级权重:叠加，但不管加多少，不能越权
  • 可分区域选择

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">	
/*获取ID名为test的后代span标签*/
#test span{
/*设置字体颜色为红色*/
color: red;
}
</style>
<div id="test">
    <!--span字体变为红色-->
    <span>这是span1</span>
</div>
<!--span字体颜色未变-->
<span>这是span2</span>

群组选择器

多个选择器设置的样式一样，可以通过逗号组合起

特点

  • 减少代码量

    例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style type="text/css">	
    /*获取ID名为test的后代span标签*/
    #test1 span{
    /*设置字体颜色为红色*/
    color: red;
    }
    #test2 span{
    /*设置字体颜色为红色*/
    color: red;
    }

    /*以上代码可以改为*/
    /*多个选择器设置的样式一样，可以通过逗号组合起来*/
    #test1 span,#test2 span{
    /*设置字体颜色为红色*/
    color: red;
    }
    </style>
    <div id="test1">
        <!--span字体变为红色-->
        <span>这是span1</span>
    </div>
    <div id="test2">
        <!--span字体变为红色-->
        <span>这是span2</span>
    </div>

通配选择器

通过“ * ”符合，选择所以标签

特点

  • 优先级最低
  • 可用于重置样式

例子

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">	
/*获取全部标签*/
*{
/*设置字体颜色为红色*/
color: red;
}
</style>

<!--全部标签字体变为红色-->
<div>这是DIV</div>
<span>这是span1</span>
<p>这是P</p>

CSS 样式基本设置

文字设置

字体设置- font-family

可以同时为页面设置多个字体，当浏览器找不到第一个字体时会寻找第二个字体，依次进行，直到找到可用的字体

  • 中文页面建议以宋体为首选，其他字体次之。
  • 英文页面建议以Arail/Tahoma等字体。
  • 中英结合网站建议最好用英文字体。
  • 特殊字体一律用图片
    1
    2
    3
    4
    5
    <style type="text/css">	
    div{
    font-family: "宋体",Arail;
    }
    </style>

字体大小 - font-size

设置页面中字体的大小，有px、百分比、em、rem等单位。

在网页中一般最小的字号就是12px；另外12px也是网页设计中通用默认的最小字体大小。浏览器的默认字体大小都是16px。

  • px:像素大小
  • 百分比:根据父级字体大小设置 如：父级-12px*自身-200% = 24px
  • em:根据自身字体大小设置 如：自身-12px*自身-2em = 24px
  • rem:根据HTML字体大小设置 如：html-100px*自身-0.5rem = 50px
    1
    2
    3
    4
    5
    6
    7
    8
    <style type="text/css">	
    div{
    font-size: 12px;
    font-size: 1.5em;
    font-size: 150%;
    font-size: 2rem;
    }
    </style>

字体风格 - font-style

定义字体的风格，属性设置使用斜体、倾斜或正常字体。

  • normal 常规字体
  • italic 斜体
    1
    2
    3
    4
    5
    <style type="text/css">	
    div{
    font-style: italic;
    }
    </style>

字体粗细属 - font-weight

  • normal : 表示正常

  • bold : 表示加粗

    1
    2
    3
    4
    5
    <style type="text/css">	
    div{
    font-weight: bold;
    }
    </style>

  • 字体设置简写

font: font-style | font-weight | font-size | font-family

需要按顺序设置

1
2
3
4
5
<style type="text/css">	
div{
font: italic bold 12px "宋体";
}
</style>

文本设置

颜色 - color

  • 设置颜色关键字，如 color : red;
  • 设置十六进制颜色值，如color : #ffffff；可简写为 #fff
  • 设置RGB颜色值，如color:rgb(255,0,0);

文本修饰属性设置 - text-decoration

  • none: 无文本修饰（浏览器默认初始值）
  • underline: 表示有下划线
  • overline : 表示有上划线
  • line-through : 表示有贯穿线/删除线

行高 - line-height

  • normal :浏览器默认为正常行距
  • length : 用于设置行高的大小值

文本缩进 - text-indent

  • 常用单位是 px 或者是 em
  • 2em 缩进两个字

####文本水平对齐 - text-align

  • left: 左对齐
  • center: 左右居中
  • right: 右对齐
  • justify: 两端对齐文本

文本垂直对齐 - vertical-align

  • top: 顶部
  • bottom: 底部
  • middle : 上下居中

字词间隔 - word-spacing

改变字（单词）之间的标准间隔

  • normal: 默认值
  • length: 间隔大小

字符间隔 - letter-spacing

改变字符之间的标准间隔

  • normal: 默认值
  • length: 间隔大小

背景设置

背景颜色 - backgroung-color

  • background-color: red | #ffffff
  • 用法跟color相似，只是代表属性不同，属性值是一样

背景图片 - background-image

  • background-image: none | url ( url )
  • none: 是无背景图
  • url: 里面跟的图片的路径

背景重复 - background-repeat

  • background-repeat: repeat | no-repeat | repeat-x | repeat-y
  • repeat: 重复默认选项
  • no-repeat: 不重复
  • repeat-x: 横向重复
  • repeat-y : 纵向重复

背景图片 - background-position

  • background-position: x轴坐标值 y轴坐标值
  • 可以是具体的方位。left | right | center | top | bottom

背景图滚动 - background-attachment

  • background-attachment: scroll | fixed；
  • scroll: 随着页面的滚动轴背景图片将移动，默认值
  • fixed: 随着页面的滚动轴背景图片不会移动

简写方式

无需按特定顺序

1
2
3
4
5
<style type="text/css">	
div{
background: red url(xxx.jpg) 0px 0px no-repeat;
}
</style>