CSS学习笔记——基本语法（一）

最新推荐文章于 2024-07-19 14:40:55 发布

weixin_46888660

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量436

点赞数 2

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_46888660/article/details/121445916

版权

语法规范

<!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: 150px;
        }
    </style>
</head>
<body>
    <p>你好</p>
</body>
</html>

在<head> 标签里面添加<style>,里面添加样式。color修改颜色，font-size修改了文字的大小。

标签选择器

        p {
            color: green;

        }
        div {
            color: pink;
        }

选择的标签，在使用相应的标签就会得到相应的样式。

类选择器

<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;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">aa</li>
        <li>bb</li>
        <li>cc</li>
        <li class="red">dd</li>
        <li>ee</li>
    </ul>
</body>

"样式点定义，结构类调用"。在<style>里面使用".类名"在<body>标签使用class="类名"。即可调用相应的类里面的样式。

选择器多类名使用

<head>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>

一个标签可以添加多个类名，中间使用空格隔开。

id选择器

<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>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">你好</div>
</body>

“样式#定义，结构id定义”。ps:id选择器只能调用一次,一对一。

通配符选择器

        * {
            color: red;
        }

*号定义的样式不需要调用，所有的标签都具有通配符选择器。

字体属性

    <style>
        h2 {
            font-family: '微软雅黑';
        }
        p {
            font-family: '宋体';
        }
    </style>

字体大小属性

 font-size: 16px;

在选择器中使用font-size设置字体大小。

字体粗细

  font-weight: 400;

文字样式

        p {
            /* 让文字斜体显示 */
            font-style: italic;
        }
        
        em {
            /* 让倾斜的字体恢复 */
            font-style: normal;
        }

复合属性

             /* 复合属性：简写方式 font： font-style font-weight font-size/line-height font-family;font-size和font-family不能省略*/
            font: italic 700 16px '微软雅黑';

可以一次设置所有属性。

字体属性总结

文本颜色

 color: rgb(255, 0, 255);

对齐文本

 text-align: center;

上述是文本居中对齐，还有一下对齐方式：

装饰文本

            /* 下划线 */
            text-decoration: underline;
            /* 删除线 */
            text-decoration: line-through;
            /* 上划线 */
            text-decoration: overline;

一般常用的就是对<a>标签里面的下划线去掉。

        a {
            text-decoration: none;
        }

文本缩进

 text-indent: 2em;

一般使用在段落的首行进行缩进。

行间距

line-height: 50px;

改变行之间的间距，但不会改变文字大小。上下间距加文本高度为50px。

文本属性总结

内部样式表

<!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>
        div {
            color: red;
        }
    </style>
</head>
<body>
   <div>内部样式表</div>
</body>
</html>

样式写在<style>里面。

行内样式表

一般写在标签里面，在只需要做一些简单的修改的时候才需要用到：

    <div style="color: red;font-size: 200px;">行内样式表</div>

外部样式表

这是最常用的样式表，一般另外新建一个style.css文件，然后在<head>里面使用如下代码引入：

<link rel="stylesheet" href="style.css">

weixin_46888660

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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
复制链接

扫一扫