2.CSS-基础1

867 views

图片

1.CSS入门

1.1 CSS简介

CSS是层叠样式表（ Cascading Style Sheets ），也为CSS样式表或级联样式表，是一种标记语言。

html主要做结构，css主要做样式，美化html网页布局，使得结构与样式相分离

1.2 CSS基础语法规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p {
        color: red;
        font-size: 24px;
    }
    </style>
</head>
<body>
    <p>
        有点意思
    </p>
</body>
</html>

  • CSS写在<head></head>中间，由<style></style>声明（如上图）

  • CSS规则由一个选择器和一组声明组成（如下图）:

    1.选择器：选择给谁修改属性（指定对应的HTML标签）

    2.声明：说明具体的样式

    ①一个声明就是一个键值对，由冒号分开；

②声明与声明之间由;分开；

③最后一个声明后面还是有一个;

图片

1.3 CSS的代码写作风格

  1. 展开式（更直观）
p {
     color: red;
     font-size: 24px;
}

  1. 全部用小写

  2. 在p后面，冒号后面，都需要留一个空格。

2. CSS的基础选择器

<div>我是div</div>
<div>我的div</div>
<ul>
    <li>
        我是ul中的小li
    </li>
</ul>
<ol>
    <li>
        我是ol中的小li
    </li>
</ol>

我们对选择器的需求：

  • 能够选择第2个<div>
  • 能够选择出ol中的li

选择器分为"基础选择器"和"复合选择器"两个大类：

  • 基础选择器由单个选择器组成
  • 基础选择器又包括：标签选择器，类选择器，id选择器，通配符选择器

2.1 标签选择器 p {}

标签选择器（元素选择器）：使用HTML标签名称作为选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p {
        color: red;
        font-size: 24px;
    }
    </style>
</head>
<body>
    <p>我是p1</p>
    <p>我是p2</p>
</body>
</html>

选择p作为选择器:

优点：可以一次性修改html文档中所有的p标签

缺点：不能差异化选择，不能修改部分的p

2.2 类选择器 .red{}

类选择器可以差异化选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .red    定义类选择器
    {
        color: red;
    }
    .star-sing    定义类选择器
    {
        color: blue;
    }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>    调用类
        <li>来生缘</li>
        <li class="star-sing">李香兰</li>    调用类
        <li>生僻字</li>
    </ul>
</body>
</html>

步骤一：类选择器的定义：

.red 
    {
        color: red;
    }

步骤二：在样式中声明一个类，然后在HTML结构中就可以调用这个类：

 <li class="red"> 冰雨 </li>

