CSS基础教程-优快云博客

1、CSS：层叠样式表（Cascading style sheets）。

2、CSS写在style标签中，style标签一般写在head标签里面，title标签下面。

3、体验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>CSS初体验</title>
    <style>
        p {
            color: yellow;
            background-color: aqua;
            font-size: 30px;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

4、CSS引入方式：

▽ 内嵌式 CSS写在style标签中

提示: style标签虽然可以写在页面任意位置，但是通常约定写在 head标签中

<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>CSS初体验</title>
    <style>
        p {
            color: yellow;
            background-color: aqua;
            font-size: 30px;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

▽ 外联式: CSS写在一个单独的.css文件中

提示:需要通过link标签在网页中引入

/*my.css*/
p {
    color: red;
    background-color: aqua;
    font-size: 30px;
    width: 300px;
    height: 300px;
}

<!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>CSS引入方式</title>
    <link rel="stylesheet" href="./css/my.css">
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

▽ 行内式: CSS写在标签的style属性中

<div style="color: blueviolet;background-color: aqua;">这是div标签</div>

5、基础选择器：

1）标签选择器：

<style>
    p {
        color: blue;
    }
</style>

2）类选择器：

<!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;
        }
        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>111111</p>
    <!-- 一个标签可以使用多个类名，需要空格隔开即可 -->
    <p class="red size">222222</p>
</body>
</html>

注意：一个标签可以使用多个类名，需要空格隔开即可。

3）id选择器：

<!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>
        #blue {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="blue">这是一个div标签</div>
</body>
</html>

注意：id属性值不可重复。

4）通配符选择器：

<!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>
        * {
            margin: 0;
            padding: 0;
            color: red;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个p标签</p>
    <div>这是一个div标签</div>
    <span>这是一个span标签</span>
</body>
</html>

6、文字样式：

1）字体大小（font-size）：浏览器默认字号是16。

2）字体粗细（font-weight）:

正常：normal / 400；加粗： bold / 700

3）字体样式（font-style）：

正常（默认值）：normal；倾斜：italic

4）字体系列（font-family）：

<style>
    div {
        /* 如果用户电脑没有安装微软雅黑，就按黑体显示文字 */
        /* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
        font-family: 微软雅黑,黑体,sans-serif;
    }
</style>

5）样式的层叠问题：

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效。

6）font复合属性（font字体相关属性的连写）：

一个属性冒号后面书写多个值的写法。
- 取值： font: style weight size family;
- 省略要求：只能省略前两个，省略了相当于设置了默认值。

<style>
    p {
        /* font-style: italic;
           font-weight: 700;
           font-size: 66px;
           font-family: 宋体; 
        */
            
        /* font: style weight size family; */
        font: italic 700 66px 宋体;

        /* 省略 */
        font: 66px 微软雅黑;
    }
</style>

7、文本样式：

1）文本缩进（text-indent）：

取值：① 数字 + px ; ② 数字 + em (推荐： 1 em = 当前标签的 font-size 的大小)

<style>
    p {
        /* 
        首行缩进2个字
        em：一个字的大小 
        */
        text-indent: 2em;
    }
</style>

2）文本水平对齐方式（text-align）：

text-align: center; 能让哪些元素水平居中？
- 文本
- span标签、a标签
- input标签、img标签

<style>
    h1 {
        text-align: left;
    }
    h2 {
        text-align: right;
    }
    h3 {
        text-align: center;
    }
</style>

3）文本修饰（text-decoration）：

注意：开发中会使用text-decoration：none；清除a标签默认的下划线。

<style>
    div {
        text-decoration: underline;
    }
    p {
        text-decoration: line-through;
    }
    h2 {
        text-decoration: overline;
    }
    a {
        text-decoration: none;
    }
</style>

8、行高（line-height）：

<style>
    p {
        text-indent: 2em;

        /* line-height: 50px; */

        /* 自己字号的1.5倍 */
        line-height: 1.5;

        /* 可取消上下间距 */
        line-height: 1;
    }
</style>

注意：如果同时设置了行高和font连写，注意覆盖问题。

font: style weight size/line-height family;

/* font: style weight size/line-height family; */
/* 66px 宋体 倾斜 加粗 行高是2倍 */
font: italic 700 66px/2 宋体;

拓展

1、颜色的拓展取值（color、backgroud-color）（了解）：

2、标签水平居中方法总结: margin: 0 auto;

▽ 如果需要让div、p、h (大盒子)水平居中?

可以通过margin : 0 auto;实现。

▽ 注意点:

1. 如果需要让div、p、h (大盒子)水平居中，直接给当前元素本身设置即可。

2. margin: 0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。

CSS3 基础总结

拓展