CSS学习笔记Day1

书立行

已于 2024-05-30 23:25:34 修改

阅读量925

点赞数 17

文章标签： css 学习笔记 html html5

于 2024-05-13 11:57:37 首次发布

本文链接：https://blog.csdn.net/primebrake/article/details/138772800

版权

如果把HTML比作是一个人，那CSS就是他的穿搭。所以学习CSS是做好网页至关重要的一步。

1 CSS语法格式

在HTML文件中写CSS，基本格式如下：

书写规范：选择器和{之间添加空格，样式中每个属性和属性值之间需要添加空格。

以下是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验CSS语法规范</title>
    <!-- 在head里写style -->
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            /* 利用键值对的形式书写 */
            /*:分割   ;结尾 */
            color: red;
            font-size: 12px;
            /* px为像素 */
        }
    </style>
</head>
<body>
    <p>CSS有点意思</p>
</body>
</html>

2 CSS基础选择器

2.1 标签选择器

标签选择器可以指定修改指定的全部标签,以下是一个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础选择器</title>
    <!-- 选择器分为基础选择器和复合选择器 -->
    <!-- 基础选择器包括：标签选择器，类选择器，id选择器和通配符选择器 -->
    <!-- 标签选择器可以修改指定的全部标签 -->
    <style>
         p {
            color: green;
         }
         div {
            color: red;
         }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女</div>
    <div>女</div>
    <div>女</div>
</body>
</html>

2.2 类选择器

类选择器可以差异化选择不同的标签，单独选一个或者某几个标签。以下是一些说明。

结构需要用class属性来调用
类选择口诀：样式点定义结构类(class)调用一个或多个开发最常用
注意：不能将类名定义为特定的标签名

以下是一个例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <!-- 类选择器可以差异化选择不同的标签，单独选一个或者某几个标签 -->
    <!-- 结构需要用class属性来调用class类的意思 -->
    <style>
        /* 类选择口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用 */
        /* 不能用标签进行类名的使用 */

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li class="red">甲</li>
        <li class="red">已</li>
        <li>丙</li>
        <li>丁</li>
        <li>戊</li>
    </ul>
    <div class="red">你是谁</div>
</body>

</html>