注意：

  • 类选择器的命名必须以.开始
  • 类选择器的命名必须使用英文，不能全部为数字或中文
  • 长名字可以使用-来分割
  • 命名需要有意义，要别人一样就可以看懂
  • 类选择器在所有选择器中使用的最频繁
  • 在调用这个类选择器时，不再需要加上.

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .red 
    {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .green 
    {
        height: 100px;
        width: 100px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

定义一个red类，这个类用来定义盒子：盒子高宽，背景颜色：background-color

在下面的

就可以调用。修改div盒子的高宽，背景颜色，最后的效果：

图片

类选择器的多类名：一个标签调用多个类名，空格分开

案例 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box
    {
        width: 200px;
        height: 200px;
    }
    .red 
    {
        background-color: red;
    }
    .green 
    {
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
</body>
</html>

多类名的优点：

  • 这些标签都可以调用这个公共的类,然后再调用自己独有的类。
  • 节省CSS代码,统一修改也非常方便。
  • 这个就是面向对象的概念

2.3 id选择器 #yellow{}

id选择器以“#" 来定义，被特定唯一id的HTML元素调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box
    {
        width: 200px;
        height: 200px;
    }
    .red 
    {
        background-color: red;
    }
    .green 
    {
        background-color: green;
    }
    #yellow
    {
        color: rgb(84, 24, 226);
    }
    </style>
</head>
<body>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
    <div id="yellow">黄色</div>
</body>
</html>

使用#进行声明，在调用的使用使用id=" "进行调用

与类选择器的不同：

类选择器可以被多次调用，但是id选择器只能被调用一次，id选择器经常用于定义页面唯一性元素上。

2.4 通配符选择器 *{}

修改html代码中所有标签的样式，相当于全选，使用*定义，无需调用

语法：

* {
属性：属性值
margin:0;  清除所有的元素标签的内外边距
padding:0;
}

2.5 小结

基础选择器的总结

图片

3. 设置字体属性

3.1 设置字体 font-family

使用font-family修改字体样式。

<style>
 p {
  font-family: "宋体";
 }
</style>
font-family: "Microsoft YaHei";
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

设置一串字体样式时：系统会首先将字体设置为：'Franklin Gothic Medium'样式，当这个字体在系统中不存在时，会将字体设置为'Arial Narrow'，依次类推。当所有字体都不存在时，就会设置为系统默认字体：微软雅黑。

最常见的几个字体: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

（一般直接给body标签整体加字体属性，更方便，不用去style了）

3.2 修改文字大小 font-size

使用可以font-size修改文字大小。

font-size：16px     谷歌浏览器默认的文字大小为16px

这里的px为像素大小，在修改文字大小时，不要忘了px。

<style>
body  对除标题外的全部文字进行修改
{
    font-size: 18px;
}
h2   对标题文字修改
{
    font-size: 20px;
}
</style>

3.3 修改粗细 font-weight

可以使用font-weight:normal;进行粗细的修改。

  • normal为正常大小，400
  • lighter为更细
  • bold为加粗，700
  • bolder为更粗
  • 或者直接指定粗细的数字
font-weight: 400;

正常normal的大小为400，字体的粗细大小可以在100到900的范围内变化。

因为标题标签会将字体变大和变粗，但是有时候我们不想标签变粗，就可以给标题声明一下字体粗细。

<head>
    <style>
        .bold{
            font-weight: 700;    或者：font-weight: bold;
        }
        h2
        {
            font-weight: 500;
        }
    </style>
</head>
<body>
    <h2>打招呼</h2>
    <p class=“bold”>你好</p>
</body>

3.4 字体倾斜 font-style

可以使用font-style将字体倾斜或不倾斜``

font-style: italic;       字体变倾斜
font-style: normal;       字体变正常
<style>
    em{
        font-style: normal;
    }
</style>

我们在实际开发中很少将字体变为倾斜状态，较多将倾斜的字体变为正常状态。

3.5 复合属性 {font: normal 400 24px/20px "微软雅黑"}

设计一个字体样式，可能需要多个属性叠加：

div{
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    font-family: '微软雅黑';
}

我们可以使用"复合属性"简化代码：

div {
    font: italic 700 24px/20px "微软雅黑"
}

顺序必须为：font-style,font-weight,font-size/line-height,font-family

最后两个font-size和font-family不可忽略的，前面的两个值可以忽略

3.6 小结

图片

4. 设置文本属性

4.1 文本颜色 color

方式一：预定义的颜色值

div {
        color: blue;
    }

方式二：十六进制

div {
        /* color: blue; */
        color: #FF0000;
    }

方式三：RGB值

div {
        color: rgb(84, 24, 226);
    }

鼠标停留在颜色属性值上，就能够跳出一个颜色选择框。

开发中最常用的是十六进制。

4.2 文本对齐 text-align

文本对齐通过：text-align方式进行对齐。

text-align: center/left/right;

文本对齐只是行对齐，没有纵向的对齐。

4.3 装饰文本 text-decoration

使用text-decoration属性，可以给文本加上/去掉下划线，删除线，上划线

  • 下划线：text-decoration:underline
  • 删除线：text-decoration:line-through
  • 上划线：text-decoration:overline
  • 没有线：text-decoration:none

给链接去掉下划线：（链接一般会自带一个下划线，不好看）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    a 
    {
        text-decoration: none;
    }
    p 
    {
        text-decoration: underline;
    }
    </style> 
</head>
<body>
    <p>我是用来测试下划线的</p>
    <a href="#">淘宝</a>
</body>
</html>

4.4 文本缩进 text-indent

首行缩进是通过text-indent实现。

两种实现方法：

1、使用具体像素值：text-indent: 20px; 这样首行就可以缩进20像素

2、使用相对大小：text-indent: 2em;

em是一个相对单位，1em表示一个当前字符大小。使用2em，就可以让段落永远首行缩进2个字符大小，无论字体变大变小。

4.5 行间距 line-height

图片

行高是通过：line-height进行设置的，例：

p {
    text-indent: 2em;
    text-decoration: underline;
    line-height: 36px;
}

行高=上间距+文本高度+下间距，如果文本高度为16，那么此时上间距和下间距都为10px。

块元素中，line-height行高和块的height相等，可以实现文字块居中效果``

p {
    font: 12px/1.5 "微软雅黑";  
}

1.5指行高为字体大小12px的1.5倍

4.6 小结

图片

END