CSS(1）

最新推荐文章于 2024-07-23 14:51:29 发布

小白一枚2号

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量868

点赞数 19

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_79590957/article/details/134631211

版权

CSS的3种引入方式

1.内部样式表，学习使用，写在style标签里，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器 */
        p {
            /* 属性：属性值； */
            /* 文字颜色 */
            color:red;
            /* 调整字号 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>CSS初体验</p>
</body>
</html>

style标签放在head标签里，title标签下面。

2.外部样式表：开发使用，单独保存在.css文件里，css文件写好后，在html文件里使用link标签引入css样式表具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部样式表，rel：是样式表的意思 -->
    <link rel="stylesheet" href="./23-CSS.css">
</head>
<body>
    <p>这是P标签</p>
    <!-- 行内写法 -->
    <div style="color: aqua; font-size: 50px;">这是div标签</div>
</body>
</html>

3.行内样式：用来针对某一标签进行美化，例如让一行文字中的某几个文字变红，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一段<strong style="font-weight: 400; color: red;">文字</strong>，我要让<strong style="font-weight: 400; color: red;">文字</strong>这两个字变红</p>
</body>
</html>

当然，如果那几个文字重复出现，还是在syle标签里直接对strong标签（建个类）美化。

css的选择器

CSS有4类选择器，灵活运用能减少很多代码。

1.通配符选择器:查找页面内所有标签，设置相同样式，CSS初期，清除标签默认样式时使用

* {}

2.标签选择器：以标签名作为选择器，选中同名标签，设置相同样式，但是无法差异化同名标签

p {}

3.类选择器：用来差异化同名标签，设置CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .s1 {
            color: red;
            font-weight: 400;
        }
        strong {
            font-weight: 400;
        }
    </style>
</head>
<body>
    <p>这是一段<strong class="s1">文字</strong>，我要让<strong>文字</strong>这两个字变红</p>
</body>
</html>

如上，将第一个strong标签划分给了s1类，并对s1类进行CSS美化，于是第一个“文字”变红，第二个“文字”没有变红（font-weight: 400;是用来去掉文字加粗的，取值为700时，文字加粗）。

4.id选择器：差异化设置标签的显示效果，配合javaScript使用但也可以在style标签中使用，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p1 {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p id="p1">这是一段文字，我要让文字这两个字变红</p>
</body>
</html>

画一个盒子

以最简单的div标签为例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 设置盒子宽高 */
            width: 200px;
            height: 200px;
            /* 设置盒子的背景颜色 */
            background-color: orange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下：

这样，一个200*200px的盒子就画好了。

CSS的文字控制属性

字体大小：font-size；

字体粗细：font-weight 700/bold加粗，400/normal正常，，可更改原有的效果

文字倾斜：font-style italic倾斜，noral正常

line-height 行高，调节两行之间的距离，属性值：数字+px或数字（表示当前标签font-size属性值的倍数）

font-family 设置字体，，，扩展：font-family可以写多个字体，每个字体用逗号隔开，执行顺序从左到右

font复合属性例如：font:italic 700 30px/2 楷体的效果为倾斜，加粗，字号30px，行高30px*2，楷体，注：必须是font:是否倾斜是否加粗字号/行高字体，字号字体必须写，否则不生效

text-indent 文本缩进：段落文字空两格，，，属性值：数字+px或数字+em（1 em=当前标签的字号大小）

text-align：文本对齐对齐方式：left 左对齐；right 右对齐；center 水平居中

这些属性建议自己设置熟悉。

文本修饰线

1.去掉原有的修饰线，如a标签的下划线：text-decoration: none;

2.添加下划线：text-decoration: underline;

3.添加删除线：text-decoration: line-through;

4.添加上划线：text-decoration: overline;

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    a {
        text-decoration: none;
    }
    div{
        text-decoration: underline;
    }
    p {
        text-decoration: line-through;
    }
    span {
        text-decoration: overline;
    }
</style>
<body>
    <ul>
        <li>text-decoration:none,underline,line-through,overline</li>
    </ul>
    <a href="#">a标签，去掉下划线</a>
    <div>div标签，添加下划线</div>
    <p>p标签，添加删除线</p>
    <span>span标签，添加上划线</span>
</body>
</html>

小白一枚2号

关注

19
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
CSS(1）

font复合属性例如：font:italic 700 30px/2 楷体的效果为倾斜，加粗，字号30px，行高30px*2，楷体，注：必须是font:是否倾斜是否加粗字号/行高字体，字号字体必须写，否则不生效。如上，将第一个strong标签划分给了s1类，并对s1类进行CSS美化，于是第一个“文字”变红，第二个“文字”没有变红（font-weight: 400;font-family 设置字体，，，扩展：font-family可以写多个字体，每个字体用逗号隔开，执行顺序从左到右。
复制链接

扫一扫