值得关注的是：可以使用多类名，不同类名用空格分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名使用方法</title>
    <style>
        .red {
            color: red;
        }
        .font {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <!-- 不同类名用空格分开 -->
    <div class="red font">刘德华</div>
</body>
</html>

2.3 id选择器

id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

所以说，id选择器和类选择器最大的不同就在于，类选择器可以使用多次，但是id选择器只能用一次。以下是例子代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
</body>
</html>

2.4 通配符选择器

通配符选择器可以选择页面中所有的元素，一般只有特殊情况下才会使用。用*表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        /* CSS用*定义，选取页面中所有的元素 特殊情况使用 */
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>我的</div>
    <div>你的</div>
    <ul>
        <li>你的</li>
    </ul>
    <ol>
        <li>他的</li>
    </ol>
    <dl>
        <dt>move</dt>
        <dd>dadadadadada</dd>
    </dl>
</body>
</html>

3 属性

3.1 字体属性

字体：font-family;
字体大小：font-size
字体是否加粗:font-weight: 400 表示不加粗，相当于normal| font-weight: 700 表示加粗相当于bold
字体是否倾斜:font-style: italic 表示倾斜 | normal 表示倾斜的字体不倾斜。
注意：标题标签比较特殊，需要单独指定文字大小。

以下是具体的例子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        p {
            font-family: 'Microsoft Yahei';
        }

        h2 {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
            font-weight: 700;
            /* 有normal：正常,让其不加粗,相当于数值400,bold：加粗,bolder,lighter * /
        /* 实际开发中，更提倡用数字进行加粗效果。 */
            /* 标题标签比较特殊，需要单独指定文字大小 */
        }
        body {
            font-size: 10px;
            /* font-style: italic;倾斜 */
            /* normal:倾斜的字体不倾斜 */
        }
        em {
            font-style: normal;
        }
    </style>
</head>

<body>
    <h2>我</h2>
    <p>我是一个傻瓜</p>
    <p>傻到可爱</p>
    <p>傻到坏蛋</p>
    <p>傻到无法自拔</p>
    <p>傻到难以言表</p>
    <em>你好</em>
</body>

</html>

3.2 字体属性复合写法

复合写法，顾名思义，就是将之前分开写的字体属性写到一起。但是有些地方要注意。

格式：font: a b c d
注意：a代表font-style，b代表font-size, c代表font-family，d代表font-weight,顺序不可以调换。
并且，不需要设置的属性可以省略，但是必须保留font-size和font-family。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合属性写法</title>
    <style>
        div {
            /* font-style: italic;
            font-size: 16px;
            font-family: 'Mircorsoft Yahei';
            font-weight: 700; */
            /* 复合属性：简写的方式 */
            /* 顺序如下：无法颠倒 */
            /* font: font-style font weight font-size/line height font-family; */
            font: italic 700 16px 'Microsoft Yahei';
            /* 不需要设置的属性可以省略，但必须保留font-size和font-family */
        }
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>

3.3 文本属性

位置信息：text-align:right|left|center;
装饰文本：text-decoration:underline(下划线）| overline（上划线）| none（默认没有装饰线）---一般用来取消超链接的下划线;
文本缩进：text-indent:个数+em; em是一个相对单位，就是当前元素1个文字的大小。2em相当于是首行缩进2字符。
行间距：line-height: xx px;用于设置行间的距离，可以控制文字行一行之间的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        /* 颜色 */
        div {
            /* color: pink; */
            color: #ff0000; 
            /* 十六进制，最常用 */
            /* color: rgb(255,0,0);rgb格式 */
        }
        /* 对齐文本方式 */
        h1 {
            /* text-align: center; */
            text-align: right;
        }
        /* 装饰文本 */
        /* none:默认没有装饰线
        underline:下划线，链接a自带下划线
        overline:上划线（几乎不用）
        Line-through:删除线 （不常用）*/
        p {
            text-decoration:underline;
            /* 行间距 */
            line-height: 25px;
        }
        a {
            /* 取消a默认的下划线 */
            text-decoration:none;
        }
        /*文本缩进 text-indent,用来指定文本的第一行缩进，通常时将段落的首行缩进 */
        h2 {
             /* em是一个相对单位，就是当前元素1个文字的大小 */
            /* 2em相当于首行缩进2字符 */
            text-indent: 2em;
        }
        /* 行间距
        line-height属性用于设置行间的距离，可以控制文字行一行之间的距离 */
         

    </style>
</head>
<body>
    <div>听说喜欢下棋的人，心机都很深</div>
    <h1>大小</h1>
    <p>大大大大大</p>
    <a herf="#">大大大大</a>
    <h2>dadadadadadadadadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>
</body>
</html>

4 CSS的引入方式

4.1 行内样式表

所谓内部样式表，就是在html页面内部写样式，但是是单独写到style标签内部。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
</head>

<body>
    <p>夏天夏天悄悄过去留下小秘密</p>
    <p>压心底压心底不能告诉你</p>
    <p>晚风吹过温暖我心底我又想起你</p>
    <p>多甜蜜多甜蜜怎能忘记</p>
    <p>不能忘记你把你写在日记里</p>
    <p>不能忘记你心里想的还是你</p>
    <p>浪漫的相机还有浪漫的一个你</p>
    <!-- 行内样式表 -->
    <p style="color: red; font-size: 20px;">给我一个粉红的回忆</p>
</body>

</html>

4.2 外部样式表

意思就是在外部在创建一个css的文件，然后在HTML的head标签中利用以下标签进行引用。

<link rel="stylesheet" href="14-外部样式表.css">

5 案例

5.1 案例1

此案例利用类选择器做了三个盒子，具体代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器课堂案例:类选择器做三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>