CSS基础学习笔记

最新推荐文章于 2024-05-21 21:13:29 发布

逸疏iiii

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量57

点赞数

文章标签： css 学习 javascript

本文链接：https://blog.csdn.net/weixin_51771816/article/details/128427083

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、html列表
二、CSS简介
三.CSS语法规范
- 3.1 CSS代码风格
四. CSS的选择器
五.CSS字体属性
总结

前言

第二天的学习笔记，今天学习的有序列表，无序列表，自定义列表，css四大基础选择器，字体属性。

提示：以下是本篇文章正文内容，下面案例可供参考

一、html列表

有序列表<ol><li></li></ol>
有序列表一般按数字顺序来进行排列，要注意有序列表里面只能用li但是li里面没有要求，Li里面什么都能用

无序列表：<ul><li></li></ul>
无序列表一般都有小圆点，ul里面只能装li。

自定义列表

<dl><dt>标题项</dt><dd>列表项</dd></dl>

二、CSS简介

CSS的主要使用场景就是美化网页，布局页面的

HTML的局限性
css网页的美容师

2.1 HTML的局限性

如果单纯用HTML进行布局太过简单,而且实现一些效果比较麻烦，所以要用CSS对HTMl来进行修饰

2.2 CSS-网页的美容师

CSS是层叠样式表的简称
CSS是一种标记语言
CSS主要用于设置HTML里的文本内容（文字大小颜色对齐方式等）图片的外形，以及版面布局和外观显示样式

三.CSS语法规范

选择器 {属性：属性值}

3.1 CSS代码风格

1.紧凑式p{font-size:12px;color:red；}
2.展开格式h1 {
text-align: center;
font-weight: 400;
}

四. CSS的选择器

4.1 标签选择器

用于选中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: 20px
        }
    </style>
</head>
<body>
    <p>台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
</body>
</html>

4.2 类选择器

自己定义类的名字，之后将类的名字用CLASS加入标签中对标签进行修改。

<!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>
       .first {
        font-size: 30px;
        color: red;
       }
    </style>
</head>
<body>
    <p class="first">台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
</body>
</html>

4.3 id选择器

原理和类选择器差不多，但是只能存在一个id选择器，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>
       #first {
        font-size: 30px;
        color: red;
       }
    </style>
</head>
<body>
    <p id="first">台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
</body>
</html>

4.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>
       * {
        font-size: 30px;
        color: red;
       }
    </style>
</head>
<body>
    <p >台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
    <div>至得会千在罪，有夫价皇重死解郭到色切贤。</div>
    <span>不么考又人事当五为无了，丈四使极的九，人。</span>
</body>`在这里插入代码片`
</html>

五.CSS字体属性

5.1 字体大小

<!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>
       * {
        font-size: 30px;
        color: red;
       }
    </style>
</head>
<body>
    <p >台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
    <div>至得会千在罪，有夫价皇重死解郭到色切贤。</div>
    <span>不么考又人事当五为无了，丈四使极的九，人。</span>
</body>
</html>

5.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>
       p {
        font-size: 30px;
        font-family: weiruanyahei;
       }
    </style>
</head>
<body>
    <p >台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
    <div>至得会千在罪，有夫价皇重死解郭到色切贤。</div>
    <span>不么考又人事当五为无了，丈四使极的九，人。</span>
</body>
</html>

5.3 字体粗细

<!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 {
        font-size: 30px;
        font-family: weiruanyahei;
        font-weight: 700;
       }
    </style>
</head>
<body>
    <p >台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
    <div>至得会千在罪，有夫价皇重死解郭到色切贤。</div>
    <span>不么考又人事当五为无了，丈四使极的九，人。</span>
</body>
</html>

5.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>
       p {
        font-size: 30px;
        font-family: weiruanyahei;
        font-weight: 700;
        font-style: italic;
       }
    </style>
</head>
<body>
    <p >台无子支事，罪死宋井斯反胸竟我杨逝婵足。</p>
    <div>至得会千在罪，有夫价皇重死解郭到色切贤。</div>
    <span>不么考又人事当五为无了，丈四使极的九，人。</span>
</body>
</html>