1、CSS介绍

CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。

2、标签添加CSS方式

通过标签style属性，给标签添加指定的CSS样式。

基本语法

sytle=”样式名:值;”

功能

规定标签样式。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. </head>
  6. <body>
  7. <div style="width:500px;height:300px;background-color:red;">
  8.       这是一个DIV标签
  9. </div>
  10. </body>
  11. </html>

代码讲解

1、div宽高

width:500px; 宽500
height:300px; 高300

2、div背景色

    background-color:red;   背景色为红色

3、CSS选择器

CSS常用选择器，包括以下几种：

1) id 选择器

基本语法


#content{
css 样式
}

功能

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML教学</title>
<style>
    #div01 {
        width:600px;
        height:100px;
        background-color: #00ff00
    }  
</style>
</head>
<body>
    <div id="div01">
        div01
    </div>
</body>
</html>

代码讲解

1、标签中加入id属性


为div 加入id属性：div01

2、通过id 加入样式

在style标签中给选择器加入样式。

3、id 选择器说明

id 选择器以 “#” 来定义，id 属性只能在每个 HTML 文档中出现一次

2) class 选择器

基本语法


.content{
css 样式
}

功能

class选择器可以为标有class 的 HTML 元素指定特定的样式。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML教学</title>
<style>
    .content {
        width:600px;
        height:100px;
        background-color: #ffff00;
    }   
</style>
</head>
<body>
    <div class="content">
        class选择器添加样式
    </div>
</body>
</html>

代码讲解

1、标签添加 class 属性


为 div 添加一个名称为：content 的class属性

2、用过class 添加样式

.content {
width:600px;
height:100px;
background-color: #ffff00;
}
为class 为content 添加样式，
设置div 宽、高、背景色。

3、class 选择器说明

class 选择器以 “.” 来定义，class 属性可以HTML 文档中出现多次。

3) 标签选择器

基本语法

为div加入样式

功能

标签选择器可以为标有该标签的 HTML 元素指定特定的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML教学</title>
<style>
    div {
        width:600px;
        height:100px;
        background-color: #ff00ff;
        margin-top: 10px;
    }
</style>
</head>
<body>
    <div>
        标签选择器添加样式
    </div>
    <div>
        div02
    </div>
</body>
</html>

代码讲解

1、div 添加样式

标签选择器添加样式

div02


为div添加样式，
设置div 宽、高、背景色以及外边距。

4) 群组选择器

基本语法

选择器1,选择器2,选择器3{
css 样式
}
在使用群组选择器时，使用“,”逗号分隔选择器

功能

将这多个选择器分组在一起,应用相同的样式。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #img1,#img2,.img3{
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <img id="img1" src="http://www.yyfun001.com/res/bg_02.png" />
    <img id="img2" src="http://www.yyfun001.com/res/bg_02.png" />
    <img class="img3" src="http://www.yyfun001.com/res/bg_02.png" />
</body>
</html>

代码讲解

1、将多个选择器分组

添加CSS样式 - 图1
添加CSS样式 - 图2
添加CSS样式 - 图3

由于上面图片样式一样，将他们分组设置样式
#img1,#img2,.img3{
height: 200px;
width: 200px;
}
提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

5) 派生选择器

基本语法


依据元素在其位置的上下文关系

功能

通过依据元素在其位置的上下文关系来定义样式。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        ul li{
            height: 35px;
            line-height: 35px;
            width: 500px;
            border: 1px solid red;
            margin-top: 10px;
        }
    .ming p{}
    </style>
</head>
<body>
    <ul>
        <li>习近平时间|让中非合作插上“一带一路”的翅膀</li>
        <li>打造更加紧密的中非命运共同体 各界热议</li>
        <li>关于世界形势和中非关系，习近平给出最新判断</li>
    </ul>
  <div class="ming">
    <p></p>
  </div>
</body>
</html>

代码讲解

1、派生选择器使用



  • 习近平时间|让中非合作插上“一带一路”的翅膀

  • 打造更加紧密的中非命运共同体 各界热议

  • 关于世界形势和中非关系，习近平给出最新判断


为ul 下的 所有li 添加样式，设置行高、边框以及外边距。

2、派生选择器说明
 依据元素在其位置的上下文关系来定义样式，通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。<br />所有 HTML 标签都可以使用派生选择器设置样式，我们要确定元素的上下文关系。

6) :hover

基本语法

功能

鼠标移入div上方时显示的样式。

代码

<!DOCTYPE html>
<html>
<head>
<title>:hover</title>
<meta charset="utf-8" />
<style type="text/css">
      div{
        border:1px dashed #3387DA;
        width:400px;
        height:150px;
      }
      div:hover{
        background-color:green;
      }
    </style>
</head>
<body>
<div>这是一个DIV标签</div>
</body>
</html>

代码讲解

1、:hover 选择器使用


font-style:italic; 样式为斜体
font-weight:bold; 样式为粗体
font-size:30px; 字体大小为30
font-family:隶书; 字体为隶书体


文字样式特点：

具有传递性，父标签的文字样式默认传递给子标签，只有文字样式有这个特性

常用文本样式

样式 值 作用
font-size 数字 设置字体大小
font-weight normal | bold | bolder | lighter | inherit
默认值 | 定义粗体字符 | 定义更粗的字符 | 定义更细的字符 | 规定应该从父元素继承字体的粗细		 设置文字是否加粗（ 自由定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold）
font-style normal | italic | oblique | inherit
默认值 | 显示一个斜体的字体样式 | 浏览器会显示一个倾斜的字体样式 | 规定应该从父元素继承字体样式		 设置文字是否为斜体
font-family 字体名称 设置文字显示的字体名称
text-align left | center | right | justify ｜ inherit
把HTML元素中的文本排列到左边
把HTML元素中的文本排列到中间
把HTML元素中的文本排列到右边
实现两端对齐文本效果
规定应该从父元素继承 text-align 属性的值		 水平对齐方式
vertical-align baseline 默认。元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用 “line-height” 属性的百分比值来排列此元素允许使用负值
inherit 规定应该从父元素继承 vertical-align 属性的值		 垂直对齐方式
text-indent 长度（text-indent:2em 首行缩进两字符） 设置文本缩进
line-height normal | 长度 设置行高
text-decoration none | blink | underline | line-through | overline
默认标准文本 | 定义闪烁的文本 | 下划线 | 定义穿过文本下的一条线 ｜ 上划线		 设置文本装饰

粗体
letter-spacing来设置字与字间距_字符间距离