首页 > 其他分享> 文章详细

CSS基础详解

2021-07-05 13:53:23 阅读：109 来源： 互联网

标签：缩进 font 标签基础详解样式表文本选择器 CSS

标签选择器

标签选择器

标签选择器，顾名思义，就是确定是哪个标签的，p标签了，div标签了等等等吧，其特点就是如果你选择了p标签，那么所有的p标签的样式都会服从你的定义，同理div等其他标签也是这样，来看个例子吧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p {
            color: #ff00ff;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>

在这里给p标签设置了颜色，给div标签设置了另一种颜色，你会发现，所有的p标签和div标签都改变了颜色，结果如下

类选择器

从上面的标签选择器可以看出，每次设置样式的时候，如果是p标签，那么会把所有的p标签的样式都改变了，很多时候我们只是希望改某些标签的样式，所以就有了类选择器，也就是我们自定义一个类选择器，哪个标签使用，那么在该标签后用class属性调用就可以了，还有一个class属性可以调用多个类选择器，注意类选择器名字前有一个"."，看看下面的例子吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">生僻字</li>
        <li class="red font35">芒种</li>
        <li>过客</li>
    </ul>
</body>
</html>

上面自定义了一个颜色和一个字号，通过不同的li标签去调用，展示出不同的样式，运行如下

id选择器

这个id选择器跟上面的类选择器很相似，在定义的时候是在名字前加"#"，在调用的时候是用id属性，其特点是，你自定义的样式只能被调用一次，具体看下面的例子吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #red {
            color: red;
        }
    </style>
</head>
<body>
<!--id选择器只能被调用一次-->
<div id="red">hello world</div>

<!--由于上面已经调用，所以下面这个会报错-->
<!--<p id="red">hello</p>-->
</body>
</html>

上面那个报错的我已经注释了，你要是想演示，可以在即放开试试，上面的运行结果如下

通配符选择器

通配符选择器就比较厉害了，如果你是以*来定义了一个选择器，那么就是所有的样式都会跟你自定义的一样了，来看效果吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1>啦啦啦啦</h1>
<div>hello</div>
<p>world</p>
</body>
</html>

运行结果如下：

字体属性

字体属性，也就是设置字体倾斜了，加粗了，大小了还有字形，例如微软雅黑或者宋体等，看看效果吧。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        body {
            font-family: 微软雅黑;
            font-size: 25px;
        }
        .bold {
            /*font-weight: bold;*/
            font-weight: 700;
        }
        div {
            /*复合属性，这里四个属性必须按顺序写，其中后两个是必不可少的*/
            /*font: font-style font-weight font-size/line-height font-family;*/
            /*分别是倾斜，加粗，16px大小和微软雅黑字体*/
            font: italic 700 16px 微软雅黑;
        }
        p {
            font-style: italic;
        }

        em {
            font-style: normal;
        }
    </style>
</head>
<body>
<div class="bold">hello world</div>
<p>上课时候的你</p>
<em>下课时候的你</em>
<div>hello</div>
</body>
</html>

运行结果如下：

文本装饰

文本装饰的话，就是给你写的文本加个下划线、删除线，上划线或者去掉个下划线（一般是去掉超链接的下划线）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本装饰</title>
    <style>
        div {
            /*下划线（常见）*/
            text-decoration: underline;
            /*删除线*/
            /*text-decoration: line-through;*/
            /*上划线*/
            /*text-decoration: overline;*/
        }
        a {
            /*常见*/
            text-decoration: none;/*去掉下划线*/
        }
    </style>
</head>
<body>
<div>hello world</div>
<a href="#">链接</a>
</body>
</html>

运行结果：

文本缩进

文本缩进就比较简单了，就是我们常见的段落前空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
    <style>
        p {
            /*这里的2em就是两个字的意思，也可以写具体像素例如2em改为32px*/
            text-indent: 2em;
        }
    </style>
</head>
<body>
<p>文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
    文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
    文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
    文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进
</p>
</body>
</html>

运行结果：

行间距

行间距，就是在一行文本中，字体占了多大像素，然后上边距多大，下边距多大，例如设置行间距是36像素，然后字体是16像素，那么上下边距各10像素具体如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行间距</title>
<!--    在这里的字体大小是16px如果设置行高为36px那么该行的上边距是10px下边距是10px-->
    <style>
        div {
            line-height: 36px;
        }
        p {
            line-height: 16px;
        }
    </style>
</head>
<body>
<div>中国</div>
<p>中国</p>
</body>
</html>

运行结果：

下图的蓝色是我用鼠标选中的，只是为了让你更能直观的看出上下边距的大小

内部样式表

说起来内部样式表，不难想起上面的选择器，只不过这里分定义的位置，首先看看什么样是内部样式表吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <!--练习的时候常用-->
    <!--内部样式表就是把样式定义在了html内-->
    <style>
        div {
            color: green;
        }
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>

运行结果：

内部样式表就是定义在html内的，也就是我们上面演示选择器的时候用的

行内样式表

学过内部样式表，行内样式表，是不是能猜出个一二了，行内样式表就是定义在行内的，难以想象吧，看看例子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式表</title>
</head>
<body>
<p style="color: green; font-size: 20px">要想生活过得去，身上必须带点绿</p>
</body>
</html>

运行结果：

外部样式表

好了，终于到我们的外部样式表了，这也是我们开发中最常用的方式，因为我们大部分时候写的样式会很多，如果都写在html中多不方便呀，想看看html代码，要往后翻上百行代码，当然了，开发中是提倡结构和样式分离的，也就是你写你的html我写我的CSS，来上例子吧，首先我们写一个.css文件，也就是把我们的样式先写好，简单起见，我就写了一个样式。

/*这里只有样式*/
div {
    color: green;
}

这个样式我是跟html文件放在一块的，方便html来引入该css样式，好了，说说怎么引入吧，用到了link标签，该标签里写了两个属性，反别是rel表示链接文档的类型，其中stylesheet代表是样式表文档，href是你写的css的路径，好了看具体操作吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <!--rel表示链接的文档是一个样式表文档，href是css的文件路径-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>要想生活过得去，身上必须带点绿</div>
</body>
</html>

看看结果是不是我们想要的

标签：缩进,font,标签,基础,详解,样式表,文本,选择器,CSS
来源： https://blog.51cto.com/u_15065305/2979555

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS基础详解